BigCommerce GTM Integration | Blue Frog Docs

BigCommerce GTM Integration

Integrate Google Tag Manager with BigCommerce for centralized tag management.

BigCommerce GTM Integration

Complete guide to setting up Google Tag Manager (GTM) on your BigCommerce store for centralized tracking and tag management.

Getting Started

GTM Setup Guide

Step-by-step instructions for installing GTM on BigCommerce, including Stencil theme implementation.

Data Layer Implementation

Implement a comprehensive ecommerce data layer for enhanced tracking capabilities.

Why Use GTM with BigCommerce?

GTM provides powerful tag management benefits:

  • Centralized Management: Control all tracking from one interface
  • No Code Deploys: Add/modify tags without theme changes
  • Version Control: Track changes and roll back if needed
  • Preview Mode: Test tags before publishing
  • Advanced Triggers: Fire tags based on complex conditions

Prerequisites

Before installing GTM on BigCommerce:

  • Access to your BigCommerce store admin panel
  • Google Tag Manager account created
  • GTM Container ID (format: GTM-XXXXXXX)
  • Understanding of your BigCommerce theme (Stencil or Blueprint)
  • FTP/WebDAV access for advanced implementations (optional)

Installation Methods

BigCommerce's Script Manager provides a code-free way to add GTM:

  1. Navigate to Storefront > Script Manager in your BigCommerce admin
  2. Click Create a Script
  3. Configure the script:
    • Name: Google Tag Manager
    • Location: Header or Footer (Header recommended)
    • Select pages: All pages
    • Script category: Essential or Analytics
    • Script type: Script
  4. Paste your GTM container code in the script content area
  5. Click Save

Pros: Easy to implement, no theme modification required Cons: Limited control over exact placement

Method 2: Theme File Modification

For more precise control, add GTM directly to your Stencil theme:

  1. Go to Storefront > My Themes
  2. Click Advanced > Edit Theme Files
  3. Open templates/layout/base.html
  4. Add the GTM head snippet immediately after the opening <head> tag
  5. Add the GTM body snippet immediately after the opening <body> tag
  6. Click Save & Apply File

Pros: Precise placement, better performance Cons: Requires theme editing, may be overwritten on theme updates

Method 3: Custom Template Files

For advanced users with custom Stencil themes:

  1. Create a custom partial: templates/components/common/gtm-head.html
  2. Add GTM head code to the partial
  3. Include the partial in your base template: {{> components/common/gtm-head}}
  4. Repeat for body code if needed
  5. Commit and push theme changes

Container ID Configuration

Finding Your Container ID

  1. Log into Google Tag Manager
  2. Navigate to your container
  3. Copy the Container ID (GTM-XXXXXXX) from the top of the page
  4. Note the environment name if using multiple environments

Container Code Structure

Your GTM implementation requires two code snippets:

Head Code (Critical):

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

Body Code (Fallback):

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

Data Layer Implementation

BigCommerce Data Layer Structure

Implement a comprehensive ecommerce data layer to track customer interactions:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'pageView',
  'pageType': '{{page_type}}',
  'customerId': '{{customer.id}}',
  'customerEmail': '{{customer.email}}',
  'customerGroup': '{{customer.customer_group_name}}'
});
</script>

Product Detail Page Data Layer

dataLayer.push({
  'event': 'productDetail',
  'ecommerce': {
    'detail': {
      'products': [{
        'name': '{{product.name}}',
        'id': '{{product.id}}',
        'price': '{{product.price.without_tax.value}}',
        'brand': '{{product.brand.name}}',
        'category': '{{product.category}}',
        'variant': '{{product.selected_variant}}'
      }]
    }
  }
});

Add to Cart Event

dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': '{{settings.store_currency}}',
    'add': {
      'products': [{
        'name': productName,
        'id': productId,
        'price': productPrice,
        'quantity': quantity
      }]
    }
  }
});

Purchase Event (Thank You Page)

dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': '{{order.id}}',
        'revenue': '{{order.total_inc_tax}}',
        'tax': '{{order.total_tax}}',
        'shipping': '{{order.shipping_cost_inc_tax}}'
      },
      'products': [
        {{#each order.items}}
        {
          'name': '{{name}}',
          'id': '{{product_id}}',
          'price': '{{price.value}}',
          'quantity': {{quantity}}
        }{{#unless @last}},{{/unless}}
        {{/each}}
      ]
    }
  }
});

Common Triggers and Tags

Essential Triggers

Create these triggers in GTM:

  1. All Pages Trigger

    • Type: Page View
    • Fires on: All Pages

  2. Product View Trigger

    • Type: Custom Event
    • Event name: productDetail

  3. Add to Cart Trigger

    • Type: Custom Event
    • Event name: addToCart

  4. Purchase Trigger

    • Type: Custom Event
    • Event name: purchase

  5. Form Submission Trigger

    • Type: Form Submission
    • Fires on: All Forms (or specific form classes)

Essential Tags

Set up these core tags:

  1. Google Analytics 4 Config Tag

    • Tag type: Google Analytics: GA4 Configuration
    • Measurement ID: Your GA4 Measurement ID
    • Trigger: All Pages

  2. Enhanced Ecommerce - Product Detail

    • Tag type: Google Analytics: GA4 Event
    • Event name: view_item
    • Trigger: Product View

  3. Enhanced Ecommerce - Add to Cart

    • Tag type: Google Analytics: GA4 Event
    • Event name: add_to_cart
    • Trigger: Add to Cart

  4. Enhanced Ecommerce - Purchase

    • Tag type: Google Analytics: GA4 Event
    • Event name: purchase
    • Trigger: Purchase

