Search code examples
javascriptfacebookvue.jsfacebook-pixel

How do I fire Facebook pixel within VueJS


UPDATE WITH CORRECT CODE:

<script>
        export default {
            mounted() {
    //            this.comments_data = this.comments;
            },
            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.comments_data = this.comments;
        },
        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>

Solution

  • 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 component.