Triangle Digital
Setup

How to Set Up Google Tag Manager on Shopify (Storefront and Checkout)

By Alessandro Colarossi, Founder, Triangle Digital · Published · 9 min read

Short answer

To set up Google Tag Manager on Shopify: create a GTM web container, paste its head snippet into your theme's theme.liquid, add a data layer that pushes GA4 ecommerce events, then add a custom pixel under Settings → Customer events that loads the same container so checkout events (begin_checkout, add_payment_info, purchase) reach GTM too. Build or import your GA4 and Google Ads tags, test in GTM Preview, then publish.

Why Shopify GTM setup is different from a normal website

On most websites you paste the Google Tag Manager snippet once and it runs on every page. Shopify splits your store into two separate environments, and that is the source of most broken tracking setups.

  • Storefront pages (home, collection, product, cart) render through your theme, so code in theme.liquid runs there.
  • Checkout and order status (thank-you) pages are locked down by Shopify. Your theme code does not run in checkout, and Shopify has been retiring checkout.liquid and the old Additional Scripts box in favor of checkout extensibility.

The supported way to track checkout is Shopify Customer Events: a pixel framework that hands standard events (like checkout_started and checkout_completed) to a sandboxed custom pixel. A complete Shopify Google Tag Manager setup therefore has three parts that must work together:

  1. GTM installed in the theme, for storefront pages.
  2. A data layer that describes products, carts and orders in a consistent format.
  3. A custom pixel that loads GTM inside checkout and pushes the checkout events into the data layer.

Miss one and you get the classic symptoms: add_to_cart reports fine but purchases never show up, or purchases are counted twice. If you are troubleshooting an existing setup, jump to the debugging guide.

Before you start: what you need

  • A Google Tag Manager account with a Web container (the ID looks like GTM-XXXXXXX).
  • A GA4 property and its Measurement ID (looks like G-XXXXXXXXXX).
  • If you run Google Ads: your Conversion ID and Conversion Label for the purchase conversion action.
  • Shopify admin access that allows editing theme code and Customer events.
  • A plan to remove existing tracking first (see the callout below).

Step 1: Create the GTM web container

In Google Tag Manager, create an account and a container with the target platform set to Web. Open Admin → Install Google Tag Manager to see the two install snippets. For Shopify you need the first one (the head snippet) and your container ID.

Step 2: Add the GTM snippet to theme.liquid

In Shopify admin go to Online Store → Themes → ⋯ → Edit code and open layout/theme.liquid. Paste the head snippet as high in the <head> as possible. If you are also adding a data layer snippet (step 3), place the data layer above the GTM snippet so its first pushes exist when GTM loads.

layout/theme.liquid, inside <head>html
<!-- 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 -->

The second (noscript) snippet is optional on Shopify; it only matters for visitors with JavaScript disabled, who will not trigger most ecommerce tags anyway. Replace GTM-XXXXXXX with your own container ID.

Step 3: Build the Shopify data layer

Google Tag Manager is only as good as the data it receives. Shopify does not ship a GTM-ready data layer, so you create one: a small Liquid snippet that pushes GA4-formatted ecommerce events (view_item, view_item_list, view_cart and so on) for storefront pages. The full pattern, with working code, is in our Shopify data layer guide.

A common structure is a separate snippet named data-layer that you include with {% render 'data-layer' %} directly above the GTM snippet in theme.liquid.

Step 4: Add a custom pixel so GTM runs in checkout

Go to Settings → Customer events → Add custom pixel, name it (for example “GTM Checkout”), and paste code that does two things: load your GTM container, and subscribe to Shopify's standard events and push them to dataLayer in GA4 format. Click Save, then Connect. A pixel that is saved but not connected does nothing.

Custom pixels run in an isolated sandbox, so they cannot read your theme's DOM or its window.dataLayer. That is why the pixel loads its own GTM instance. The details, including event mapping and code, are in the Customer Events and custom pixel guide.

Step 5: Create your tags, triggers and variables

