How to trigger a GA4 purchase dataLayer event on Shopify

A working code for you to copy and add to your Shopify so you can easily track orders through GTM & GA4

Justus

Justus

owntag Founder

published March 21, 2022

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:

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ABCDEF');</script>

{% if first_time_accessed %}
<script>
(function(){
    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 %}
        items.push({
            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 %}

    window.dataLayer.push({
        event: "purchase",
        ecommerce: {
            transaction_id: "{{ checkout.order_id }}",
            currency: "{{ checkout.currency }}",
            value: total_price,
            shipping: shipping_price,
            tax: tax_price,
            items: items
        }
    });
})();
</script>
{% 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 https://www.googletagmanager.com.
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.

Become a Server Side Tagging Pro with owntag

Take control of your digital data collection with Server Side Tagging and Server Side GTM – easily hosted with owntag.

App screenshot