Hey there, I'm Benjamin from Loves Data.
In this video, you will learn how to set up Google Analytics 4 (GA4), including ecommerce
tracking on your Shopify store.
The way you implement Google Analytics on your store will depend on the version of Shopify
you're using.
If you're using Shopify Plus, then you can add Google Analytics to every page, including
your checkout pages.
If you're not using Shopify Plus, then you can add Google Analytics to your store's pages
and order confirmation page.
However, you won't be able to add the GA4 code to the check out pages.
We will talk about this more as we walk-through the steps.
Okay, let's head to Shopify to get started!
Okay, so I'm in my demo Shopify store.
Let's start by adding the Google Analytics tracking code to all of the pages on our store.
This will mean we can understand the products people are viewing and people viewing the
shopping cart.
To do this we are going to add the tracking code to our theme, so let's select 'Online
Store'...
Then we select 'Actions'...
And choose 'Edit Code' from the drop-down...
We're looking for the file called 'theme', 'dot', 'liquid'...
Let's select this file...
Now we need to get the Google Analytics tracking code, so let's head to Google Analytics...
We can see we're in the admin area of Google Analytics.
And since there are only two columns, this tells us we're looking at a GA4 property.
I've already created my GA4 property, but if you're just getting started, then you can
find a link to another one of my videos where I cover setting up GA4 in the description
below this video.
Now we need to select 'Data Streams'...
And then select the data stream we want to use for our Shopify store...
Let's look for 'Tagging Instructions'...
And select 'Global Site Tag'...
This gives us the dedicated gtag.js tracking code we can use to send data to our GA4 property.
So let's copy this...
I'm going to show you how to setup GA4 on a standard Shopify store.
Since we can't track the checkout pages, we're going to configure Google Analytics so that
we don't see those pages reported as referrals.
If you're using Shopify Plus, then you can skip the step I'm about to show you.
To prevent our checkout pages showing up as referrals in GA4, we need to scroll to the
bottom of our data stream...
And select 'More Tagging Settings'...
Now we need to choose 'List Unwanted Referrals'...
And we need to add Shopify to the list of domains we want to exclude.
Let's add a condition...
And let's choose 'Referral Domain Includes'...
And then let's enter 'myshopify', 'dot', 'com'.
This will mean when people checkout and then view the confirmation page, we won't see the
checkout pages show up as a self-referrals in our reports.
This is important to do because it means we can see the correct marketing channels that
are driving sales on our website.
Now let's head back to Shopify...
Okay, we need to page the gtag.js tracking code inside the head tags of the 'theme',
'dot', 'liquid' file...
And then we need to click 'Save'...
If you're using Shopify Plus, then you should also add the gtag.js tracking code to your
'checkout', 'dot', 'liquid' page.
As this will let you track each of the checkout steps through to the confirmation page.
If you're not using Shopify Plus, then we won't be able to report on these pages in
GA4.
So I recommend also implementing Universal Analytics, which is the previous version of
Google Analytics on your store.
By having GA4 and Universal Analytics on your Shopify store, you will be able to take advantage
of both versions, and importantly, see the checkout steps in Universal Analytics.
Now we need to add some additional tracking code to the final confirmation page people
see after they've made a purchase.
We need to do this to track transactions into GA4.
To do this, we select 'Settings'...
And then 'Checkout'...
Then we scroll down to 'Order Processing'...
And look for the option to add additional scripts...
This lets us add extra code that is added to the confirmation page.
I'm going to paste in a modified tracking code that includes the purchase event for
GA4...
This will send the transaction details to GA4, including the total value of the purchase
and the items.
The code includes liquid markup that will automatically include the Shopify transaction
details.
We can see it will automatically include the order number, price, currency, tax, shipping,
and items details...
I've included a link to get the code I've used in the description below this video.
I recommend taking the time to review and test this code to make sure it works correctly
for your store.
You could also modify my code further to include additional details and logic using the liquid
markup provided by Shopify.
And if you're using Shopify Plus, then you could modify this code, since you would have
added it to the 'checkout', 'dot', 'liquid' file.
Now let's save the changes...
Okay, now let's test out the code on my demo Shopify store.
Let's head to the store...
I've already loaded Tag Assistant, so we can preview the events being sent to GA4.
So let's view my demo product...
And add the item to the cart...
We can now select the Tag Assistant tab...
And we can see the pages I viewed have been sent to Google Analytics...
Okay, let's head back to the store...
And let's view the cart...
Let's select 'Checkout'...
Enter some contact details...
And continue to shipping...
I'm going to leave the default selection, and I'm going to continue to payment...
Since this is a demo store, I can enter fake payment details...
And click 'Pay Now'...
We're now on the confirmation page.
The transaction has been completed.
So let's select the Tag Assistant tab again...
We can see the confirmation page has been sent to GA4...
And we can see there is a purchase event... let's select the purchase event...
We can see the transaction details have been sent to GA4...
Now let's head to GA4 to check that the purchase event has come through...
Let's head to the 'Debug View'...
And we can see the purchase event has come through...
We can select this event...
And we can see details for the transaction...
And the product we purchased....
So that's how you can setup GA4 on your Shopify store, and how you can track transactions
into your GA4 reports.
And remember, we've looked at using the gtag.js tracking code because it's the easiest way
to get GA4 up and running on Shopify.
However, you could apply a similar technique to implement GA4 using Google Tag Manager
on your store.
Are you going to use GA4 on your Shopify store?
I would love to know!
Let me know in the comments below.
And if you found this video helpful, then please like it so I know to make more videos
like this one.
See you next time!