Google Analytics 4 Setup on BigCommerce

This guide covers three methods for implementing Google Analytics 4 on BigCommerce: the native BigCommerce app, Script Manager, and manual Stencil theme integration.

Prerequisites

Before implementing GA4 on BigCommerce:

1. Create a GA4 Property:

   • Sign in to Google Analytics
   • Create a new GA4 property for your store
   • Note your Measurement ID (format: G-XXXXXXXXXX)

2. Verify Store Access:

   • Admin access to your BigCommerce store
   • Access to Settings > Data Solutions or Script Manager

3. Choose Implementation Method:

   • Native App: Easiest, limited customization
   • Script Manager: Flexible, no theme changes required
   • Stencil Theme: Full control, requires development skills

Method 1: Native BigCommerce Google Analytics App (Recommended for Beginners)

The official BigCommerce Google Analytics app provides automatic setup with basic ecommerce tracking.

Installation Steps

1. Navigate to Apps:

   • Log in to BigCommerce control panel
   • Go to Apps > Marketplace
   • Search for "Google Analytics"

2. Install the App:

   • Click Google Analytics by BigCommerce
   • Click Install
   • Accept permissions

3. Connect Your GA4 Property:

   • Click Connect with Google
   • Authorize BigCommerce to access your Google account
   • Select your GA4 property from the dropdown
   • Copy your Measurement ID (G-XXXXXXXXXX)

4. Configure Settings:

   • Enable Enhanced Ecommerce: Toggle ON
   • Enable Demographics and Interests: Toggle ON (recommended)
   • Anonymize IP Addresses: Toggle ON if required for GDPR
   • Click Save

What's Tracked Automatically

The native app tracks:

• Page views
• Product impressions
• Product clicks
• Add to cart events
• Checkout initiation
• Purchases

Limitations

• Limited customization of tracked events
• Cannot modify data layer structure
• No access to custom dimensions or parameters
• Basic implementation suitable for most standard stores

Method 2: Script Manager Implementation (Recommended for Most Users)

Script Manager offers more flexibility while maintaining ease of management.

Step 1: Add GA4 Base Script

1. Navigate to Script Manager:

   • Go to Storefront > Script Manager
   • Click Create a Script

2. Configure Script Details:

   • Name: Google Analytics 4 - Base Tracking
   • Description: GA4 gtag.js library and configuration
   • Location: Header
   • Script Category: Analytics
   • Script Type: Script

3. Add the Base Script:

<!-- Google Analytics 4 Base Configuration -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX', {
    'send_page_view': true,
    'allow_google_signals': true,
    'allow_ad_personalization_signals': false, // Set to true if using Google Ads
    'cookie_flags': 'SameSite=None;Secure'
  });
</script>

Replace G-XXXXXXXXXX with your actual Measurement ID.

4. Set Placement Rules:

   • All Pages (recommended)
   • Or select specific page types if needed

5. Configure Consent Management (Optional):

   • If using a consent management platform, configure consent mode:

<script>
  // Default consent state
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'wait_for_update': 500
  });

  // Update consent based on user choice
  // This would be triggered by your consent management platform
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

6. Save and Activate:
   • Click Save
   • Toggle the script to Active

Step 2: Verify Installation

1. Use Google Tag Assistant:

   • Install Google Tag Assistant Chrome Extension
   • Visit your BigCommerce store
   • Open Tag Assistant and verify GA4 tag fires on page load

2. Check Real-Time Reports:

   • Go to Google Analytics
   • Navigate to Reports > Realtime
   • Visit your store in a different browser tab
   • Verify your visit appears in real-time report

Step 3: Configure Enhanced Measurement

GA4's Enhanced Measurement automatically tracks common interactions:

1. In Google Analytics, go to Admin > Data Streams
2. Click your web data stream
3. Toggle on recommended events:
   • Scrolls (90% scroll depth)
   • Outbound clicks
   • Site search
   • Video engagement
   • File downloads

Note: Enhanced Measurement provides basic interaction tracking but won't capture BigCommerce-specific ecommerce events. See Ecommerce Tracking guide for enhanced ecommerce implementation.

Method 3: Stencil Theme Integration (Advanced)

For advanced users who need full control over GA4 implementation and access to BigCommerce context data.

