Facebook Pixel + Google Tag Manager + fbq events

javascript google-tag-manager facebook-pixel
Alexander G picture Alexander G · Oct 27, 2017 · Viewed 13k times · Source

I'm using Google Tag Manager to deliver Facebook Pixel.

Then, I fire events using code like this 

  <body>
...
        <script>
            fbq('track', 'ViewContent', { 
                content_type: 'product',
                content_ids: ['1234'],
                content_name: 'ABC Leather Sandal',
                content_category: 'Shoes',
                value: 0.50,
                currency: 'USD'
            });
        </script>
    </body>

But when the code is executed I got an error since Facebook Pixel is loaded asynchronously and fbq is not available yet.

Uncaught ReferenceError: fbq is not defined

What should I do?

Answer

vir us picture vir us · Jul 5, 2019

Couldn't get Eike's approach to work and ended up with the below "dirty workaround" (basically it just waits till the fbq is inited):

<script>
    function waitForFbq(callback){
        if(typeof fbq !== 'undefined'){
            callback()
        } else {
            setTimeout(function () {
                waitForFbq(callback)
            }, 100)
        }
    }

    waitForFbq(function () {
        fbq('track', 'Registered');
    })
</script>

Maybe it will help someone as well

Related questions

Google Tag Manager isn't loading javascript, error message "anonymous function"

I have installed Google Tag Manager on my website, and am using it to load some Javascript onto my site. However, GTM is no longer loading, my Javascript isn't loading, and the error code is not very helpful. Here is …

Read More
How to test data layer variables in Google Tag Manager?

In Google Tag Manager, I have some data layer variables set up. How can I test that the data is coming in through these variables as I expect? So, I want to verify that the data is getting collected in …

Read More
Google Tag Manager with AngularJS?

How do I use GTM with Angular? I'm trying to fire a (virtual) pageview event when I load a new partial using this code: dataLayer.push({ 'event' : 'pageview', 'pageview' : $location.path(), 'virtualUrl' : $location.path() }); But I don't see the event …

Read More