How to Install Google Tag Manager on Shopify in 2026

A current Shopify GTM setup guide covering storefront installation, Custom Pixels for checkout events, GA4 ecommerce mapping, and verification.

Written by Eduardo Yi withCoAuthor

Featured image

Your Shopify Conversion Tracking Looks Fine. It Probably Isn’t.

Picture this: a merchant opens their GA4 dashboard, sees a healthy stream of purchase events, and assumes everything is working. The GTM snippet is in theme.liquid, it has been there for two years, and nobody has touched it. Conversions are reporting. Life is good.

Except the checkout pages are a completely separate context from the storefront. Scripts injected into theme.liquid do not follow the customer into checkout. They stop at the door. That means `begincheckout`, `addpayment_info`, and purchase events are either missing entirely or coming from a secondary source the merchant did not intentionally configure.

Scripts injected into theme.
Scripts injected into theme.

This is not a fringe edge case. Shopify enforced Checkout Extensibility across all stores, with checkout.liquid deprecated in stages through 2024 and 2025. The old injection method is architecturally broken now, not just discouraged.

This guide covers what actually works in 2026 and how to get there without making the data worse in the process.

GTM Has a Jurisdiction. Checkout Isn’t in It.

Think of your Shopify store as two separate buildings connected by a bridge. GTM lives in the first building, the storefront, where it can do quite a lot. It manages tags, listens for events, populates the dataLayer, and fires scripts on page views, button clicks, form submissions, and custom interactions across your product pages, collection pages, cart, and blog.

The second building is checkout. GTM cannot walk across that bridge.

Shopify runs checkout pages inside a sandboxed environment, meaning the code there is controlled by Shopify, not by anything you put in theme.liquid. Your GTM container simply isn’t loaded. It isn’t being blocked or filtered, it just isn’t there. Scripts from the storefront don’t carry over, so any tags that depend on checkout page views or purchase confirmations will not fire through the standard GTM setup.

This is the core misunderstanding behind most broken Shopify tracking setups. A merchant adds GTM to their theme, assumes checkout is covered, and ends up with inflated or missing conversion data because the purchase event is firing from an unintended source, or not firing at all.

The solution, which this guide covers in detail, is Shopify’s Custom Pixel feature. It runs inside the checkout sandbox with a specific, limited set of permissions. Getting GTM-like behavior out of it requires a different approach than theme injection, but it works. The next sections walk through both parts of that setup.

Get These Things Ready Before You Start

Before touching any code, confirm you have the following:

  • A GTM account with a web container created. The container ID looks like GTM-XXXXXXX. If you don’t have one yet, create it at tagmanager.google.com before continuing.
  • Admin access to your Shopify store. You need to edit theme files and create Custom Pixels, both of which require Admin permissions.
  • Theme edit access. The storefront installation requires editing theme.liquid directly, so you’ll need either Owner access or a staff account with “Themes” permissions enabled.

The plan decision point that matters most here: Custom Pixels, which are required for checkout and purchase tracking, are available on all current Shopify plans. However, if your store is still on a legacy checkout setup or hasn’t migrated to Checkout Extensibility, some steps in Part 2 of this guide will not apply until you complete that migration.

If you’re unsure which checkout setup you’re on, go to Settings > Checkout in your Shopify admin. The presence of a “Customize checkout” button pointing to the visual editor confirms you’re on Checkout Extensibility.

Paste This Into theme.liquid and You’re Halfway There

With your GTM container ID ready, open your Shopify admin and navigate to Online Store > Themes. Click the three-dot menu on your active theme, then select “Edit code.”

  1. In the file list on the left, find and open theme.liquid. This file controls the HTML wrapper for every storefront page.
  2. Locate the opening <head> tag near the top of the file.
  3. Paste the GTM script snippet immediately after <head>:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
  1. Find the opening <body> tag and paste the noscript fallback immediately after it:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  1. Replace both instances of GTM-XXXXXXX with your actual container ID. Save the file.

The cursor lands on the container ID placeholder inside theme.
The cursor lands on the container ID placeholder inside theme.

GTM now loads on every storefront page: product pages, collection pages, the cart, blog posts. That covers a lot of ground. What it does not cover is checkout. The next step closes that gap.

The Checkout Gap Is Real, and Here’s How to Actually Close It

Shopify’s checkout runs in a sandboxed iframe. Think of it as a separate room where GTM is not allowed inside, but the room can slide notes under the door. That “note” mechanism is postMessage, and it’s the backbone of the 2026-correct approach.

The tool for this is Shopify’s Custom Pixel. Go to your Shopify admin, navigate to Settings > Customer events, and click “Add custom pixel.” Give it a name, then paste your pixel code into the editor.

