Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Facebook Pixel + Google Tag Manager + fbq events

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?

like image 501
Alexander G Avatar asked Oct 27 '17 10:10

Alexander G


People also ask

How do I track a Facebook event in Google Tag Manager?

Configuring the TagPaste the Pixel code from Facebook into this Custom HTML tag. Give the tag a name and then scroll down to click on Advanced Settings. Under advanced settings, click on Tag Sequencing and check the box next to Fire a tag before [your tag name] fires. Now, Click on Save to Save this tag.

Can you put Facebook pixel in Google Tag Manager?

If you're using Google Tag Manager to manage tags for your website, you can add your Meta Pixel to your Google Tag Manager account to measure and optimize the results of your Facebook advertising. Learn about the benefits of installing the Meta Pixel.


2 Answers

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

like image 103
vir us Avatar answered Sep 22 '22 01:09

vir us


Use the tag sequencing feature. This allows to fire tags in a predefined order, where the subsequent tags wait for the previous ones before they are executed.

Create a tag that loads the FB init code. Select "Once per page" in the tag firing options (you need to load this only once, even if it used by multiple tags).

Go to your Facebook event tag. In the advanced settings look for the tag sequencing options. Set it to:

enter image description here

(where Facebook init is your tag that loads the FB library, I am asumming that you use their standard bootstrap code). With the last checkbox enabled this will not fire if your setup tag has failed.

Since the FB bootstrap code will set up a fbq object with a command queue you can now push data to fbq; even if the library is still downloading the data will enter the command queue and the calls will be executed when the library has been downloaded.

The tag sequence makes sure that the fbq object is set up before your event. If this is your only FB event you can save yourself the trouble and simply paste the loader above your event code.

like image 32
Eike Pierstorff Avatar answered Sep 22 '22 01:09

Eike Pierstorff