javascript - How do I fire Facebook pixel within VueJS - Stack Overflow

UPDATE WITH CORRECT CODE:

<script>
        export default {
            mounted() {
    //            thisments_data = thisments;
            },
            props: ['type'],
            data() {
                return {
    //                type: [],
                    email: '',
                    error_found: false,
                    email_error: '',
                    already_subscribed: '',
                    subscribed: false,
                }
            },
            methods: {
                subscribe(){
                    var vm = this;
                    vm.error_found = false;
                    vm.email_error = '';
                    vm.already_subscribed = '';
                    window.fbq('trackCustom', 'Custom Event Name Goes Here', {value: 1.00, currency: 'USD'});
                },
            },
        }
    </script>

I'm trying to fire a FB Pixel when someone clicks on subscribe button using VueJs. Code "vm.fbq.push('track', 'Even Name goes here', {value: 1.00, currency: 'USD'});" does not fire once someone clicks on the subscribe button. I have tried everything but with no luck. Does anyone know how to fire a Facebook pixel event from VueJS once someone clicks on a button?

<button @click="subscribe" class="btn btn-success btn-block">
    Submit
</button>

This is my VueJS Code

<script>
    export default {
        mounted() {
//            thisments_data = thisments;
        },
        props: ['type'],
        data() {
            return {
//                type: [],
                email: '',
                error_found: false,
                email_error: '',
                already_subscribed: '',
                subscribed: false,
            }
        },
        methods: {
            subscribe(){
                var vm = this;
                vm.error_found = false;
                vm.email_error = '';
                vm.already_subscribed = '';
                vm.fbq.push('track', 'Even Name goes here', {value: 1.00, currency: 'USD'});
            },
        },
    }
</script>

UPDATE WITH CORRECT CODE:

<script>
        export default {
            mounted() {
    //            this.ments_data = this.ments;
            },
            props: ['type'],
            data() {
                return {
    //                type: [],
                    email: '',
                    error_found: false,
                    email_error: '',
                    already_subscribed: '',
                    subscribed: false,
                }
            },
            methods: {
                subscribe(){
                    var vm = this;
                    vm.error_found = false;
                    vm.email_error = '';
                    vm.already_subscribed = '';
                    window.fbq('trackCustom', 'Custom Event Name Goes Here', {value: 1.00, currency: 'USD'});
                },
            },
        }
    </script>

I'm trying to fire a FB Pixel when someone clicks on subscribe button using VueJs. Code "vm.fbq.push('track', 'Even Name goes here', {value: 1.00, currency: 'USD'});" does not fire once someone clicks on the subscribe button. I have tried everything but with no luck. Does anyone know how to fire a Facebook pixel event from VueJS once someone clicks on a button?

<button @click="subscribe" class="btn btn-success btn-block">
    Submit
</button>

This is my VueJS Code

<script>
    export default {
        mounted() {
//            this.ments_data = this.ments;
        },
        props: ['type'],
        data() {
            return {
//                type: [],
                email: '',
                error_found: false,
                email_error: '',
                already_subscribed: '',
                subscribed: false,
            }
        },
        methods: {
            subscribe(){
                var vm = this;
                vm.error_found = false;
                vm.email_error = '';
                vm.already_subscribed = '';
                vm.fbq.push('track', 'Even Name goes here', {value: 1.00, currency: 'USD'});
            },
        },
    }
</script>

• javascript
• facebook
• vue.js
• facebook-pixel

Share Improve this question Follow edited Jun 21, 2017 at 3:17 Boki_LV asked Jun 20, 2017 at 20:31 Boki_LVBoki_LV 2111 silver badge88 bronze badges 3

• Hey Bert, your suggestion does not work. It still does not fire. – Boki_LV Commented Jun 20, 2017 at 20:46
• 1 You probably want window.fbq, not vm.fbq. – ceejayoz Commented Jun 20, 2017 at 20:47
• 1 Side note: var vm = this; is totally unnecessary. Just use this. – ceejayoz Commented Jun 20, 2017 at 20:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Presuming you've loaded the FB pixel base code in the normal manner, you probably want window.fbq, not vm.fbq. fbq is not a part of your ponent.