Install Google Tag Manager on Shopify | Blue Frog Docs

Install Google Tag Manager on Shopify

How to install GTM on Shopify using theme method or app method, including checkout limitations and best practices.

Install Google Tag Manager on Shopify

Google Tag Manager (GTM) is the recommended method for managing analytics and marketing tags on Shopify. This guide covers installation methods, Shopify-specific limitations, and best practices.

Why Use GTM on Shopify?

Benefits:

  • Manage all tags from one interface (GA4, Meta Pixel, etc.)
  • No code changes required after initial installation
  • Better performance (single container vs multiple scripts)
  • Easier for marketers to update without developer help
  • Built-in debugging and preview tools
  • Version control and workspace management

Shopify-Specific Advantages:

  • Works with Shopify's native data layer
  • Access to ecommerce events automatically
  • Easier to manage consent and privacy requirements
  • Can consolidate multiple Shopify app tracking pixels

Installation Methods

Method Difficulty Checkout Access Customization Recommended
Theme Code Medium Plus only Full Yes ✓
Shopify App Easy No Limited Not recommended

Installing GTM directly in your theme provides the most control and flexibility.

Step 1: Create GTM Account and Container

  1. Go to Google Tag Manager

  2. Create Account

    • Account Name: Your company name
    • Country: Your location

  3. Create Container

    • Container Name: Your store domain (e.g., mystore.myshopify.com)
    • Target Platform: Web

  4. Accept Terms of Service

  5. Copy Container Code

    You'll see two code snippets:

    • Head snippet: Goes in <head>
    • Body snippet: Goes in <body>

    Your Container ID will look like: GTM-XXXXXXX

Step 2: Add GTM to theme.liquid

  1. Access Theme Code

    • Go to Online Store → Themes
    • Click Actions → Edit code on your active theme

  2. Open theme.liquid

    • Find Layout folder
    • Click theme.liquid

  3. Add Head Snippet

    Find the <head> tag and add the GTM head snippet immediately after it:

    <head>
  {{ content_for_header }}

  <!-- 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 -->

  <!-- rest of head content -->

    Important: Keep \{\{ content_for_header \}\} at the top of <head>. This is required by Shopify.

  4. Add Body Snippet

    Find the opening <body> tag and add the GTM noscript snippet immediately after it:

    <body>
  <!-- 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) -->

  <!-- rest of body content -->

  5. Replace Container ID

    Replace GTM-XXXXXXX in both snippets with your actual GTM Container ID.

  6. Save theme.liquid

    Click Save button.

Step 3: Add GTM to Checkout (Shopify Plus Only)

If you have Shopify Plus, add GTM to checkout for complete tracking.

  1. Open checkout.liquid

    • In theme code editor
    • Find Layout folder
    • Click checkout.liquid

  2. Add GTM Head Snippet

    Add the same head snippet after <head> tag in checkout.liquid:

    <head>
  {{ content_for_header }}

  <!-- 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 -->

  3. Add GTM Body Snippet

    Add the noscript snippet after <body> tag:

    <body>
  <!-- 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) -->

  4. Save checkout.liquid

Step 4: Verify Installation

  1. Use GTM Preview Mode

    • In GTM, click Preview button
    • Enter your store URL
    • Click Connect
    • Navigate your store and verify GTM Tag Assistant shows events

  2. Check Browser Console

    Open browser developer tools (F12) and run:

    console.log(window.dataLayer);

    You should see an array with Shopify data layer events.

  3. Verify on Multiple Pages

    • Home page
    • Collection page
    • Product page
    • Cart page
    • Checkout (Plus stores only)

Several Shopify apps can install GTM, but they have significant limitations.

Limitations of GTM Apps

  • No checkout access (even on Plus stores)
  • Limited customization of data layer
  • App dependency: If app breaks, tracking breaks
  • Slower updates: App must be updated by developer
  • Additional cost: Most apps charge monthly fees
  • Performance impact: Apps add extra overhead

When to Use an App

Only consider a GTM app if:

  • You cannot access theme code
  • You need a very temporary installation
  • Non-technical team needs quick setup for testing
  • GTM for Shopify by Mason Made
  • Littledata (includes GA4 + GTM)
  • Elevar (advanced setup, higher cost)

Recommendation: Use theme code installation instead for better control and performance.

Checkout Limitations (Non-Plus Stores)

What Non-Plus Stores Cannot Do

Shopify Basic, Shopify, Advanced:

  • ❌ Cannot add GTM to checkout pages
  • ❌ Cannot track begin_checkout during checkout
  • ❌ Cannot track add_shipping_info
  • ❌ Cannot track add_payment_info
  • ✓ CAN track purchase on order confirmation page (see below)

Order Confirmation Tracking (All Stores)

All Shopify stores can track purchases using Additional Scripts on the order status page.

