Marketing | Creative | Strategy

Your faithful partner in the discovery of endless digital opportunity.

Take the First Step

Google Analytics 4 E-commerce on Shopify

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:

  1. 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.
  2. 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:

Creating tags in Google Analytics

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:

  1. View_item - this fires on product pages, each time one of them is visited.
  2. Purchase - this fires every time someone purchases on the site. 
  3. 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’: 

View item tag configuration in screenshot

‘Purchase’:

Purchase configuration tag in screenshot

‘GA4 Configuration’: 

Google Analytic 4 configuration tag screenshot

‘Add to cart’: 

Screenshot of add to cart configuration

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:

Add to cart trigger set up in screenshot

‘Purchase’ trigger setup:

Purchase trigger set up screenshot

‘View_item’ trigger setup:

View item trigger set up screenshot

 As previously stated, our GTM relies on data layer variables to retrieve the data that we push into the data layer:

Data layer screenshot

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 -->   

close[x]

Get A Quote

Ready to take the next step? Please fill out the form below. We can't wait to hear from you!

Once submitted, a Slicedbread representative will be back in touch with you as soon as possible.

* Required Fields