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

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

To implement a remove from 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 “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:
<form action="/cart.php" method="post" name="form_cart" id="form_cart" class="formCart">

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

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

This code defines a “removeProduct” function that sends a “remove_from_cart” event to GA4, along with the relevant product data. You will need to call this function when the user removes a product from their cart.

  1. Modify the cart template code: Inside the “Cart.html” file, find the following line of code:
<button type="submit" class="button remove-product-button" title="[[lang.remove]]" name="remove">[[lang.remove]]</button>

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

<button type="button" class="button remove-product-button" title="[[lang.remove]]" onclick="removeProduct({ id: '{{product.id}}', name: '{{product.name}}', category: '{{product.category}}', brand: '{{product.brand}}', price: '{{product.price}}', quantity: '{{product.quantity}}' });">{{lang.remove}}</button>

This code creates a new “remove product” button that calls the “removeProduct” function when clicked, passing in the relevant product data.

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

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