Variables Configuration

Create these variables for reusability:

  1. Data Layer Variables:

    • DL - Product Name
    • DL - Product ID
    • DL - Product Price
    • DL - Order ID
    • DL - Transaction Total

  2. Built-in Variables:

    • Page URL
    • Page Path
    • Referrer
    • Click Element
    • Form Element

  3. Custom JavaScript Variables:

    • Currency code from BigCommerce settings
    • Customer ID (if logged in)
    • Cart value

Preview and Debug Mode

Using GTM Preview Mode

  1. In GTM, click Preview button
  2. Enter your BigCommerce store URL
  3. Click Connect
  4. A new tab opens with debugging panel
  5. Navigate through your store to test tags
  6. Verify tags fire on correct pages/events

Debugging with Tag Assistant

Install Google Tag Assistant Chrome extension:

  1. Navigate to your BigCommerce store
  2. Click Tag Assistant extension
  3. Click Enable and refresh page
  4. Review tag implementation status
  5. Check for errors or warnings

Common Debug Checks

Verify these items during testing:

  • GTM container loads on all pages
  • Data layer populates correctly
  • Product data appears on product pages
  • Cart events fire when items added
  • Purchase tracking fires on order confirmation
  • No duplicate tags firing
  • All required variables populated

Publishing Workflow

Before Publishing

Complete this checklist:

  • Test all tags in Preview mode
  • Verify data layer on key pages
  • Check ecommerce events fire correctly
  • Test purchase tracking with test order
  • Review tag firing sequence
  • Validate data in Google Analytics (if applicable)
  • Check mobile responsiveness
  • Test with multiple browsers

Publishing Steps

  1. Click Submit in GTM
  2. Add version name (e.g., "Initial BigCommerce Setup")
  3. Add version description
  4. Click Publish
  5. Monitor for issues in first 24 hours

Version Control Best Practices

  • Use descriptive version names
  • Document all changes in descriptions
  • Create workspace for major changes
  • Test in preview before publishing
  • Keep backup of previous versions

Troubleshooting Common Issues

GTM Container Not Loading

Symptoms: Tags not firing, GTM not visible in page source

Solutions:

  • Verify container code placed correctly in theme
  • Check for JavaScript errors blocking execution
  • Ensure Script Manager script is enabled
  • Clear BigCommerce cache: Settings > Advanced > Cache
  • Check browser console for errors

Data Layer Not Populating

Symptoms: Variables show as undefined, data missing

Solutions:

  • Verify data layer code syntax
  • Check BigCommerce object availability
  • Use correct Handlebars syntax for theme version
  • Ensure data layer pushes before GTM container
  • Test with dataLayer variable in console

Ecommerce Events Not Firing

Symptoms: Product views, cart events not tracking

Solutions:

  • Verify trigger configuration in GTM
  • Check event names match exactly (case-sensitive)
  • Ensure data layer structure matches GA4 format
  • Test event firing with Preview mode
  • Review trigger conditions and exceptions

Duplicate Tags Firing

Symptoms: Events tracked multiple times

Solutions:

  • Check for multiple GTM containers on page
  • Verify trigger conditions not overlapping
  • Review tag firing priorities
  • Remove redundant implementations
  • Use built-in tag sequencing

Purchase Tracking Issues

Symptoms: Transactions not appearing in analytics

Solutions:

  • Verify order confirmation page loads correctly
  • Check data layer on thank you page
  • Ensure order data available in BigCommerce context
  • Test with Preview mode and real transaction
  • Verify transaction ID is unique
  • Check for redirect issues after checkout

Script Manager Conflicts

Symptoms: GTM loading inconsistently

Solutions:

  • Review Script Manager script order
  • Check for conflicting scripts
  • Verify script category settings
  • Test with minimal script configuration
  • Consider theme file implementation instead

Cross-Domain Tracking Issues

Symptoms: Sessions breaking between domains

Solutions:

Advanced Implementation

Custom Event Tracking

Track specific BigCommerce interactions:

// Quick view opened
dataLayer.push({
  'event': 'quickViewOpen',
  'productId': productId,
  'productName': productName
});

// Newsletter signup
dataLayer.push({
  'event': 'newsletterSignup',
  'signupLocation': 'footer'
});

// Search performed
dataLayer.push({
  'event': 'search',
  'searchTerm': searchQuery,
  'resultsCount': resultsCount
});

User Authentication Tracking

dataLayer.push({
  'event': 'userLogin',
  'userId': '{{customer.id}}',
  'loginMethod': 'email'
});

Cart Abandonment Tracking

// Track cart value for remarketing
dataLayer.push({
  'event': 'cartUpdate',
  'cartValue': totalValue,
  'cartItems': itemCount
});

Performance Optimization

Async Loading

Ensure GTM loads asynchronously to avoid blocking page render:

  • Use async attribute in script tag
  • Minimize container size
  • Limit number of tags
  • Use tag firing priorities

Container Optimization

Best practices for container performance:

  • Remove unused tags and triggers
  • Consolidate duplicate tags
  • Use custom HTML sparingly
  • Minimize custom JavaScript
  • Use built-in tag types when possible
↑ Back to top
// SYS.FOOTER