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?
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.
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.
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
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:
(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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With