Heads up!
If you're running an ecommerce site, I'd advise against using an image tag implementation for a Facebook pixel. Most ecommerce platforms have an out of the box implementation which takes care of all the required signals/events you need. This guide is more for simpler sites that have less signals/events to track.
How does tracking work with an image tag?
When you add something to the source attribute of an image tag, you're making a request for information. By making the request, you're also providing information to a server which will in turn look at the requested URL and save the information.
Facebook pixel payload
We've all seen our pagespeed scores dip when adding analytics to our site. Facebook pixel is no different clocking in at:
94.6 kB
That's quite a large bundle size for something that simply tracks interactions. But the good news is we can get that down to:
< 1 kB
Did your face just light up like mine did when writing this article? Let's get to how we can do this!
Before we get started
You'll need the following things in order to implement and test the Facebook pixel image tag implementation:
- Google Chrome
- Google Tag Manager (GTM) installed on the website and access to it. This guide will use GTM to install the pixel. If you want to install GTM, you can start here
- Facebook Pixel ID
- Facebook Pixel Helper
Installing Facebook Pixel
Step 1: Disable previous tag implementation
To ensure we're able to test the new tag implementation, please pause the pre-existing in GTM. If you installed it using a different method, find the relevant tool and uninstall.
Step 2: Navigate to GTM and create a workspace
Head over to your GTM accounts screen and find the relevant container you want to make changes to.
Once you're on the container screen click Manage Workspaces and click the plus icon on the top right hand side of the workspaces screen.
After doing that, you'll have your own workspace to create changes. This avoids the possibly of other people messing around with your work.
Step 3: Create a constant for the Facebook Pixel ID
GTM supports variables within URLs. It's a common practice to pull out things that don't change, making it easier to create future tags.
On the container screen, click Variables. Under User Defined Variables click New.
Name the variable Facebook Pixel ID or something else just remember to write it down somewhere.
Choose the variable type Constant (search or scroll down to find).
Then in the Value field, add your Facebook Pixel ID.
Once done hit save.
Step 4: Create a custom image tag
On the container screen, click Overview then click Add a new tag.
Name the tag Facebook Pixel or whatever you want.
Choose the tag configuration Custom Image.
For this example we'll just create a pageview event for simplicity. But this can be applied to events which have custom parameters.
Copy the following into the Image URL input.
Notice how the id is replaced with a variable we created in step 2. If you named it something else, you'll need to update here also.
Please also enable cache busting if it isn't already checked.
Trigger the tag to fire on All Pages. If you're website is a single page application, use a trigger which detects path changes.
Step 5: Test implementation
On the container screen, click Preview.
Input the URL that you want to test.
After that you're website should open in another tab.
Click the new tab and on the chrome extensions click the Facebook Pixel icon (you might need to pin it before you can use it).
You'll now see that the custom image tag is doing it's job.
Thanks for getting this far. If this has helped you, let me know in the comments.