How to Add Meta Pixel via Google Tag Manager

Installing your Meta Pixel directly in your website’s code works, but it creates a problem: every time you need to add a new event or make a change, you need a developer to touch the code. Google Tag Manager eliminates that dependency. Once GTM is on your site, you can add, modify, and test Meta Pixel tags and events without touching a single line of website code.

This guide covers the complete GTM setup for Meta Pixel — from the base code through purchase event configuration — including how to pull dynamic values like order totals from the data layer and how to verify everything is working before it goes live.

What You Need Before Starting

A Google Tag Manager account with a container already installed on your website
Your Meta Pixel ID — found in Meta Events Manager under your pixel’s settings
Access to your website’s data layer for dynamic values (order total, product ID, etc.)
The Meta Pixel Helper Chrome extension for verification

If GTM is not yet installed on your site, add the GTM container code to your website’s head and body sections first. Every platform — WordPress, Shopify, Squarespace — has documentation for adding the GTM snippet. Once the GTM snippet is live, you can manage all your tags from the GTM interface without further code changes.

Step 1: Create the Meta Pixel Base Tag in GTM

The base pixel tag fires your PageView event on every page and initialises the pixel. Without it, no other pixel events will work.

In GTM, go to Tags → New
Click Tag Configuration and choose Custom HTML
Paste the Meta Pixel base code — replace YOUR_PIXEL_ID with your actual pixel ID:

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

Under Triggering, select All Pages
Name the tag “Meta Pixel — Base (PageView)” and save

Do not include the noscript fallback pixel image in GTM — GTM only executes JavaScript, and the noscript fallback is for users with JavaScript disabled, which represents a negligible portion of web traffic.

Step 2: Set Up Data Layer Variables for Dynamic Values

For events like Purchase to report accurate revenue, GTM needs to read the order total, currency, and product IDs from your page. These values are typically pushed to the data layer by your ecommerce platform.

Create GTM variables for each value you need. In GTM, go to Variables → New → Data Layer Variable and create:

Variable Name	Data Layer Variable Name	Used In
DLV – Order Value	transactionTotal or ecommerce.purchase.actionField.revenue	Purchase event
DLV – Order ID	transactionId or ecommerce.purchase.actionField.id	Purchase event (deduplication)
DLV – Currency	transactionCurrency	Purchase, AddToCart
DLV – Product ID	ecommerce.detail.products.0.id	ViewContent, AddToCart
DLV – Product Price	ecommerce.detail.products.0.price	ViewContent, AddToCart

The exact data layer variable names depend on how your platform pushes data. Use GTM’s Preview mode to inspect your data layer and find the correct variable paths for your specific platform.

Step 3: Add the Purchase Event Tag

The Purchase event is your most important tag. It should fire only on your order confirmation page, after the transaction is confirmed.

Create a new tag: Tags → New → Custom HTML
Paste this code, using your GTM variables for the dynamic values:

<script>
fbq('track', 'Purchase', {
  value: {{DLV - Order Value}},
  currency: {{DLV - Currency}},
  order_id: {{DLV - Order ID}},
  content_type: 'product',
  num_items: 1
});
</script>

Under Triggering, create a new trigger: Page View — Some Pages
Set the condition: Page URL contains “/order-confirmed” (or whatever your thank-you page URL contains)
Name the tag “Meta Pixel — Purchase” and save

The trigger condition must be specific enough that it only fires on the actual order confirmation page, not on the checkout page or any other page. Test this carefully in Preview mode before publishing.

Step 4: Add AddToCart and Other Standard Event Tags

For AddToCart, the trigger should fire on a click — specifically, a click on the “Add to Cart” button. Create a Click trigger in GTM that fires when a specific button element is clicked.

Enable the Click variables in GTM: Variables → Configure → Click Classes, Click ID, Click Text
Create a new trigger: Trigger → New → Click — All Elements
Set the condition: Click Classes contains “add-to-cart” (or your button’s actual class)
Use this trigger for your AddToCart Custom HTML tag

For ViewContent, use a Page View trigger filtered to product page URLs. For InitiateCheckout, use a Page View trigger on your checkout page URL.

Step 5: Preview, Debug, and Publish

Before publishing any GTM changes, use the Preview mode to verify every tag fires correctly.

In GTM, click Preview in the top right corner
Enter your website URL and click Connect
Navigate through your site — GTM Preview panel shows which tags fired on each page
Go to a product page (check ViewContent fires), add to cart (AddToCart fires), proceed to checkout (InitiateCheckout fires), and complete a test order (Purchase fires)
For each fired tag, click into it and verify the variables are populated with the correct values

In parallel, open Meta Pixel Helper in Chrome. It should show each event firing as you navigate — confirming the events are reaching Meta’s servers, not just executing in GTM.

Once Preview mode confirms everything works correctly, click Submit in GTM to publish your container. Your tags are now live.

Verifying in Meta Events Manager

After publishing, go to Meta Events Manager and use the Test Events tool to confirm events are reaching Meta. Navigate through the same flow you tested in GTM Preview — Events Manager will show each event in real time with its parameters.

Check that your Purchase event includes value, currency, and order_id. If any parameter is missing, go back to GTM and verify the corresponding data layer variable is returning the correct value on your confirmation page. Use GTM Preview to inspect the data layer and find the exact variable path your platform uses.

Common GTM Meta Pixel Mistakes

Base tag not on All Pages — if the base tag fires on specific pages only, your pixel will not initialise on other pages and those events will silently fail
Purchase event on checkout instead of confirmation — checkout pages are visited by people who do not complete the order; only fire Purchase on the confirmed order page
Hardcoded values instead of variables — always use data layer variables for order values, never hardcode them; a hardcoded value reports every purchase at the same fixed amount
AddToCart firing on page load — use a Click trigger, not a Page View trigger, for add-to-cart actions; page view triggers inflate event counts artificially
Multiple base pixel tags — if another plugin or theme has also added the pixel base code directly, you will have duplicate PageView events; check with Meta Pixel Helper and remove the duplicate

After your GTM setup is complete, run a full tracking audit using the 5-minute checklist to confirm your pixel is healthy across all pages and that event parameters are correct.

📋 Not sure where to start? Use our Free Tracking Audit Checklist to find out where your setup is losing data.

Book a free tracking audit → We’ll review your setup and tell you exactly what to fix.

Not sure where your tracking is losing you money?