Skip to content
Home » Blog » Implement a Product Detail View Event in Bigcommerce for GA4 Ecommerce Tracking

Implement a Product Detail View Event in Bigcommerce for GA4 Ecommerce Tracking

To implement a product detail view event in BigCommerce for GA4 ecommerce tracking, you can use either Google Tag Manager or manually add code to your store’s templates. Here’s how to do it manually:

  1. Edit the “ProductDetails.html” file: In your BigCommerce store, go to “Storefront” > “Script Manager”. Locate the “ProductDetails.html” file and click on “Edit”.
  2. Add the event code: Inside the “ProductDetails.html” file, find the following line of code:
<script type="text/javascript" src="{{cdn '/product.js'}}"></script>

Add the following code below that line to track the product detail view event:

<script type="text/javascript">
    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": "USD"
            }]
    });
</script>

This code uses the “gtag” function to send a “view_item” event to GA4, along with the relevant product data.

  1. Save your changes: Save your changes to the “ProductDetails.html” file.

That’s it! You have now implemented a product detail view event in BigCommerce for GA4 ecommerce tracking. You can repeat this process for other ecommerce tracking events like add to cart, remove from cart, checkout start, checkout step, and purchase.