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.
- Go to Store Setup > Web Analytics > Google Analytics
- Toggle Google Analytics 4 to enabled
- Paste your GA4 Measurement ID (
G-XXXXXXXXXX) - Enable Enhanced Ecommerce to automatically send
view_item,add_to_cart,begin_checkout, andpurchaseevents
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.
- Go to Storefront > Script Manager > Create a Script
- Set placement to Head and location to All Pages
- 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>
- In GTM, create a GA4 Configuration tag with your Measurement ID firing on All Pages
- Create event tags for ecommerce actions triggered by
dataLayerpushes
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:
- Cookie domain mismatch -- GA4's
_gacookie 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) - 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.