March 21, 2022

How to trigger a GA4 purchase dataLayer event on Shopify

by Justus

To properly evaluate the online marketing activities for your Shopify store, you need web analytics data for the orders that users place in your store.
If you use Google Tag Manager and GA4 for your data collection, that will require need a purchase event in your dataLayer whenever a customer purchases something.

A screenshot of the purchase event in the dataLayer

Here’s how to do just that, inspired by this article from analyzify. Unfortunately their code didn’t work for me, maybe Shopify had changed the structure of their Liquid data a bit.

Go to Shopify’s Settings page by clicking the “Settings” link in the lower lefthand corner:

A screenshot of the link to Shopify's Settings

Click the “Checkout” link in the lefthand navigation:

A screenshot of the link to the Checkout settings

Find the textarea labelled “Order status page scripts”.
Paste the following code:

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

{% if first_time_accessed %}
    window.dataLayer = window.dataLayer || [];

    // Totals
    var shipping_price = '{{shipping_price | money_without_currency }}';
    shipping_price = shipping_price.replace(",", ".");

    var total_price = '{{total_price | money_without_currency }}';
    total_price = total_price.replace(",", ".");
    var tax_price = '{{tax_price | money_without_currency }}';
    tax_price = tax_price.replace(",", ".");

    var items = [];

    {% for line_item in checkout.line_items %}
            item_id: '{{ line_item.sku }}',
            item_name: '{{ line_item.title | remove: "'" | remove: '"'}}',
            price: {{ line_item.final_price | times: 0.01 }},
            quantity: {{ line_item.quantity }}
    {% endfor %}

        event: "purchase",
        ecommerce: {
            transaction_id: "{{ checkout.order_id }}",
            currency: "{{ checkout.currency }}",
            value: total_price,
            shipping: shipping_price,
            tax: tax_price,
            items: items
{% endif %}

Change the code to apply to your setup:

  1. Insert the ID to your Google Tag Manager web container.
  2. (optional) Insert your tracking domain if you are using a Server Side Google Tag Manager setup. If not, keep it as
A screenshot of the GTM script

Save the changes and do some test orders to see if your GTM container is loaded and the purchase event is triggered.

You can then configure your GTM to use the dataLayer event and forward it to your desired 3rd party. Feel free to check out Simo Ahava’s article to learn more about how to send the purchase event to Google Analytics 4.

Did this article help you?

Then follow me on twitter
so you won't miss new articles here and for Web Analytics and Marketing technology updates in general :)