Shopify has some built in features to help you set up tracking on your ecommerce site with Google Analytics. However, it doesn’t currently support GA4 which was released in October 2020 and has since become the default experience in the platform.
Why Use GA4?
GA4 is a big change on the previous Universal Analytics (UA), mainly because Google has changed from using page views and events to making page views into events themselves. Everything in GA4 is an event!
The change to an events-based architecture means that the same property in GA4 can be used on a website or in an app, which wasn’t possible with the UA version where you had to set up multiple properties for your website and your app.
GA4 is also focused on the user. User journeys can be stitched together with events and the user interface contains much more user-centric metrics and dimensions that use AI to predict customer actions and value.
You can read more about GA4 over on Google’s blog.
Setting Up GA4 for Shopify Checkout
I’m going to assume you’ve already set up GA4. If you haven’t, Google has a guide here to help you get set up.
Once GA4 is set up, login to your Shopify store. Once logged in, click go to Settings > Checkout. On this page, scroll down and find a section called Order status page scripts. You can use this section to add any additional tracking scripts or customisations to the checkout pages in Shopify.
You can either add the GA4 code to your Shopify checkout using the Global site tag (gtag.js) or through Google Tag Manager. If you use the gtag.js code, grab that from Google Analytics and paste it into the field in Shopify. If you prefer the Google Tag Manager route, set up your Tag Manager account to use the GA4 tag and paste your GTM container code into the field instead. If you need a guide to setting up GA4 in Tag Manager, Google has a guide here.
Adding GA4 Purchase Tracking to Shopify Checkout
We have provided the code you need for adding the purchase tracking to Shopify here, which you add in the Order status page scripts field after your gtag.js or GTM code you added earlier. If you want to know a bit more about what the code is actually doing, keep on reading!
{% if first_time_accessed %}This first line ensures that the code between this and the closing endif statement at the bottom of the file only runs once. This is because the code in the Order status page scripts field will be fired every time a user visits their order on your website, such as checking the status of their order, for example.
<script>This code and the closing script tag towards the end of the file wrap around all our code because the purchase event is sent to Google Analytics using JavaScript.
/**
* transaction_id
* If checkout.order_id doesn't have a value yet, use checkout.id instead.
*/
{% if checkout.order_id != empty %}
var transaction_id = '{{ checkout.order_id }}';
{% else %}
var transaction_id = '{{ checkout.id }}';
{% endif %}This block of code populates a JavaScript variable called transaction_id with either the Shopify checkout order_id or the id in cases where the order_id hasn’t yet been populated by Shopify. The transaction_id is a unique identifier for the transaction and helps us avoid duplicate events for a purchase.
/**
* transaction_affiliation
* Get the shop name. Used for multiple vendors, but Shopify doesn't
* provide a list of vendors at the order status page.
*/
var transaction_affiliation = '{{ shop.name }}';This block of code populates a JavaScript variable called transaction_affiliation with the Shopify shop name. It’s not required, but is usually associated with a product vendor. Shopify can’t get other vendors on the order status page, so we use the shop name as there might be cases where we have multiple shops using the same Google Analytics account.
/**
* transaction_total
* Get the total price of the transaction, including shipping,
* discounts and taxes.
* Numerical value only and not currency.
*/
var transaction_total = '{{ checkout.total_price | money_without_currency }}';This block of code populates a JavaScript variable called transaction_total with the total cost of the order without the current symbols. This field is required for meaningful reporting of transaction values.
/**
* transaction_shipping
* Get the shipping charge of the transaction.
* Numerical value only and not currency.
*/
var transaction_shipping = '{{ checkout.shipping_price | money_without_currency }}';This block of code populates a JavaScript variable called transaction_shipping with the shipping price of the order. This field isn’t required if you don’t offer shipping on your products.
/**
* transaction_tax
* get the tax amount for the transaction.
* Numerical value only and not currency.
*/
var transaction_tax = '{{ checkout.tax_price | money_without_currency }}';This block of code populates a JavaScript variable called transaction_tax with the tax price of the order. This field isn’t required if you don’t charge tax on your products.
/**
* transaction_currency
* get the currency iso code.
*/
var transaction_currency = '{{ checkout.currency }}';This block of code populates a JavaScript variable called transaction_currency with the 3-letter ISO 4217 currency code of the order. This value is required if you are setting the total price value.
/**
* transactionProducts
* Array of items purchased in the transaction.
*/
var transaction_products = [];
{% for line_item in checkout.line_items %}
var product_name = '{{ line_item.product.title }}';
var product_sku = '{{ line_item.sku }}';
var product_price = '{{ line_item.final_price | money_without_currency }}';
var product_quantity = {{ line_item.quantity }};
var product = {
item_name: product_name,
item_id: product_sku,
price: product_price,
quantity: product_quantity
};
transaction_products.push(product);
{% endfor %}This block is a bit longer and contains the code required for populating all the products in the order into the purchase event, so I will break it down into smaller parts.
var transaction_products = [];Initially we create a new JavaScript variable called transaction_products, which is set to an empty array.
{% for line_item in checkout.line_items %}Then we loop through each of the items in the order.
var product_name = '{{ line_item.product.title }}';
var product_sku = '{{ line_item.sku }}';
var product_price = '{{ line_item.final_price | money_without_currency }}';
var product_quantity = {{ line_item.quantity }};
var product = {
item_name: product_name,
item_id: product_sku,
price: product_price,
quantity: product_quantity
};In this loop, we get the name, sku, price and quantity of each product in the order, and add them to a JavaScript variable called product.
transaction_products.push(product);Finally we add the data in the product variable to the transaction_products array at the beginning.
dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: transaction_id,
affiliation: transaction_affiliation,
value: transaction_total,
shipping: transaction_shipping,
tax: transaction_tax,
currency: transaction_currency,
items: transaction_products
}
});The last block of code is the actual push to Google Analytics. It brings together all the JavaScript variables we have set up previously and sends them in the purchase event to GA4.
Wrapping Up
That’s it! GA4 ecommerce purchase tracking in Shopify. We hope this helps you get up and running with GA4 on your Shopify site. If you need any help with GA4 or want to chat about a digital project, drop us an email at hello@wonderagency.co.uk.
Bonus: Add GA4 to all pages on your site
You can also add GA4 to other pages on your Shopify site by making a quick modification to your theme.
To edit your theme go to Online Store > Themes. Once here click on the Actions dropdown next to your live theme and click Edit Code. From here find theme.liquid under Layout and put your gtag.js or GTM code in the <head> section of the HTML.
Please note that all themes can be coded differently and there is a possibility that the <head> section is not in this file. If this is the case, please contact your theme developer who should be able to help you add this code to your site.
