How to Set Up Meta Pixel (with Google Tag Manager)

The Meta Pixel is a small piece of JavaScript from Meta that records what visitors do on your website, such as viewing a product, submitting a lead form or buying, so you can measure Facebook and Instagram ads, build audiences and optimize for sales. To set it up with Google Tag Manager, add the Pixel base code as one tag on all pages, then add a tag for each event, fed by your data layer.

What Is the Meta Pixel?

Meta’s developer guide describes the Pixel as a snippet of JavaScript that loads a small library of functions for tracking ad-driven visitor activity, measuring conversions, building custom audiences and running catalog ads. Its base code also records a PageView every time a page loads.

Everything Meta’s ad system learns about your website comes through the Pixel or its server-side partner, the Conversions API. If the Pixel misses purchases or counts them twice, your reported results and your campaign optimization both suffer. That’s why a clean setup matters more than a fast one.

Should You Install the Pixel With GTM or Directly on the Site?

Either works. Meta recommends placing the base code in the head of every page but notes the Pixel works in most tag managers. GTM is the better choice if you already use it, because every event, trigger and consent rule sits in one place you can test and roll back.

On Shopify, the Facebook & Instagram sales channel already installs the Pixel and can add the Conversions API, as covered in our Conversions API setup guide. Adding a second Pixel through GTM on the same store usually creates duplicate events, so remove one before you add the other.

What You Need Before You Start

• Your Pixel ID from Meta Events Manager (shown as a number; use your real one only in GTM, never in public code samples)
• Publish access to your Google Tag Manager container, already installed on every page (see our GTM setup guide if it isn’t)
• A list of the actions you want to track: purchases, leads, bookings, calls, add to cart
• For ecommerce: a data layer that pushes value, currency, product IDs and order ID
• Your cookie banner set up in GTM, if you serve visitors in regions that require consent
• Any old Pixel code, plugin or app identified so you can remove it

Should You Use the Meta Pixel Tag Template or Custom HTML in GTM?

A tag template is easier to read and harder to break; Custom HTML gives you full control and works with code straight from Meta. Both send the same data if they’re set up correctly.

Tag templates come from GTM’s Community Template Gallery. Google’s help page is clear that gallery templates are made by third-party developers, not Google, and that you should review each template’s permissions before adding it. If you edit a template, it stops receiving updates from its publisher. Custom HTML has no such dependency, but every tag is code that someone has to maintain.

Step 1: Add the Base Code Tag

Template route: in GTM go to Templates, choose Search Gallery in the Tag Templates section, search for the Meta (Facebook) Pixel, check the publisher and permissions, and click Add to workspace. Create a tag from it with your Pixel ID and the PageView event.

Custom HTML route: copy the base code from Events Manager into a Custom HTML tag. It includes your Pixel ID twice, in the init call and in the noscript image URL. Meta advises leaving the PageView call in place.

Tag: Meta - Base Code - Tag
Trigger: Initialization - All Pages

fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', 'PageView');

Firing the base code on an early trigger, and making sure event tags only fire after it (for example with tag sequencing), avoids the common error where an event tag runs before fbq exists.

Step 2: Turn On Advanced Matching (Optional)

Advanced matching sends customer details such as email or phone with the Pixel so Meta can match more events to people. Meta’s guide says you can turn on automatic advanced matching in Events Manager, or pass the details yourself in the init call, where the Pixel hashes them with SHA-256 before sending.

fbq('init', 'XXXXXXXXXXXXXXX', {
em: '{{Customer Email}}',
ph: '{{Customer Phone}}'
});

Meta’s guide warns that manual values must sit in the base code’s init call to count as advanced matching. Email should be lowercase and phone digits only, including country code. Only send these when you have the visitor’s details and their consent where it’s required.

How Do You Send Purchase Value, Currency and Product IDs From the Data Layer?

Push the order details into the data layer on the confirmation page, read them into GTM variables, and pass them to the Purchase event. Meta’s Pixel reference lists currency and value as required for Purchase, and product IDs (contents or content_ids) as required if you run Advantage+ catalog ads.

