How to trigger a GA4 purchase dataLayer event on Shopify

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.

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:

Click the “Checkout” link in the lefthand navigation:

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.

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.