Watch the video guide or continue reading below
Things you need:
-
A GA4 property set up in Google Analytics
-
Access to Shopify Themes and Settings > Checkout
Steps:
Install the Global site tag (gtag.js)
// IF YOU WANT TO INSTALL GA4 ONLY:
The first step requires you to add the Google Analytics 4 gtag.js on Online Store > Preferences > Google Analytics. MAKE SURE to use Tag Manager if possible as it helps with website speed and SEO.
-
Go to Online Store > Preferences > Google Analytics
-
Add the below code code before the </head> tag on theme.liquid or create a new GA4 tag via Google Tag Manager (recommended)
Change the MEASUREMENT-ID-HERE with the correct one!
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT-ID-HERE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-C0CD4RSPYJ');
</script>
// IF YOU WANT TO INSTALL GA4 IN ADDITION TO GA4:
This step requires you to add the Google Analytics 4 gtag.js on the theme.liquid file of the Shopify store. MAKE SURE to use Tag Manager if possible as it helps with website speed and SEO.
-
Go to Online Store > Theme > Customise
-
Add the below code code before the </head> tag on theme.liquid or create a new GA4 tag via Google Tag Manager (recommended)
Change the MEASUREMENT-ID-HERE with the correct one!
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT-ID-HERE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-C0CD4RSPYJ');
</script>
Install the checkout conversion tracking
The second step allow us to record eCommerce data and revenue directly on Google Analytics. Add the GA4 checkout script under Settings > Checkout > Additional scripts.
Change the MEASUREMENT-ID-HERE with the correct one!
<!-- Global site tag (gtag.js) - Google Analytics -->
<script type="rocketlazyloadscript" async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT-ID-HERE"></script>
<script type="rocketlazyloadscript">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'MEASUREMENT-ID-HERE');
{% 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>
Block Shopify checkout as "referral" traffic
Last step! You need to exclude checkout.shopify.com from the domain referrals otherwise you'll have partial incorrect data.
To do this go to
-
Google Analytics > Settings
-
Property settings > Data stream
-
Click on the Shopify data stream
-
Scroll down to More Tagging Settings
-
Go to List unwanted referrals and configure as per below
You're done! Check the data in the upcoming days to make sure it's collecting all data (including ecommerce)
