Skip to content
Home » Blog » How do I implement a add to cart event in BigCommerce for GA4 e-commerce tracking?

How do I implement a add to cart event in BigCommerce for GA4 e-commerce tracking?

To implement an add to cart 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 “AddToCart.html” file: In your BigCommerce store, go to “Storefront” > “Script Manager”. Locate the “AddToCart.html” file and click on “Edit”.
  2. Add the event code: Inside the “AddToCart.html” file, find the following line of code:
<script type="text/javascript" src="{{cdn '/cart.js'}}"></script>

Add the following code below that line to track the add to cart event:

<script type="text/javascript">
    gtag('event', 'add_to_cart', {
        "items": [
            {
                "item_id": "{{product.id}}",
                "item_name": "{{product.name}}",
                "item_category": "{{product.category}}",
                "item_brand": "{{product.brand}}",
                "price": "{{product.price}}",
                "currency": "USD",
                "quantity": {{cart.quantity}}
            }]
    });
</script>

This code uses the “gtag” function to send an “add_to_cart” event to GA4, along with the relevant product and cart data.

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

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