With events flowing into the data layer, you build tags in GTM. A minimal ecommerce setup looks like this:

Minimal GTM tag setup for Shopify
TagFires onWhat it does
Google tag (formerly GA4 Configuration)Initialization, all pagesLoads GA4 with your Measurement ID.
GA4 event: view_item, add_to_cart, begin_checkout…Custom Event with the same nameSends the event with items, value and currency from the data layer.
GA4 event: purchaseCustom Event purchaseSends transaction_id, value, currency and items.
Google Ads conversionCustom Event purchaseReports the sale with value and order ID. See the Google Ads guide.
Conversion LinkerAll pagesStores ad click IDs so conversions can be attributed.

Create Data Layer Variables (for example ecommerce.items, ecommerce.value) and, for GA4 event tags, tick Send Ecommerce data with Data Layer as the source. Step-by-step GA4 instructions are in the GA4 ecommerce guide.

Step 6: Test in Preview mode before you publish

Click Preview in GTM and connect Tag Assistant to your store. Walk through a real session: view a product, add to cart, start checkout, and complete a test order. For each step confirm that the expected event appears in the Tag Assistant timeline, that the right tags fired once, and that items, value and currency are populated. Use GA4 DebugView to confirm the events actually arrive. The full workflow is in the debugging guide.

Step 7: Publish and verify

Submit and publish the container with a clear version name. Then confirm data in three places: GA4 Realtime and DebugView, the GA4 Monetization → Ecommerce purchases report (this can take a day to populate), and the conversion status in Google Ads. Compare a day of Shopify orders against GA4 purchases; small gaps from ad blockers and consent are normal, large gaps are not.

Common Shopify GTM mistakes

  • GTM only in theme.liquid. Storefront events work, checkout and purchase do not.
  • Another source still running. The Google & YouTube app, a hardcoded gtag, or a leftover Additional Scripts snippet duplicates your tags.
  • GTM loaded before the data layer. Early pushes are missed or arrive out of order.
  • Pixel saved but not connected in Customer events.
  • purchase sent from both the theme and the pixel. Counts revenue twice.
  • No consent handling. Tags fire regardless of the visitor's choice. See the Consent Mode v2 guide.

Skip the build: what a Shopify tagging pack includes

Everything above is repeatable, which is why we packaged it. A Shopify DIY Tagging Pack ships the data layer snippet, the Customer Events pixel and a ready-to-import GTM container covering the full GA4 ecommerce event set plus Google Ads and Enhanced Conversions, with an install guide and 30 minutes of support. You still own the container; there is no app or monthly fee. Compare approaches in DIY vs agency vs the Google & YouTube app.

Frequently asked questions

Do I need Shopify Plus to use Google Tag Manager?

No. GTM works on every Shopify plan, and Customer events (needed for checkout tracking) are available on all plans. Plus mainly matters for how much of checkout you can customize.

Where do I put the Google Tag Manager code in Shopify?

Put the GTM head snippet in layout/theme.liquid for storefront pages, and load the same container inside a custom pixel (Settings → Customer events) for checkout and thank-you pages.

Can I add GTM directly to the Shopify checkout?

Not by editing checkout code. Shopify's supported route is a custom pixel under Customer events, which runs sandboxed and receives checkout events such as checkout_started and checkout_completed.

Why does GTM show add_to_cart but no purchase events?

Usually GTM is only installed in theme.liquid, which does not run on checkout or the thank-you page. Add a connected custom pixel that loads GTM and pushes checkout_completed as a purchase event.

Is the Google & YouTube app enough instead of GTM?

It can be for very simple Google-only setups, but you get less control, fewer platforms and harder debugging. See the comparison.

Skip the build

Get a ready-to-import Shopify Google Tag Manager container

Shopify DIY Tagging Packs ship a tested GTM container, the Shopify data layer snippet, the Customer Events pixel and a step-by-step install guide. Own the container, no monthly fee, 30 minutes of setup support included.