One issue when adding the Facebook pixel to a Google Tag Manager AMP container is that there are no custom HTML snippets allows. Quite often, this is how people normally integrate the FB Pixel into the GTM container so it is understandable to be confused when this does not exist.
There is a however, an efficient (i.e. from a performance perspective) solution to use the FB pixel within the AMP GTM container: use the raw FB Img tag and integrate that into the GTM container.
In previous posts, I’ve broken down how to use the FB Img tag. It is slightly more complex than the FB JS code (i.e. to get right), but in these cases, it is necessary as there is no “reliable option” to use the FB JS code.
The solution can be divided into the following main steps:
- Create a “Custom Image Tag “tag in GTM
- Create a Custom (User-Defined Variable) GTM Variable (for scalability)
- Publish your Container and Test (with FB Pixel Helper)
Create a “Custom Image Tag “tag in GTM
Since there is no Custom HTML Snippet option, we need to add a “Custom Image Tag” tag. At heart, what is going on in the FB JS tag is that it is constructing the img tag behind the scenes to fire on your page. We’re essentially going to build a simple img tag to simulate a normal PageView event. Then trigger it on “All Pages” (of course, you can change the trigger to your needs)
The img tag you want to paste is similar to (the following example is for a PageView): https://www.facebook.com/tr?id={{FB_PIXEL_ID}}&ev=PageView&noscript=1
- The {{FB_PIXEL_ID}} is a GTM variable which we will set in the next step
- The anatomy of the img tag is explained in my previous post and also, if you want help building img tags use Farmer’s Pixel Builder I built as a guide.
This type of implementation is more manual, but an advantage of doing this without the JS code is that no JS code needs to be downloaded from the FB server and keeps the “loading burden” minimal/maximizes performance.
Create a Custom (User-Defined Variable) GTM Variable (for scalability)
This step is necessary for my example, but not strictly necessary in practice – in theory, you could hardcode your FB Pixel ID right into the image, but a more scaleable approach is to create a User-Defined Variable Constant with the Pixel ID so you can re-use it within your other tags in GTM.
So create a custom variable so it resembles (remember: we used {{FB_PIXEL_ID}} as the token, so the variable name has to reflect this) – replace the value with your FB Pixel Id:
Publish your Container and Test (with FB Pixel Helper)
Once the Tag, Trigger and User-Defined Variable is set up. Publish your container. Ensure it is integrated into your AMP page (we won’t go into this in this tutorial). Navigate to the page and test with the FB Pixel Helper. You will see a PageView event firing.
