Skip to content
Home » Blog » How do setup GA4 with a BigCommerce headless store?

How do setup GA4 with a BigCommerce headless store?

To set up GA4 with a BigCommerce headless store, you can use the Google Tag Manager or manually add code to your store’s templates. Here’s how to do it manually:

  1. Create a GA4 property: If you haven’t already, create a new GA4 property in your Google Analytics account.
  2. Obtain the measurement ID: Once you’ve created your GA4 property, obtain the Measurement ID from your GA4 property settings. You will need this ID later when implementing the tracking code.
  3. Edit the templates: In your BigCommerce store, locate the templates that you want to modify. For example, if you want to track a product detail page view, you can modify the “Product.html” template.
  4. Add the GA4 tracking code: Inside the template file, add the following GA4 tracking code after the <head> tag:
<script async src="https://www.googletagmanager.com/gtag/js?id=<MEASUREMENT_ID>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<MEASUREMENT_ID>');
</script>

Replace <MEASUREMENT_ID> with your GA4 property’s Measurement ID obtained in step 2.

  1. Add ecommerce tracking code: To track ecommerce events like product detail views, add to cart, and purchases, you will need to add additional code to your templates. Here’s an example of how to track a product detail view:
<script>
  gtag('event', 'view_item', {
    'items': [
      {
        'item_id': '<PRODUCT_ID>',
        'item_name': '<PRODUCT_NAME>',
        'item_category': '<PRODUCT_CATEGORY>',
        'item_brand': '<PRODUCT_BRAND>',
        'price': '<PRODUCT_PRICE>',
        'currency': '<CURRENCY_CODE>',
        'quantity': '<PRODUCT_QUANTITY>'
      }
    ]
  });
</script>

Replace the placeholders with the actual values for the product being viewed.

  1. Save your changes: Save your changes to the template files.

That’s it! You have now set up GA4 tracking for your BigCommerce headless store. Repeat this process for other templates and ecommerce events that you want to track.