About GA4
As you may know, Google Analytics is ending support for its Universal Analytics (UA) next July. It will be replaced by GA4. Currently, Shopify supports UA and that's what you have in your store if I've worked on it. And Shopify is working on building native support for GA4, but they do not have a date for it yet.
But here's the catch, GA4 will not use UA data. So, if you want to see year-over-year metrics in your store next year, you need to add GA4 tracking to your site now. I would say this is important if you use Google Analytics data.
Setup Steps
Here's the steps for adding basic GA4 tracking to your store:
- Open Google Analytics
- Go to Admin (lower left gear icon)
- Under Property, see if GA4 property already exists
- If not, under the desired UA property, select GA4 Setup Assistant
- Click the Get Started button
- Then click the Create Property button
- Then click the Go to your GA4 property button
- Go to Data Streams
- Click the > under View tag instructions
- Click Install manually
- Add the tracking snippet to theme.liquid right under <head>
- Test that tracking is working in GA real-time report (may take a couple of minutes for the first data to show)
- Go to Data Streams > Configure tag settings > Configure your domains and add these domains with the Contains match type:
- URL for the site
- Myshopify.com url for the site
- checkout.shopify.com
- paypal.com
- pay.google.com
- pay.shopify.com
- Any urls for other 3rd party payments like affirm.com
- Add the snippet below in the Shopify admin under Settings > Checkout > Order status page.
Code for Shopify Theme
Code snippet for order confirmation page. Replace STREAMID with your numerical Stream ID in two places.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script type="rocketlazyloadscript" async src="https://www.googletagmanager.com/gtag/js?id=STREAMID"></script>
<script type="rocketlazyloadscript">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'STREAMID');
{% if first_time_accessed %}
gtag("event", "purchase", {
transaction_id: "{{ order.order_number }}",
value: {{ total_price | times: 0.01 }},
tax: {{ tax_price | times: 0.01 }},
shipping: {{ shipping_price | times: 0.01 }},
currency: "{{ order.currency }}",
items: [
{% for line_item in line_items %} {
item_id: "{{ line_item.product_id }}",
item_name: "{{ line_item.title | remove: "'" | remove: '"' }}",
currency: "{{ order.currency }}",
price: {{ line_item.original_price | times: 0.01 }},
quantity: {{ line_item.quantity }}
},
{% endfor %}
]
});
{% endif %}
</script>