You’ve probably heard by now that Google is projected to stop supporting Universal Analytics (GA3) starting in July, 2023. Which means that there’s no time like the present to start transitioning to Google Analytics 4.
Unfortunately, Shopify still doesn’t natively support Google Analytics 4. (The GA Tracking ID field in Store > Preferences is meant for Global Site Tag, which works on Universal Analytics.)
In order to set up your Shopify to collect e-commerce data, you’ll need to do a little bit of extra work. Lucky for you, we’ve done most of it for you – keep reading!
Google Analytics 4 and Shopify
There are two ways to go about using Google Analytics 4 with Shopify:
- Install a free Shopify app. We’ve found that the Hello Google Analytics 4 app does it pretty well. The setup is easy: just install the app and paste the tracking ID.
- Install everything manually. We know that running too many apps can slow a site down. If you’re not a fan of apps, follow the steps below to manually install GA 4 with e-commerce support to your Shopify store.
Tag the site with Google Tag Manager
To take this initial step, you’ll first need to create a Google Tag Manager account and tag the site with the GTM container code.
After you’ve done that, create the following 4 tags:
The ‘GA4 Configuration’ tag needs to fire on every page. Remember to select ‘Pageview - Initialization’ as seen in the image above, to ensure that it works correctly.
The other three tags fire the most basic and required GA4 events:
- View_item - this fires on product pages, each time one of them is visited.
- Purchase - this fires every time someone purchases on the site.
- Add to cart - this sends an ‘add to cart’ event every time a product is added to a user’s shopping cart.
The first two tags are triggered with custom events. What follows is the setup of each tag, in the order that they were presented.
‘View_item’:
‘Purchase’:
‘GA4 Configuration’:
‘Add to cart’:
Each of these tags rely on variables, most of which are data layer variables that we have to push to the data layer using Shopify’s theme editor. Once we’ve pushed them to the data layer, we must then retrieve their values with GTM’s data layer variables.
In order to tell GTM when to fire specific tags, we use triggers. The images below show the three custom triggers that we’ll use to fire the above tags.
‘Add to cart’ trigger setup:
‘Purchase’ trigger setup:
‘View_item’ trigger setup:
As previously stated, our GTM relies on data layer variables to retrieve the data that we push into the data layer:
In order for the GTM to work as expected, we need to do some edits in Shopify’s theme editor. Doing so will push custom events, and the data that we need into the data layer.
Creating a ‘view_item’ event
The ‘view_item’ event is sent whenever a user views the details of any given product. Click the link below for more expanded information: https://developers.google.com/analytics/devguides/collection/ga4/reference/events#view_item
When creating a ‘view_item’ event In Shopify, we need to find theme liquid, and add the following code:
|
<script> window.dataLayer = window.dataLayer || []; {%- if template.name == 'product' %} window.dataLayer.push({ 'event': 'view_item', 'ecommerce': { 'items': [{ 'item_id': '{{ product.id }}', 'item_name': '{{ product.title | remove: "'" | remove: '"' }}', 'item_brand': '{{ product.vendor | remove: "'" | remove: '"' }}', 'item_category': '{{ product.collections[0].title | remove: "'" | remove: '"' }}', 'item_variant': '{{ product.selected_variant.sku }}', 'currency': '{{ shop.currency }}', 'price': '{{ product.price | times: 0.01}}' }] } }); {%- endif -%} </script> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js? id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PDKZNJN');</script> <!-- End Google Tag Manager --> |
We Are Slicedbread.