To add the Facebook pixel with Google Tag Manager, create a Custom HTML tag with Meta's base code, fire it on all pages, add one tag per event with its own trigger, preview the container, publish it and test with the Pixel Helper. The pixel then loads from the tag manager, with no edits to your theme.
TL;DR
- You need a container on your site and edit access to it.
- The base code goes in one tag that fires on all pages.
- Each event, such as Purchase, gets its own tag and trigger.
- Preview mode shows which tags fire before you publish.
- Remove any copy of the pixel code in your theme, or events will fire twice.
- Server events need a separate setup, since the tag manager only sends from the browser.
What you need
- Google Tag Manager installed on your site, with publish rights.
- Your pixel ID. See how to find your pixel ID if you need it.
- The base code from Events Manager.
- A way to place a test order.
Step 1: Create the base code tag
In your container, add a new tag of type Custom HTML. Paste the base code from Events Manager, which includes the line that starts the pixel with your ID and sends PageView. Name it clearly, for example "Meta pixel base".
How to check: the tag shows your correct pixel ID in the code.
Let Madgicx's AI do the work
Its AI marketer finds what's working and prepares the next move. You approve.
Try for Free ($0 Trial)Step 2: Set it to fire on all pages
Add a trigger of the type "Page View" with the condition All Pages. The base tag must load before any event tag, so this is the first trigger you build.
How to check: in the trigger list, the base tag shows All Pages.
Step 3: Add event tags
For each action you want to track, add another Custom HTML tag that calls the pixel event, such as the AddToCart or Purchase line. Give each its own trigger. A Purchase tag, for instance, should fire only on the order confirmation page or on a purchase event from your site's data layer.
| Event | Typical trigger |
|---|---|
| ViewContent | A product page view |
| AddToCart | A click on the add to cart button, or a data layer event |
| InitiateCheckout | The checkout page view |
| Purchase | The confirmation page or a purchase data layer event |
Send value and currency with Purchase. Our post on Meta Pixel standard events lists what each event takes.
How to check: each event tag has exactly one trigger that matches a real action.
Step 4: Preview before publishing
Click Preview in Tag Manager, enter your site address, and walk through the path from a product page to the confirmation page. The preview panel lists which tags fired on each step.
How to check: the base tag fires on every page, and each event tag fires once at the right step.
Step 5: Remove other copies of the pixel
If your theme or platform already loads the pixel, the tag manager version will duplicate it. Look for pixel code in your theme files and for a platform integration that also sends events. Keep one source.
How to check: the Pixel Helper shows each event once per action.
Step 6: Publish and test live
Submit and publish the container version. Open your site in a normal browser, use Meta's Pixel Helper, and place a test order. Our Facebook Pixel Helper guide shows what it reports and how to read it.
How to check: Events Manager's Test events shows the events arriving once, with value and currency on Purchase.
Step 7: Plan for server events
A tag manager running in the browser is still browser tracking, so ad blockers and consent choices can stop it. Server events fill the gap. Google describes server-side tagging as a setup where a server container sends data instead of the browser. Pairing it with Meta's Conversions API is one route, and platform integrations and gateways are others. Our answer on setting up the Conversions API compares them.
How to check: Events Manager lists Server as a source beside Browser, and a test order shows one Purchase.
What is the most common mistake?
Firing Purchase on every visit to a page that people can reload or revisit. A confirmation page reached from an email link would send the purchase again. Trigger on a purchase event from your site's data layer where you can, and avoid triggers that depend only on a page address.
What should I do next?
Run the check from step 6 again after any change to your container or checkout. Then compare Meta's purchases with store orders for a week. Our answer on what the Facebook pixel is explains how Meta uses what you send.
Where Madgicx fits
Madgicx covers the server side without a second container. Madgicx Cloud Tracking sends conversions to Meta from your server, so Meta sees and attributes more of them next to your tag manager pixel. You decide how tracking is set up.
FAQ
Is it better to install the pixel with Google Tag Manager or directly?
Neither is better. A tag manager is easier to change later, and a direct install has fewer moving parts.
Can I send Conversions API events from Google Tag Manager?
Yes, through a server container, which needs hosting and setup. A platform integration or gateway can be simpler.
Why does my Purchase event fire twice?
Usually because the pixel code also sits in your theme, or an app sends events too. Keep only one source.
Does Google Tag Manager slow my site?
A small extra load is normal. Keep the container tidy and remove tags you no longer use.
Do I need a developer to add the pixel with GTM?
Not for the base code. Purchase and other event data may need a developer to expose it in your site's data layer.
Related
- Answers: What is the Facebook Pixel Helper?
- Answers: How to find your Facebook pixel ID
- Glossary: Meta Pixel, Conversions API
Go deeper
For a longer walkthrough of this setup, read our post on how to add a Facebook Pixel with Google Tag Manager.