Step 1: Prepare Stencil Development Environment

1. Install Stencil CLI:

npm install -g @bigcommerce/stencil-cli

2. Download Your Theme:

   • Go to Storefront > Themes
   • Find your active theme
   • Click ... > Download

3. Initialize Stencil:

stencil init

4. Start Development Server:

stencil start

Step 2: Add GA4 to Base Template

1. Edit base.html:
   • Open templates/layout/base.html
   • Add before closing </head> tag:

{{!-- Google Analytics 4 --}}
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX', {
    'send_page_view': true,
    {{#if customer}}
    'user_id': '{{customer.id}}',
    {{/if}}
    'custom_map': {
      'dimension1': 'customer_group',
      'dimension2': 'customer_type'
    }
  });

  {{#if customer}}
  gtag('set', 'user_properties', {
    'customer_group': '{{customer.customer_group_name}}',
    'customer_type': '{{#if customer.is_guest}}guest{{else}}registered{{/if}}'
  });
  {{/if}}
</script>

Step 3: Access BigCommerce Context Data

Use Stencil's \{\{jsContext\}\} to pass server-side data to GA4:

<script>
  // BigCommerce context available to GA4
  var bcContext = {{{jsContext}}};

  // Send page metadata to GA4
  gtag('event', 'page_view', {
    'page_type': '{{template}}',
    'customer_logged_in': {{#if customer}}true{{else}}false{{/if}},
    {{#if customer}}
    'customer_id': '{{customer.id}}',
    'customer_group': '{{customer.customer_group_name}}',
    {{/if}}
    'currency': bcContext.currency.code || 'USD'
  });
</script>

Step 4: Deploy Theme Changes

1. Bundle Theme:

stencil bundle

2. Upload to BigCommerce:

   • Go to Storefront > Themes
   • Click Upload Theme
   • Select your bundled .zip file
   • Click Upload

3. Apply Theme:

   • Find uploaded theme in My Themes
   • Click Apply or Customize then Publish

BigCommerce-Specific Configuration

Tracking Across Checkout

BigCommerce checkout is hosted separately and requires additional configuration.

For Plus, Pro, and Enterprise Plans:

1. Go to Settings > Checkout
2. Scroll to Checkout Scripts
3. Add GA4 script to Header section:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

For Standard Plans:

• Checkout tracking is limited
• Purchase events can be tracked via conversion tracking scripts
• Consider upgrading plan for full checkout visibility

Handling Akamai CDN

BigCommerce uses Akamai CDN for asset delivery. Ensure GA4 scripts:

• Load from Google's CDN (not self-hosted)
• Use async attribute for non-blocking load
• Include proper cache headers (handled automatically by Script Manager)

Multi-Currency Stores

For stores with multiple currencies:

gtag('config', 'G-XXXXXXXXXX', {
  'currency': bcContext.currency.code, // Uses active currency
  'send_page_view': true
});

Currency will automatically reflect the customer's selected currency in ecommerce events.

Troubleshooting

GA4 Tag Not Firing

1. Check Script Manager:

   • Verify script is set to Active
   • Confirm placement is All Pages or includes current page type
   • Check for JavaScript errors in browser console

2. Clear Cache:

   • Clear BigCommerce cache: Server Settings > Performance
   • Clear browser cache and cookies
   • Test in incognito/private browsing mode

3. Verify Measurement ID:

   • Confirm G-XXXXXXXXXX matches your GA4 property
   • Check for typos or extra spaces

Duplicate Page Views

If seeing double page views:

• Remove old Universal Analytics (ga.js or analytics.js) scripts
• Check for GA4 implementation in both theme AND Script Manager
• Disable native BigCommerce Google Analytics app if using custom implementation

Data Not Appearing in Reports

• Allow 24-48 hours for data to fully process in GA4
• Check Realtime reports for immediate verification
• Verify data stream is active in GA4 Admin settings
• Check that ad blockers aren't preventing tracking in your test browser

Next Steps

• Configure GA4 Event Tracking
• Implement Ecommerce Tracking
• Troubleshoot Tracking Issues

Additional Resources

• BigCommerce Script Manager Documentation
• Stencil Theme Documentation
• GA4 Setup Guide - Google