Facebook Pixel monitors visitor activity on your website and sends this information to the linked advertising platform. If you're using Google Tag Manager (GTM) to stay on top of your website's tracking, you can set up Facebook Pixel with Google Tag Manager. In this blog post, I'll guide you through the process, step by step.
Step 1: You can obtain the pixel code from your Facebook account by following these instructions:
Step 2: Then, choose "Web" as the data source. Please note that you must have a business manager account to proceed with this step.
Step 3: Now, you have the option to name your Pixel. Simply click on "Create Pixel", and it will generate a new ID visible in your Events Manager.
Next, enter your website URL.
Then, you'll then be presented with the choice to get guidance or do it yourself.
You will need to answer questions such as:
While these questions are optional, it is advisable to answer all of them to receive the most beneficial recommendation.
Now you will have the option to choose whether to connect only the Facebook Pixel or both the pixel and Conversion API.
But if you're not sure which to choose, read here: Conversion API vs Facebook Pixel: Which one to choose?
If you choose the option to connect both the Pixel and Conversion API, it will appear like this.
For instructions on setting up Conversion API, you can find it here: Facebook Conversion API 101: Free explanation and action guide [2024]
Step 4: Clicking on the "Set up with partner integration" button will lead you to a screen displaying various options for installing the Pixel code, including the option to use Google Tag Manager.
I discourage using this method because it grants Meta access to your container, allowing them to edit, add, and remove tags. It also publishes the container without warning, which can be problematic if you're still working on tags.
Instead, if you close this prompt, you can find your Pixel ID in the Events Manager, which we'll use in GTM in the next section.
Now that we have the necessary components, we can access our GTM account (assuming it's already set up) and integrate the Meta Pixel code, also known as the base code.
There are 2 ways to install the Facebook Pixel via Google Tag Manager:
Sounds difficult, right? You might find it a bit overwhelming if you're not familiar with the process. These methods are widely used due to their longevity and stability, but nowadays, there are many faster and easier options available, such as using apps specialized in setting up Facebook Pixel, like Two Owls Facebook Pixel.
However, if you still want to learn how to set up using the traditional method, with complex steps, then read on. I'll walk you through each step one by one.
Firstly, whether you choose option 1 or 2, you still need to have a Google Tag Manager account. If you don't have an account, below are the steps to create one:
Step 1: To set up a new Google Tag Manager account, go to tagmanager.google.com, and click the "Create Account" button in the top-right corner.
Step 2: Ideally, your account name should reflect your company name, while the container name should correspond to your website name. After naming the account and container, click the CREATE button located at the bottom left.
Congratulations! You've successfully set up your new Google Tag Manager account. You can find your GTM Container ID and the container snippet code highlighted in the image below.
To begin, let's generate a basic page view tag. Navigate to the Tags section on the left panel, then select the New button on the right.
Within the Tag configuration interface, locate the Facebook Pixel template by facebookpixelarchive in the GTM tag template gallery by searching for "Facebook" (it's still referred to as Facebook in some areas). Select this template.
Select the "Add to Workspace" button, followed by clicking on the "Add" button once more.
Within the Tag Configuration interface, input the Facebook Pixel ID that we observed in the Events Manager.
Because we aim for the base pixel code to be activated on all pages, we will opt for the "All Pages Page View" trigger and proceed to save the tag.
The final step involves confirming that the pixel code is loading on our demo site by using GTM's preview mode and tag assistant.
If the tag is firing correctly, it indicates that the setup in GTM is functioning properly.
To install with a custom HTML tag, you need to retrieve the code from the Events Manager.
Return to your Pixel, and select Manage Integrations → Manage → Add to another website.
Click on the "Install code manually" button, as demonstrated in the "Getting Meta Pixel Code" section above. Then, proceed to copy the code.
Navigate to Tags in GTM, then select the option to create a new tag and choose Custom HTML.
Paste the base code into the tag and apply the "All Pages Page View" trigger, just like we did for the first method.
Lastly, we can test the tag in preview mode to ensure that the Manual Base Pixel tag is firing correctly.
The drawback of using the manual method is that you'll need to modify the code each time you wish to add additional events besides the basic PageView.
Alternatively, if you prefer not to edit the base code, you can create separate tags. However, it's essential to ensure they fire after the base code is loaded, which can be somewhat cumbersome.
Nevertheless, employing either method ensures that events are now sent to the Meta Events Manager.
Here are the most effective ways to check if your Facebook Pixel is installed correctly:
This is the easiest, most recommended method:
Checking the details. The Pixel Helper popup will provide more information:
Learn More: Facebook Pixel Helper: What, Why And How For 2024
It appears that we are receiving the PageView event, and the installation is confirmed for one website, namely our demo shop.
To verify that events are being received as you navigate through the site, access the Test Events tab.
In the Test Events tab, input your website's URL under Test Browser Events and select the Open Website button. This will open the site in a new tab. Monitor this area as live events are streamed in.
Shortly after, your events should become visible.
Events marked as "Processed" in green indicate that everything appears to be functioning correctly. You can expand to view additional details of the event if needed.
If you see "Partner integration" listed under the Setup Method column, there's no need to worry. It's a bug. Additionally, the Pixel Helper may indicate it as manual, despite being installed using GTM.
Tracking conversions and performance after setting up Facebook Pixel with Google Tag Manager involves 2 main aspects:
Verify that the event name in Ads Manager matches the event name in your GTM tag.
Use the Facebook Pixel Helper Chrome extension to test if the Pixel is firing correctly on your website.
Visit key pages where conversions are expected to occur and check if the Pixel Helper shows the corresponding event being sent.
Access the "Ads Manager" section on Facebook and navigate to the "Reporting" tab.
You can analyze various metrics like website visits, conversions, cost per conversion, and other relevant data associated with your Facebook Ads campaigns.
Use filters to analyze performance based on specific campaigns, ad sets, or timeframes.
Facebook Ads are my bread and butter, but even the most seasoned pro can stumble upon glitches when using Google Tag Manager Facebook Pixel. Here's what I've learned from countless campaigns and troubleshooting sessions:
This is a classic mistake. Ensure the Pixel ID in your GTM tag matches the one in your Facebook Events Manager. Even a single misplaced digit can prevent the Pixel from firing.
The trigger associated with your Pixel tag might be too broad or too narrow:
When setting up specific conversion events like purchases, ensure you're using the correct event code snippets provided by Facebook. Incorrect event names or missing parameters can lead to inaccurate data collection.
The Facebook Pixel Helper Chrome extension can sometimes be unreliable. It might not always detect the Pixel firing correctly, requiring additional troubleshooting methods.
Caching mechanisms or ad blockers on your website might prevent the Pixel code from loading properly. Configure your website settings or consider workarounds like server-side tracking.
If you're using dynamic data for event parameters, ensure your data layer is set up correctly and passing the necessary information to your GTM tags.
Pro tips to Troubleshoot & Fix it:
>>> Read more: Why is My Facebook Pixel Not Working and How to Fix The Issue?
Wrap up
Google Tag Manager is a powerful tool for managing different Pixels on your website, and the Meta pixel is one of the most important ones to include in your GTM setup.
After setting up Facebook Pixel with Google Tag Manager, you can configure the events you want to track and gain valuable insights into visitor behavior, enabling more precise audience targeting and improved ad performance on the Facebook platform.