How to Add Google Analytics to BigCommerce | OpsBlu Docs

How to Add Google Analytics to BigCommerce

Integrate Google Analytics 4 with BigCommerce using Script Manager, native integration, or Stencil theme customization.

Complete guide to setting up Google Analytics 4 (GA4) on your BigCommerce store for comprehensive ecommerce and user behavior tracking.

Native GA4 Integration

BigCommerce has a built-in Google Analytics connection that handles basic pageview and ecommerce event tracking without code.

  1. Go to Store Setup > Web Analytics > Google Analytics
  2. Toggle Google Analytics 4 to enabled
  3. Paste your GA4 Measurement ID (G-XXXXXXXXXX)
  4. Enable Enhanced Ecommerce to automatically send view_item, add_to_cart, begin_checkout, and purchase events

The native integration injects the gtag.js snippet and pushes ecommerce data from BigCommerce's internal event system. It covers standard shopping funnel events but does not support custom events, consent mode, or server-side tagging.

Script Manager Deployment (GTM)

For full control, deploy Google Tag Manager through BigCommerce Script Manager and configure GA4 as a GTM tag.

  1. Go to Storefront > Script Manager > Create a Script
  2. Set placement to Head and location to All Pages
  3. Paste your GTM container snippet:
<!-- 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>
  1. In GTM, create a GA4 Configuration tag with your Measurement ID firing on All Pages
  2. Create event tags for ecommerce actions triggered by dataLayer pushes

BigCommerce dataLayer for Ecommerce

BigCommerce Stencil themes expose product and cart data that you can push to the dataLayer. Add this to your theme's base.html or via Script Manager:

{{#if page_type '===' 'product'}}
<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'view_item',
    ecommerce: {
      currency: '{{currency_selector.active_currency_code}}',
      value: {{product.price.without_tax.value}},
      items: [{
        item_id: '{{product.sku}}',
        item_name: '{{product.title}}',
        price: {{product.price.without_tax.value}},
        item_brand: '{{product.brand.name}}',
        item_category: '{{product.category.0}}'
      }]
    }
  });
</script>
{{/if}}

For purchase tracking, BigCommerce provides order data on the confirmation page via the %%ORDER_ID%%, %%ORDER_TOTAL%%, and %%ORDER_ITEMS%% placeholders available in Settings > Order Confirmation scripts.

Checkout Tracking Limitations

BigCommerce's optimized one-page checkout runs on a separate subdomain (checkout.mybigcommerce.com or custom checkout domain). This creates two issues:

  1. Cookie domain mismatch -- GA4's _ga cookie set on your storefront domain is not readable on the checkout subdomain unless you configure cross-domain tracking in GA4 (Admin > Data Streams > Configure tag settings > Configure your domains)
  2. Script Manager scripts do not load on checkout -- only the native GA4 integration fires on checkout pages. If you rely solely on GTM, checkout funnel events (begin_checkout, add_shipping_info, add_payment_info) will not fire

To fix checkout tracking with GTM, use the BigCommerce Checkout SDK to listen for step changes and send events server-side, or use the native integration specifically for checkout events alongside GTM for everything else.

Implementation Options Compared

Method Ecommerce Events Custom Events Consent Mode Checkout Tracking
Native Integration Auto No No Yes
GTM via Script Manager Manual dataLayer Yes Yes No (storefront only)
Stencil Theme Code Manual Yes Yes Partial (requires SDK)
Hybrid (Native + GTM) Auto + Custom Yes Partial Yes

Verifying the Integration

After setup, confirm events are flowing:

# Check real-time events in GA4
# GA4 > Reports > Realtime

# Or use the GA4 Measurement Protocol debug endpoint
curl -X POST "https://www.google-analytics.com/debug/mp/collect?measurement_id=G-XXXXXXX&api_secret=YOUR_SECRET" \
  -H "Content-Type: application/json" \
  -d '{"client_id":"test.1234","events":[{"name":"purchase","params":{"transaction_id":"T-12345","value":99.99,"currency":"USD"}}]}'

Use the GA4 DebugView (Admin > DebugView) with the Google Analytics Debugger Chrome extension to see events in real time during testing.

Back to top