If you have not heard, Google is retiring Google Analytics 3 (GA3) in July 2023. You will be able to view your historical data, but from that point on, no further data will be processed.
Unfortunately, migrating to Google Analytics 4 (GA-4) is not a piece of cake. The systems are very different and you can't migrate your data between the two. If you use Shopify, at time of writing there is no standard integration.
Given that the switch will not happen until 2023 you might feel there is no rush. But if you are an online retailer, year-on-year comparisons are very important as business is often seasonal.
This article outlines the process of configuring Shopify stores to work with GA4 (and is a "work in progress"). It assumes that you already have created a GA4 property and added a Web Data Stream.
The site I am using as an example is a business I operate that sells safety signs and safety products, Captain Safety.
Step 1 - Add the Global Site Tag
Browse to Admin > Data Streams and select your web data stream.
Select the Global Site Tag (I am not using Tag Manager in this example), and copy it.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MB3E3MSEQV');
</script>
Insert the tag into the theme.liquid file in the Layout folder, just above the </head> HTML tag.
Now the tag will appear in the header of every page on your site, apart from the checkout pages and order confirmation page.
Step 2 - Update the Order Confirmation Page
Not being able to add the Global Site Tag to the checkout pages means that we can't gather data from them, which is a bit frustrating.
What we can do is record the transaction by adding the the following code to the Order Status Page using Settings > Checkout and accounts.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
{% if first_time_accessed %}
gtag('event', 'purchase', {
transaction_id: "{% if order_name == blank %} {{checkout.id}}{% else %}{{order_name}}{% endif %}",
value: {{total_price | times: 0.01}},
currency: "{{ checkout.currency }}",
tax: {{tax_price | times: 0.01}},
shipping: {{shipping_price | times: 0.01}},
items: [
{% for line_item in line_items %}
{
item_id: "{% if line_item.sku == blank %}{{line_item.product_id}}{% else %}{{line_item.sku}}{% endif %}",
item_name: "{{line_item.title}}",
item_category: "{{line_item.product.type}}",
quantity: {{line_item.quantity}},
currency: "{{ order.currency }}",
price: {{line_item.original_price | times: 0.01}}
},
{% endfor %}
]
});
{% endif %}
</script>
This code sends an ecommerce purchase event to GA4.
Note that when this page is generated, you can't guarantee the order will have a number, because it sometimes takes the payment gateway time to process the transaction. So, it uses the checkout ID instead.
I hope this makes sense, contact me if you need some help.
More to come soon.