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

How do I implement a purchase event in BigCommerce for GA4 e-commerce tracking?

To implement a purchase 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 “Order Thankyou.html” file: In your BigCommerce store, go to “Storefront” > “Script Manager”. Locate the “Order Thankyou.html” file and click on “Edit”.
  2. Add the event code: Inside the “Order Thankyou.html” file, add the following code to track the purchase event:
<script type="text/javascript">
    gtag('event', 'purchase', {
        "transaction_id": "{{order.id}}",
        "affiliation": "{{store.name}}",
        "value": "{{order.total}}",
        "currency": "{{order.currency.code}}",
        "shipping": "{{order.shipping_cost}}",
        "tax": "{{order.tax_total}}",
        "items": [
            {% for product in order.products %}
            {
                "item_id": "{{product.id}}",
                "item_name": "{{product.name}}",
                "item_category": "{{product.category}}",
                "item_brand": "{{product.brand}}",
                "price": "{{product.price}}",
                "currency": "{{order.currency.code}}",
                "quantity": "{{product.quantity}}"
            },
            {% endfor %}
        ]
    });
</script>

This code sends a “purchase” event to GA4, along with the relevant transaction and product data.

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

That’s it! You have now implemented a purchase event in BigCommerce for GA4 ecommerce tracking. When a customer completes a purchase, the transaction data will be sent to GA4 for analysis.