Shopify has its own analytics tracking reports which include an exact amount for revenue income. Getting Shopify GA4 revenue tracking to match up in Google Analytics 4 is a bit more tricky and you’ll never get it to match up perfectly, especially if you use 3rd party checkout solutions for some transactions, for example subscription products. Here’s how to get the rest to be close enough.
There are four steps:
- Insert purchase datalayer event info Shopify Order Status page scripts
- Capture the event in Google Tag Manager (GTM)
- Send the event data from GTM to GA4
- Check the Shopify GA4 event in your Google Analytics account
In this article, it’s assumed have already created a GA4 account for your Shopify store and have a GTM container that is sending data to GA4, with a GTM script inserted in the theme header.
If you need an expert to set up Shopify GA4 via GTM for you, or any other aspect of Shopify, please contact me.
Insert purchase datalayer event info Shopify Order Status page scripts
Click Shopify settings and go to the Checkout tab. In this menu you’ll find a box in which you can insert scripts for the “Order Status page”. This is the page that customers see once a purchase has completed. It’s a dynamically generated page that only exists when requested. However, it can be requested for viewing again later, either by Shopify admin looking at an order, or by a customer wanting to check their order, so we have to be careful to only run scripts from this page once.
So that GTM has the best chance of firing, the GTM scripts should be placed at the top of anything else in this box. If you are using GTM to launch other scripts, it’s unlikely anything else placed in there would be more important.
Here are the GTM scripts and event code to insert:
<!– GTM checkout and datalayer scripts –>
<!– Google Tag Manager –>
<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-XXXXXXX‘);</script>
<!– End Google Tag Manager –>
<!– Google Tag Manager (noscript) for browsers blocking JS –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX“
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
{% if first_time_accessed %}
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘page_type’: ‘purchase’,
‘event’: ‘custompurchase‘, //create a custom purchase event in GTM that includes the datalayer info below
‘transaction_id‘: ‘{{ order.name || order.order_number }}’,
‘totalValue‘: {{ total_price | money_without_currency | remove:’,’ }}, // Includes tax & shipping and gets rid of any 1000s separators
‘subtotalValue‘: {{ subtotal_price | money_without_currency | remove:’,’ }},
‘tax’: {{ tax_price | money_without_currency | remove:’,’ }},
‘shipping‘: {{ shipping_price | money_without_currency | remove:’,’ }},
‘currency‘: ‘{{ shop.currency }}’,
‘payment_type‘: ‘{{ order.transactions[0].gateway }}’, //optional
‘items‘: [
{% for line_item in line_items %}
{
‘item_id’: ‘{{ line_item.sku || line_item.product_id }}’, //if no SKU exists, use product Id as a fallback
‘item_name’: ‘{{ line_item.product.title }}’,
‘discount’: {{ line_item.line_level_total_discount | money_without_currency }},
‘item_variant’: ‘{{ line_item.variant.title }}’,
‘price’: {{ line_item.final_price | money_without_currency }},
‘quantity’: {{ line_item.quantity }}
},
{% endfor %}
]
});
</script>
{% endif %}
<!– END GTM checkout and datalayer scripts –>
Things to note in the code:
- Replace XXXXXXX with your GTM container’s ID in two places.
- The two GTM scripts run every time the page is generated.
- {% if first_time_accessed %} {% endif %} << the code between this only fires the first time, to avoid duplicate purchase and revenue data being sent to GTM if the Order Status page is viewed again later.
- custompurchase is the name of the event that GTM will need to look out for so that it can tag it and send the data on to GA4
- The other red entries are the datalayer info labels sent in the custompurchase event.
Save those changes.
Capture the event in Google Tag Manager (GTM)
Head over to GTM and open the relevant container.
Open the Variables tab and create a new User-Defined Variable to match each of the datalayer info labels sent in the event. We’ll match the variables up later with the event in the tag.
For example here’s the one for “items”. In the settings, make the Data Layer Variable Name “items” and then save the User-Defined Variable with name “items” (top left):
Repeat for the other datalayer info labels. You’ll end up with a few User-Defined variables like this:
Next, let’s make a GTM Trigger so that GTM notices the custom event being sent by Shopify.
Open the Triggers tab and press New >> Trigger Configuration >> Custom Event.
The “Event Name” has to look for the event name specified in Shopify, so look in the code above and you’ll see we called it “custompurchase” – paste that into “Event Name”. Make this trigger fire on “All Custom Events”. Save the new trigger, calling it “Custom Purchase Event”.
Send the event data from GTM to GA4
At this point, it’s assumed that you have already created a GA4 Configuration tag in GTM that you are using to send GTM data to your GA4 account. If not, create that GTM Tag, inserting your GA4 account’s Datastream Measurement ID and save it.
Next, let’s make a GTM Tag so that GTM sends the event data on to GA4.
Open the Tags tab and press New >> Tag Configuration >> Google Analytics GA4 Event.
Select Google Analytics 4 in the Configuration Tag.
For ecommerce, Google Analytics 4 prefers the event name “purchase”
For Event Parameters, GA4 has a defined list of info labels it understands, so you’ll notice that I’ve used “value” instead of totalValue (which is more of a Shopify thing including tax etc). The rest of the Parameter labels match up fine with the GA4 guidelines. Go ahead and create the list of event parameters by giving each one a Parameter Name, and to get the Value, press little brick and select the appropriate Datalayer Variable you created earlier. You’ll end up with a list that looks like this:
Make the Tag fire by selecting the “Custom Purchase Event” trigger you created earlier! Save the Tag as something relevant like “GA4 Purchase Tracking”.
So now, the Shopify event is noticed by the Trigger and the Tag uses the Variables to add the datalayer info sent by Shopify into the new “purchase” event the Tag is sending to GA4.
Publish the changes to the GTM container!
Check the Shopify GA4 event in your Google Analytics account
Now, when your customers make a Shopify purchase, you’ll see the “purchase” event appear in GA4, in Real Time reporting within 60 seconds or so, and in the Engagement >> Events list the next day.
Once you know a purchase has happened, come back to GA4 the next day and navigate to Settings >> Events and you’ll see it in the list. It will already have been marked as a conversion by GA4.
Here’s an example of a close match for GA4 and the Shopify Revenue report:
If you need help with Shopify to set up GA4 via GTM for you, or any other aspect of Shopify, please contact me.
