Hey there, I'm Benjamin from Loves Data.
Welcome back!
In this video, I'm going to show you how to track 'Add To Cart' clicks on your Shopify
store into Google Analytics.
To do this, we're going to use Google Analytics 4 (GA4) and Google Tag Manager.
There are a couple of things I need to flag before we get started.
First, we're still waiting for Shopify to provide in-built support for GA4, which is
the latest version of Google Analytics.
So the main limitation at the moment is that you can't track the actual checkout steps
unless you're using Shopify Plus.
I'm guessing that Shopify will start supporting GA4 soon, but until then, we're going to look
at the best possible option for collecting insights.
I'm also going to cover the latest version of the data layer for Google Tag Manager.
This means that the code we're going to use in this video will only work with GA4.
It won't work with Universal Analytics which is the previous version of Google Analytics.
I've decided to cover the latest version because Google has announced that Universal Analytics
will stop working in 2023.
If you haven't heard about Google's announcement, then check out my video covering the news.
Okay, let's start by heading to Shopify...
The first thing we need to do is ensure that Google Tag Manager is added to all of the
pages on our store.
So let's select 'Online Store'...
And then for our theme, let's select 'Actions'...
And then choose 'Edit Code'...
Now I want you to find the 'theme', 'dot', 'liquid' file...
You will need to ensure that Google Tag Manager is added to this file.
To check this, search for 'gtm', 'dot', 'js'...
This will help you identify if it's already installed or not.
Here we can see that Google Tag Manager is already added to the file, so we're good to
go.
If you don't find the Google Tag Manager snippet, then you will need to add it inside the head
tags.
There are a couple of things to consider if you haven't already added Google Tag Manager
to your 'theme', 'dot', 'liquid' file.
If you're already using Shopify's built-in Google Analytics integration, then adding
Google Tag Manager to the file can lead to duplicate page views being sent to Google
Analytics.
And if you've added other tags, like Google's 'gtag', 'dot', 'js' to the 'theme', 'dot',
'liquid' file, then again, you might be sending duplicate page views to Google Analytics.
So that's something you should check.
Since we're going to be using the data layer to send information about the products people
add to their cart to Google Tag Manager, we also need to set up a data layer.
To this we need to add some code just above Google Tag Manager.
Let's head to Google Developers...
Under 'Installation' we can see the code we need to add to set up a data layer on our
store.
So let's copy this...
And now let's head back to Shopify...
Now we can paste the data layer code above the Google Tag Manager snippet...
And let's save the file...
The next thing we need to do is add some code to our add to cart buttons.
So let's head to my website...
This is where I've published the code that you will need to track your add to cart clicks
on your Shopify store.
I've included a link in the description below this video.
This code will send an event to the data layer when someone clicks our add to cart button.
It will pass details to Google Tag Manager which we can then send to Google Analytics.
The code will capture the currency from our store...
The product price...
The product ID... Product title...
And more...
Feel free to customize this as you need.
It uses Shopify's liquid markup.
Okay, let's copy the code...
And let's head back to Shopify...
Now we need to find the 'product', 'dash', 'template', 'dot', 'liquid' file.
This file will be in the 'Sections' folder...
This file is used to create our product pages.
We need to find the button that lets people add items to their cart, so let's search for
'add', 'dash', 'to', 'dash', 'cart'...
Here we can see the button...
We need to add the code we just copied to the end of the button, so just after 'data',
'dash', 'add', 'dash', 'to', 'dash', 'cart'...
So let's add a space...
And paste the code...
Now let's save the file...
And let's head to Google Tag Manager...
And click 'Preview'...
Check that the URL for our Shopify store is correct...
And click 'Connect'...
Tag assistant loads, and now we can select a product...
And click 'Add to Cart'...
Now let's select the Tag Assistant tab...
And select the 'Add To Cart' event on the left...
We can then select the 'Data Layer' tab...
And this shows us the values we will now be able to send to Google Analytics.
Let's head back to Google Tag Manager...
And let's select 'Tags'...
We can see there is already a GA4 configuration tag.
This will automatically send page views to Google Analytics, but we will need to create
an event tag to send the add to cart details.
Before we do this we need to configure a trigger.
So let's start by selecting 'Triggers'...
And let's click 'New'...
Let's name the trigger 'Shopify Add To Cart'...
And let's select 'Trigger Configuration'...
Scroll to the bottom...
And choose 'Custom Event'...
Then we need to enter 'add', 'underscore', 'to', 'underscore', 'cart' as the event name...
This will mean the trigger looks for the add to cart event when it's pushed to the data
layer.
Let's click 'Save'...
Now let's select 'Tags'...
And let's create a new tag...
Let's name the Tag 'Google Analytics GA4 Shopify Add To Cart'...
And let's select 'Tag Configuration'...
Let's select 'GA4 Event' as the tag type...
And we need to select our existing GA4 tag as the 'Configuration Tag'...
Now let's enter 'add', 'underscore', 'to', 'underscore', 'cart' as the event name...
And let's select 'Event Parameters'...
And click 'Add Row'...
Let's enter 'items' as the 'Parameter Name'...
And click the variable icon for the 'Value'...
Now let's click the plus sign on the top right corner to create a new variable...
Let's name the variable 'Shopify Add To Cart'...
And select 'Variable Configuration'...
Now let's choose 'Data Layer Variable'...
And enter 'ecommerce', 'dot', 'items' as the 'Variable Name'...
And click 'Save'...
This will automatically pass the details of the items people add to their cart to the
GA4 event.
Next, we select 'Triggering'...
And we need to select the trigger we created earlier.
So let's choose 'Shopify Add To Cart'...
Now let's save the tag...
And let's click 'Preview'...
Tag Assistant loads...
We can select a product...
And click 'Add To Cart'...
Now let's select the Tag Assistant tab...
And select the 'Add To Cart' event on the left...
We can see the event we just created has been fired...
Let's select this...
Now we can see the values that have been sent to Google Analytics.
Let's head to Google Analytics...
And open 'Debug View'...
We can see the add to cart event has been collected...
And we can select this...
To check the details again...
Now let's head back to Google Tag Manager...
Once you've tested the tag, triggers and variables on your website and you're happy that everything
is working correctly, you can then click 'Submit'...
And this will publish the changes to your live store.
So that's how you can track people adding items to their cart on your Shopify store.
Are you going to track clicks on your add to cart button?
I'd love to know!
Let me know in the comments below.
And if you would like to learn even more about Google Analytics and Google Tag Manager, then
take a moment to check out my courses and other resources.
I've included links in the description below this video.
I've also included a link to download a pre-configured container you can import into Google Tag Manager.
And if you enjoyed this video, please like it, so I know to make more videos like this
one.
I'll see you in the next video!