How to Install the Facebook Pixel on an AMP Website Using Google Tag Manager

Are you working with a native AMP website or a website with AMP pages, but you need to integrate the Facebook Pixel?  To top it all off, you’re also using Google Tag Manager (because it’s awesome).  How to go about this?

Well, I’m here to help.  While this implementation is not documented very well, it’s actually very simple!

Facebook Tracking Pixel Without Javascript

If you’re using Google’s AMP (Accelerated Mobile Pages) HTML in either native or paired mode, you can’t use any custom javascript code in your pages that use AMP.

So, the standard Pixel tracking code is not going to work.

Luckily, there is a “no javascript” alternative which involves a 1×1 pixel (hence the name) image with a certain source URL…

https://www.facebook.com/tr?id=1234567890&ev=PageView&noscript=1

Be sure to change the “id” number to your Pixel ID number.

How to Add the Pixel in Google Tag Manager

• Login to your Google Tag Manager Account
• Click on your AMP container (if you don’t already have an AMP-specific container, you will need to create one for your AMP pages separate from your normal container)
• Click on Tags
• Add a new tag and call it “Facebook Pixel”
• Choose the Custom Image tag configuration
• Enter your Image URL in the format from above, using your own ID.
• Save and publish your container changes.

Questions?

Let me know in the comments below.  Thanks.

Nathan Kinkead

Blogger, expert WordPress developer, and developer of the awesome bbPress Voting plugin which is a must-have plugin for any bbPress forum.

Download bbPress Voting for free on the WordPress Plugin Directory.