By now you should know that Google will be sunsetting Universal Analytics in July 2023, and moving everything to GA4. This means that website owners need to get GA4 set up as soon as possible. For ecommerce websites there’s the added complication of getting ecommerce tracking working in GA4 too. For Shopify stores this process was really simple on Universal Analytics, but is more challenging on GA4.
Read on for an easy process to set up GA4 ecommerce tracking on any Shopify website without needing to install apps or use developers.
To complete this process you’ll need to have both GTM and GA4 already installed on your Shopify store. For help with this, read our guides on How To Install GTM on Shopify and How To Install GA4 on Shopify.
Whilst anyone should be able to follow this guide, it will be easier if you have a basic understanding of how GTM works.
Create Data Layer In Shopify
Our first task is to create a data layer. The data layer is a simple bit of code that contains information about a visitor’s website session. This information can then be passed to other platforms such as GTM.
We’ve created a data layer for you that goes on the Shopify order-complete page. It automatically populates itself with information about the customer's order, such as order value, shipping costs and items purchased.
-
Copy and paste the script below into the ‘checkout’ scripts field in your Shopify admin settings. This can be found by going to ‘Settings > Checkout & Accounts > Additional Scripts’
-
This data layer pushes a ‘purchase’ event to GTM that contains information about the customer's order.
{% if first_time_accessed %}
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
window.dataLayer.push({
'event': 'purchase',
ecommerce: {
'transaction_id': '{{ order.name || order.order_number }}',
'value': {{ total_price | money_without_currency | remove:',' }}, // Includes tax & shipping
'tax': {{ tax_price | money_without_currency | remove:',' }},
'shipping': {{ shipping_price | money_without_currency | remove:',' }},
'currency': '{{ shop.currency }}',
'payment_type': '{{ order.transactions[0].gateway }}', //optional parameter
'items': [
{% for line_item in line_items %}
{
'item_id': '{{ line_item.sku || line_item.product_id }}', //if no SKU exists, use product Id
'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 %}**Create Firing Trigger in GTM
Now we need to set up a trigger that fires when customers complete an order. When the trigger fires, the tag that contains the order information is sent to GA4.
We need to define the conditions on which our purchase trigger fires. The condition for our trigger will be when the purchase event in our data layer is pushed. To set this up:
- Log into GTM, go to the left menu and select ‘Triggers’
- Press the blue ‘New’ button
- Call your trigger ‘GA4 - Purchase’
- Press the ‘edit’ icon in the corner of the ‘Trigger Configuration’ window
- Under ‘Choose trigger type’ select ‘Custom Event’
- In the ‘Event name’ field type ‘purchase’
- Set ‘This trigger fires on’ to ‘Some custom events’
- Set the event conditions to:
- Event - Equals - Purchase
When you’re finished, it should look like this:
Create Data Layer Variables in GTM
Before we set up our tag, we need to create GTM variables to grab information from our data layer. If variables are new to you, think of them as packets that contain small bits of information.
Specific values from the data layer are added into these variables, and these are then sent to GA4.
We need to create variables to extract the following values from your datalayer:
-
Order Revenue
-
Order ID
-
Currency
-
Tax
-
Shipping Costs
-
Items Purchased
-
In GTM, from the left menu click into the ‘Variables’ page
-
In the ‘User-Defined Variables’ box click on the ‘New’ button
-
On this screen you can create a new GTM variable. You need to do the following process for each of the variables listed above. The details for each individual variable is listed below:
Order Revenue
Name: dlv - Thank You Page - Order Revenue
Variable Configuration:
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.value
Order ID
Name: dlv - Thank You Page - Order ID
Variable Configuration:
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.transaction_id
Currency
Name: dlv - Thank You Page - Currency
Variable Configuration:
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.currency
Tax
Name: dlv - Thank You Page - Tax
Variable Configuration:
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.tax
Shipping Costs
Name: dlv - Thank You Page - Shipping
Variable Configuration:
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.shipping
Items Purchased
Name: dlv - Thank You Page - Items
Variable Configuration:
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.items
Each variable should look similar to this when complete:
Create Ecommerce Tags in GTM
To pull ecommerce data into GA4, GTM needs to fire a tag on the order-complete page. This tag contains information about each order and is used to populate the GA4 reports.
- Go back into GTM and from the left menu click into ‘Tags’
- Press the blue ‘New’ button
- Name your tag ‘GA4 Purchase’
- In the ‘Tag Configuration’ box press the edit icon in the top right corner
- Select ‘Google Analytics: GA4 Event’
- In the ‘Configuration Tag’ field, select your ‘GA4 Config’ tag.
- In the ‘Event Name’ field, enter “purchase”
- Expand the ‘Event Parameters’ drop down menu and press ‘Add Row’
Event parameters are bits of information about the order that we want to pull through to GA4 when the tag fires. Think of event parameters as the individual elements of a customer order (such as order value, shipping costs etc). Each of these elements need to be added as an event parameter against the purchase event tag.
To set these up, click the ‘Add Row’ button. Each row has two fields
-
Parameter Name - The official name of the parameter defined by GA4. When a purchase event fires with one of GA4’s defined purchase parameters, GA4 will recognise it. For example, ‘transaction_id’, ‘tax’ and ‘shipping’ are both recognised purchase parameters. A full list of available purchase event parameters can be viewed here.
-
Value - The actual value of the parameter. This will be a dynamic value based upon the customer ordere. Using the example parameters above, these could be:
transaction_id: #245
tax: 2.56
shipping: 3.99
The event parameter values are dynamic bits of information from your data layer. Remember the data layer variables we created earlier? It’s those variables which are used to populate the event parameter values.
Click the icon to the right hand side of the ‘value’ field. This will load a screen where you can select a variable. Find and select the correct variable for this parameter (it will be one of the ones you created earlier that begins with “dlv”).
Do this for the following parameters:
| Parameter Name | Value |
|---|---|
| items | {{dlv - Thank You Page - Items}} |
| value | {{dlv - Thank You Page - Order Revenue}} |
| transaction_id | {{dlv - Thank You Page - Order ID}} |
| tax | {{dlv - Thank You Page - Tax}} |
| shipping | {{dlv - Thank you Page - Shipping}} |
| currency | {{dlv - Thank You Page - Currency}} |
When complete, your screen should look like this:
Debugging
Finally, we need to test that our tag setup is working. To do this:
- Go into GTM and press the ‘Preview’ button in the top right corner
- Follow the steps to activate GTM preview mode on your store
- Once complete it will take you to the front end of your store with a tag assistant window in the corner
The previous tab (titled “Tag Assistant [Connected]) will now report on the tags that fire as you browse your site in the preview tab.
- Open your GA4 account and in the left menu go to ‘Configure > DebugView’
- Go back to the tab that previews your store front end and put through a test transaction
- Finally, go into the GA4 DebugView tab. If the GA4 purchase tag has successfully fired, you’ll see a green purchase event in the timeline. Click into this event and the window on the right will populate with information about the order.
Publish GTM Changes
Once you’re happy that transactions are captured within your GA4 ecommerce tracking, you can go ahead and publish your GTM changes. After publishing, we recommend paying close attention to both your GA4 account and your UA account to make sure that orders are recorded as you would expect.
Thanks for reading our guide - we hope it helped you get set up. If you need any further advice or help with your Shopify store, marketing or SEO, drop us a message and one of our team will get in touch.
If you enjoyed this guide, why not check out our 2023 Ultimate Guide to SEO on Shopify? Written by our team of SEO experts, it's packed full of useful tips and methods to improve your store's search performance, grow traffic and increase sales. Click the button below to have it emailed direct to you.