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

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

To implement a checkout start 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 “Cart.html” file: In your BigCommerce store, go to “Storefront” > “Script Manager”. Locate the “Cart.html” file and click on “Edit”.
  2. Add the event code: Inside the “Cart.html” file, find the following line of code:
<a href="{{urls.checkout}}" class="button primary-button large-button">{{lang.checkout}}</a>

Add the following code below that line to track the checkout start event:

<script type="text/javascript">
    function startCheckout() {
        gtag('event', 'begin_checkout', {
            "items": [
                {% for product in cart.products %}
                {
                    "item_id": "{{product.id}}",
                    "item_name": "{{product.name}}",
                    "item_category": "{{product.category}}",
                    "item_brand": "{{product.brand}}",
                    "price": "{{product.price}}",
                    "currency": "USD",
                    "quantity": "{{product.quantity}}"
                },
                {% endfor %}
            ],
            "value": "{{cart.total}}",
            "currency": "USD"
        });
    }
</script>

This code defines a “startCheckout” function that sends a “begin_checkout” event to GA4, along with the relevant cart data. You will need to call this function when the user clicks the “checkout” button.

  1. Modify the checkout button code: Inside the “Cart.html” file, find the following line of code:
<a href="{{urls.checkout}}" class="button primary-button large-button">{{lang.checkout}}</a>

Replace that line with the following code to call the “startCheckout” function when the user clicks the “checkout” button:

<a href="{{urls.checkout}}" class="button primary-button large-button" onclick="startCheckout();">{{lang.checkout}}</a>

This code modifies the “checkout” button to call the “startCheckout” function when clicked.

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

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