Settings → Checkout → Order status page → Additional scripts:

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'purchase',
    ecommerce: {
      transaction_id: '{{ order.order_number }}',
      affiliation: '{{ shop.name }}',
      value: {{ total_price | money_without_currency }},
      currency: '{{ currency }}',
      tax: {{ tax_price | money_without_currency }},
      shipping: {{ shipping_price | money_without_currency }},
      items: [
        {% for line_item in line_items %}
        {
          item_id: '{{ line_item.sku }}',
          item_name: '{{ line_item.title }}',
          item_brand: '{{ line_item.vendor }}',
          item_category: '{{ line_item.product.type }}',
          item_variant: '{{ line_item.variant_title }}',
          price: {{ line_item.final_price | money_without_currency }},
          quantity: {{ line_item.quantity }}
        }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
    }
  });
</script>

This pushes the purchase event to GTM's data layer, which you can then forward to GA4, Meta Pixel, or other platforms via GTM tags.

Configure GTM for Shopify

Once GTM is installed, configure it to work with Shopify's data layer.

1. Enable Built-in Variables

In GTM:

  • Go to Variables → Configure
  • Enable these built-in variables:
    • Page URL
    • Page Path
    • Referrer
    • Click Element
    • Click Classes
    • Click ID
    • Form Element

2. Create Shopify Data Layer Variables

See Shopify Data Layer Documentation for full variable setup.

Common variables to create:

Page Type:

  • Variable Type: Data Layer Variable
  • Data Layer Variable Name: page.pageType
  • Name: DLV - Page Type

Currency:

  • Variable Type: Data Layer Variable
  • Data Layer Variable Name: ecommerce.currencyCode
  • Name: DLV - Currency

Customer ID:

  • Variable Type: Data Layer Variable
  • Data Layer Variable Name: user.customerId
  • Name: DLV - Customer ID

3. Create Shopify Event Triggers

Product Viewed:

  • Type: Custom Event
  • Event name: product_viewed

Add to Cart:

  • Type: Custom Event
  • Event name: product_added_to_cart

Purchase:

  • Type: Custom Event
  • Event name: purchase

4. Publish Your Container

  • Click Submit in GTM
  • Name the version (e.g., "Initial Shopify Setup")
  • Add description
  • Click Publish

Testing & Debugging

Use GTM Preview Mode

  1. In GTM, click Preview
  2. Enter your Shopify store URL
  3. Click Connect
  4. GTM Tag Assistant opens in new window
  5. Navigate your store and watch events fire in real-time

Debug Checklist

  • ✓ GTM container loads on all pages
  • ✓ Shopify data layer events appear in Tag Assistant
  • ✓ Custom triggers fire correctly
  • ✓ Variables populate with correct data
  • ✓ Tags send data to analytics platforms
  • ✓ No JavaScript errors in console

Common Debug Commands

Check if GTM is loaded:

console.log(window.google_tag_manager);

View data layer:

console.log(window.dataLayer);

Monitor data layer pushes:

const originalPush = window.dataLayer.push;
window.dataLayer.push = function() {
  console.log('Data Layer Push:', arguments[0]);
  originalPush.apply(window.dataLayer, arguments);
};

Performance Optimization

1. Minimize Container Size

  • Remove unused tags, triggers, and variables
  • Avoid adding too many tags to single trigger
  • Use tag sequencing for dependent tags

2. Use Async Loading

GTM loads asynchronously by default. Don't modify this unless absolutely necessary.

3. Monitor Impact

GTM can impact Shopify's Core Web Vitals if not optimized:

4. Consolidate Tags

Instead of installing multiple app scripts:

  • Install only GTM in theme
  • Add all tracking pixels through GTM
  • Remove redundant Shopify apps that add scripts

Privacy & Consent Management

Shopify Customer Privacy API

Integrate GTM with Shopify's privacy API:

<script>
  // Wait for Shopify privacy API
  document.addEventListener('DOMContentLoaded', function() {
    if (window.Shopify && window.Shopify.customerPrivacy) {
      const consent = window.Shopify.customerPrivacy.currentVisitorConsent();

      // Push consent to data layer
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'consent_status',
        analytics_consent: consent.analytics ? 'granted' : 'denied',
        marketing_consent: consent.marketing ? 'granted' : 'denied'
      });
    }
  });

  // Listen for consent changes
  document.addEventListener('visitorConsentCollected', function(event) {
    const consent = event.detail;

    window.dataLayer.push({
      event: 'consent_update',
      analytics_consent: consent.analytics ? 'granted' : 'denied',
      marketing_consent: consent.marketing ? 'granted' : 'denied'
    });
  });
</script>

In GTM, create triggers based on these consent events to control when tags fire.

Troubleshooting

GTM Container Not Loading

Check:

  • Container ID is correct (GTM-XXXXXXX)
  • Script is in both <head> and <body>
  • No JavaScript errors blocking execution
  • Theme liquid file saved properly
  • Browser cache cleared

Shopify Data Layer Empty

Cause: Theme doesn't implement Shopify's native data layer.

Fix: Modern themes (Dawn, OS 2.0) include it by default. Older themes may need manual implementation.

Events Not Firing

See Events Not Firing Troubleshooting for detailed debugging.

Duplicate Events

Cause: Multiple GTM containers or both GTM and native implementations.

Fix:

  • Check for multiple GTM scripts in theme
  • Remove Shopify native integrations (Google channel)
  • Remove any tracking apps that duplicate GTM functionality

Next Steps

For general GTM concepts, see Google Tag Manager Guide.

↑ Back to top
// SYS.FOOTER