Step 3: Push Order Details to the Data Layer

dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: 'ORDER-1001',
value: 120.00,
currency: 'USD',
items: [{ item_id: 'SKU-123', quantity: 1 }]
}
});

Most WooCommerce and Shopify tracking setups already push a GA4-style ecommerce object like this, so you can reuse it for Meta instead of building a second one.

Step 4: Create the Purchase Event Tag

Create Data Layer Variables for the value, currency, transaction ID and item IDs, then a tag that fires on the purchase custom event. Pass the order ID as the event ID: that’s what lets Meta match this browser event with the same order sent through the Conversions API.

Tag: Meta - Purchase - Tag
Trigger: Purchase (Custom Event: purchase)
Variables: Purchase Value, Currency, Transaction ID, Item IDs

fbq('track', 'Purchase', {
value: {{Purchase Value}},
currency: '{{Currency}}',
content_ids: {{Item IDs}},
content_type: 'product'
}, { eventID: '{{Transaction ID}}' });

Use the same pattern for AddToCart, InitiateCheckout and ViewContent. Keep value numeric (120.00, not “$120”) and currency as a three-letter code such as USD, or the event’s value can’t be used in reporting and optimization.

How Do You Track Form Submissions, Button Clicks and Leads?

Fire Meta’s Lead (or Schedule, or Contact) standard event when the action actually succeeds, not when the button is clicked. Meta’s standard events include Lead, Schedule, Contact, CompleteRegistration and SubmitApplication, so pick the one that matches the action.

When there’s no thank-you page, ask your developer or form plugin to push a data layer event on success (for example form_submit_success) and trigger the tag on that. Button-click triggers fire even when validation fails, which inflates leads. Our GTM event tracking guide covers click and form triggers in more depth, and if you collect leads inside Facebook itself, see setting up Facebook Lead Ads.

Tag: Meta - Lead - Tag
Trigger: Form Submit Success (Custom Event: form_submit_success)

fbq('track', 'Lead', {}, { eventID: '{{Event ID}}' });

How Do You Make the Meta Pixel Work With Your Cookie Consent Banner?

In GTM, set each Meta tag to require consent before it fires. Google’s Tag Manager help describes this under Advanced Settings > Consent Settings, where “Require additional consent for tag to fire” means the tag only fires if all the consent types you list, such as ad_storage, are granted.

1. Make sure your consent banner’s GTM template runs on the Consent Initialization trigger, which Google says fires before all other tags.
2. On every Meta tag, set Consent Settings to require ad_storage (add ad_user_data too if your banner sets it).
3. Check Consent Overview in GTM to confirm no Meta tag is left as “not set”.
4. Test three paths: no choice made, Accept all, and Reject all.

Unless your tag template says it handles consent itself, assume the Meta tag doesn’t react to Google’s consent signals on its own; this tag-level setting is what stops it from firing early. If tags fire after a visitor accepts, consented visitors are still tracked from that point. For the banner side, see our Consent Mode v2 guide.

How Do You Test the Meta Pixel?

Use GTM Preview to confirm the tags fire, then confirm Meta receives them. Meta’s browser extension, Meta Ads Data Advisor (it replaced Meta Pixel Helper automatically), shows which Pixels load on a page, their status and the events with their parameters. Meta’s get-started guide also suggests checking for new events in Events Manager, waiting a few minutes if they don’t appear.

If purchases still look wrong after these checks, our guide to a Pixel that isn’t tracking purchases goes through the deeper causes.

What Should You Do After the Pixel Works?

Add the Conversions API, so events still reach Meta when the browser blocks the Pixel, and keep the same event IDs on both sides so nothing is counted twice. That step is covered in our Conversions API setup guide.

Then review your setup every time the site changes: a new checkout, form plugin or theme is the most common reason a working Pixel quietly breaks. If you’d like the Pixel and events set up or audited for you, our Meta Ads management runs month-to-month with no lock-in, and our Tracking & Analytics service can handle the tracking alone. Both start with a free audit.