The Shopify Custom Pixel editor lives inside a sandboxed environment: your code runs in its own isolated room and can only reach GTM by sliding a postMessage note under the door.
The Shopify Custom Pixel editor lives inside a sandboxed environment: your code runs in its own isolated room and can only reach GTM by sliding a postMessage note under the door.

Inside that pixel, you subscribe to checkout events using analytics.subscribe(). Here’s the core pattern:

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;
  window.top.postMessage({
    event: 'purchase',
    ecommerce: {
      transaction_id: checkout.order.id,
      value: parseFloat(checkout.totalPrice.amount),
      currency: checkout.currencyCode,
      items: checkout.lineItems.map(item => ({
        item_name: item.title,
        quantity: item.quantity,
        price: parseFloat(item.finalLinePrice.amount)
      }))
    }
  }, '*');
});

You can subscribe to other events the same way: `checkoutstarted`, `paymentinfosubmitted`, `pageviewed`. Each fires inside the sandbox and posts structured data out to the parent window.

On the GTM side, you add a Custom HTML tag that listens for those messages and pushes them into the dataLayer:

window.addEventListener('message', function(event) {
  if (event.data && event.data.event) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(event.data);
  }
});

Two real limitations worth knowing: Custom Pixels cannot access the checkout DOM or set cookies, and they have a size cap around 500KB. They also only capture client-side events, so if you need server-side data for high-volume stores, you’ll need to pair this with webhooks or server-side GTM. Third-party apps like Elevar exist to handle that complexity, but this manual approach works fine for most stores.

The honest tradeoff: this setup takes more configuration than pasting a snippet into theme.liquid, and you’ll want deduplication logic in GTM to avoid firing the same purchase event twice. That’s covered in the next section.

Four ways a clean setup quietly falls apart

Duplicate purchase events. GA4 shows more revenue than Shopify does, and nobody notices for weeks. It happens when Shopify’s native Customer Events fires a purchase to GA4 at the same time your GTM tag does. You’ll see two purchase hits with the same transaction\_id in GA4 DebugView. Pick one source and disable the other. If GTM is your tracking layer, turn off the native GA4 connection under Settings > Customer events.

Overly broad triggers. A trigger set to fire on all page views or DOM Ready can misfire on intermediate checkout steps or when a customer refreshes the confirmation page. Restrict your purchase trigger to the order-status URL and require that ecommerce.transaction\_id exists before the tag fires.

dataLayer naming mismatches. GTM variable names are case-sensitive. If your Custom Pixel posts transactionId but your GTM variable expects transaction\_id, the variable returns undefined and the tag fails silently, firing with blank or zero values. Check that your postMessage payload keys match your GTM Data Layer Variable names exactly.

Third-party apps and theme snippets. Some apps and older theme files include hardcoded gtag('event', 'purchase') calls that survive even after you’ve cleaned up GTM. Search your theme files for gtag and audit your installed apps for duplicate pixel events.

When Shopify Customer Events and GTM both fire a purchase event for the same order, GA4 records two conversions and your revenue figures are inflated from the start.
When Shopify Customer Events and GTM both fire a purchase event for the same order, GA4 records two conversions and your revenue figures are inflated from the start.

Proof your tracking is real (before it lies to you again)

Verification is not optional. Silent failures are the whole problem this article opened with.

  1. Open GTM and click Preview, then connect to your storefront URL and browse product, cart, and add to cart flows.
  2. In Tag Assistant, confirm your GA4 and ad tags actually fired on the expected events, not just Page View.

Tag Assistant Preview shows exactly which tags fired and when, so a missing checkmark here is the earliest possible warning before a silent failure reaches your revenue data.
Tag Assistant Preview shows exactly which tags fired and when, so a missing checkmark here is the earliest possible warning before a silent failure reaches your revenue data.

  1. In DevTools Console, check window.dataLayer and temporarily wrap dataLayer.push to log pushes as you navigate.
  2. For checkout, listen for message events on the parent page, since Shopify custom pixels run sandboxed and send events via postMessage.
  3. Place a real test order and confirm exactly one purchase fires with a stable transaction\_id. Check GA4 DebugView and DevTools Network filtered for collect to catch duplicates.

Two setups, one working store

The old single-snippet approach covered storefront pages and silently missed everything in checkout. The 2026 fix is two installations working together: GTM in theme.liquid for your storefront, and a Custom Pixel for checkout and purchase events.

If you want to go deeper on tag configuration after this, ClickMinded’s Google Tag Manager guide covers container structure and trigger setup, and the Google Analytics setup guide walks through what you need before any tags make sense to fire.

Your next step: open GTM Preview, place a real test order, and confirm exactly one purchase event fires with a stable transaction ID. If you see two, you have a duplicate. Fix that before you trust any conversion data.

References