In this guide
- Create one Meta pixel base tag in Tag Manager and remove any pixel code that is hard-coded on the site.
- Fire standard events (ViewContent, AddToCart, Purchase, Lead) from data layer events, with value and currency.
- Use an event ID from the start so you can add the Conversions API later without duplicates.
This is the browser-side set-up of the Meta pixel through Google Tag Manager. It is the first half of Meta tracking; the second half is the Conversions API. Do the pixel well first and the server side becomes easy. For the difference between them see Meta Conversions API vs Pixel.
Before you start
- You have a Tag Manager web container on the site.
- You have a Meta pixel (dataset) ID.
- Your site pushes e-commerce events to the data layer, or you can add them. See GA4 event tracking.
- You removed any pixel code that was pasted straight into the theme.
Check your tracking in one pass
This is an example. Run the check on your own site to see where yours stands.
Step 1: the base tag
Create a new tag
In Tag Manager, add a tag and use the Meta pixel template from the gallery, or a Custom HTML tag with Meta's base code.
Enter the pixel ID
Use a constant variable so you can change it in one place.
Choose the PageView event
This sends a page view on each page.
Set the trigger
All pages, or all pages where consent allows it.
Step 2: events
| Data layer event | Meta event | Parameters |
|---|---|---|
view_item | ViewContent | content IDs, value, currency |
add_to_cart | AddToCart | content IDs, value, currency |
begin_checkout | InitiateCheckout | value, currency, number of items |
purchase | Purchase | value, currency, content IDs |
generate_lead | Lead | value if known |
For each, create a tag of the same type with the event name and the parameters from data layer variables, and a trigger on the matching custom event.
3 things to remember
Scroll and the points stack up.
Create one Meta pixel base tag in Tag Manager and remove any pixel code that is hard-coded on the site.
Fire standard events (ViewContent, AddToCart, Purchase, Lead) from data layer events, with value and currency.
Use an event ID from the start so you can add the Conversions API later without duplicates.
Step 3: the event ID
Create a data layer variable for event_id and put it in the tag's event ID field. Push a value with each event. This costs nothing now and avoids duplicate counting when you add server events. See event deduplication.
Step 4: advanced matching
If the visitor has given an e-mail or phone, you can pass it to the pixel (hashed by the pixel) to improve matching. Do it only with consent. The server tag can do the same with better control.
Step 5: test
- Install the Meta Pixel Helper in Chrome.
- Start Tag Manager Preview and open your site.
- Check that PageView fires once on each page.
- Perform each event and watch it in Pixel Helper and in Meta Events Manager, Test Events.
- Check the parameters, especially value and currency.
- Publish.
Common problems
Why this order of work matters
The pixel is the quickest way to see whether your events and parameters are right, because Pixel Helper and Test Events show every call as it happens. Treat this stage as your design review. If the browser events carry the right names, values and IDs, the server events can copy them one for one. If they do not, you will chase differences between two half-working copies later, which is much harder than fixing one now.
Keep a short list of the events you set up, with the data layer event that triggers each one and the parameters it sends. When a number looks wrong a month later, that list tells you where to look. It also becomes the specification for the Conversions API tag, so the work is not wasted. Many teams skip this list and then rediscover the same details every time someone changes the theme.
Terms you will see
- Pixel
- The Meta script that runs in the browser and sends events.
- Dataset
- Meta's current name for the pixel and its data.
- Standard event
- A named event Meta understands, such as Purchase.
- Custom HTML tag
- A Tag Manager tag where you paste code yourself.
- Pixel Helper
- A Chrome extension that shows which pixel events fire on a page.
Orders from your store, back to the ad that earned them
Your store sends the order once. Open Tracked passes it on to each ad platform, cleaned and deduplicated.
Frequently asked questions
How do I add the Meta pixel with Google Tag Manager?
Create a Meta pixel tag with your pixel ID, fire PageView on all pages, add event tags driven by data layer events and test with Pixel Helper.
Do I need to remove the pixel code from my theme?
Yes, otherwise events fire twice.
How do I send purchases to Meta?
Push a purchase event with value, currency and items to the data layer and trigger a Purchase tag on it.
Should I add an event ID now?
Yes. It makes adding the Conversions API later painless.
Does the pixel need consent?
Where the law requires it, yes.
Do I need spreadsheets to read my results?
No. Once tracking is live, the Open Tracked analytics shows spend, revenue, ROAS and profit, and you can ask Ari, the built-in AI assistant, questions about your own numbers in plain words. Ari's allowance depends on your analytics plan.
Is Open Tracked different from Open Track or Open Space Track?
No. Open Tracked is the official name of our server-side tracking platform, and the website is opentracked.io. Many people search for it as Open Track, OpenTrack or Open Space Track. All of them lead to the same product: server-side Google Tag Manager hosting, first-party analytics and a CRM pipeline.
Fix your tracking at the source
Open Tracked hosts your server-side Tag Manager, keeps first-party cookies alive and shows what each ad is really worth.
The Open Tracked team
We build Open Tracked: server-side tracking hosting, analytics and the tools around them, for stores that spend on ads. Questions about this guide, or an idea for the next one?
Comments
Loading comments...
Integrations · 6 min read