Hey there, Benjamin from Loves Data here. In
previous videos, I've covered how to add Google ,Analytics 4 (GA4) to Shopify. I've covered
how to add the dedicated GA4 tag, so gtag.js, ,and how to track people adding items to their
cart. So I thought it was about time I covered ,how you can use Google Tag Manager to send
data to GA4, instead of using the gtag.js code. ,In this video, I'm going to show you how to add
Google Tag Manager to a standard Shopify store. ,And I'm going to show you how
to capture transaction details ,and send them to GA4 by adding a
data layer to your Shopify store. ,I encourage you to watch the entire video
before adding Google Tag Manager to Shopify, ,since there are some important considerations,
especially if you've already added the gtag.js ,code to your store. Okay, let's head
to Google Tag Manager to get started... ,As you can see, I've already logged into
Google Tag Manager and I've opened a container. ,If you're just getting started with Google Tag
Manager, then you will need to create a Google Tag ,Manager account and container first. I've
included a link to my Google Tag Manager tutorials ,in the description below this video to help you
get started. Okay, so the first thing you'll need ,to do is copy your Google Tag Manager container
code. To do this, we click the container ID ,at the top... And let's copy the container
code at the top... I'm not going to use the ,noscript tag today. Most tutorials will ask you
to add this to your Shopify store, but it's almost ,never used. It only lets you fire a pixel if
someone doesn't have javascript enabled on their ,device. It doesn't automatically track people with
JavaScript disabled, so I'm going to skip this, ,but if you're super keen to use it, then feel
free to add it to the bottom of your pages. ,Now that we've copied the container, let's head
to Shopify... We need to select 'Online Store'... ,And check that you're looking at 'Themes'... ,For our theme, let's select
'Actions'... And choose 'Edit Code'... ,Now we need to open the 'theme', 'dot', 'liquid'
file... This file is used to create all of the ,pages on your Shopify store, excluding the
checkout pages which I will talk more about later. ,Now let's paste the Google Tag Manager container
tag as the first thing after the head tag...f ,Next we're going to set up our data layer. To
do this we need to add some extra code above ,the Google Tag Manager container. Let's head to
Google Tag Manager Help to get the code we need... ,Traveling down... We can see the code... This is
used to establish the data layer on our website. ,So let's copy this... And
let's head back to Shopify... ,Now let's paste the data layer code
above the Google Tag Manager code... ,I've also included a link to my blog that
contains all of the code you need in the ,description below this video. So feel free to
get the code there too. Okay, now we can also ,see that I've previously installed GA4 using
the gtag.js code, so I'm going to remove this. ,If we left this tag, then we would be
sending duplicate events to GA4. If you ,haven't previously added the Google Analytics
tag here, then you won't need to do this. ,Now let's save the changes we've made
to the 'theme', 'dot', 'liquid' file... ,The code we've just added will mean that
Google Tag Manager has been added to ,all of the category and product pages on our
Shopify store. We've completed the first step. ,The next thing we need to do is add Google
Tag Manager to the order confirmation page. ,Let's head back to Shopify to do this...
We need to navigate to 'Settings'... ,And then 'Checkout'... Then we need to scroll
down and look for 'Order Status Page'... ,This lets us add tracking code to the order
confirmation page after someone has completed ,their purchase. We can see I've already added
the gtag.js code here, so I'm going to remove ,this first. If you do see any code here, then I
recommend taking a bit of extra time to review ,what's been added. I'm only removing this code
because I'm replacing it with Google Tag Manager, ,so make sure you don't remove anything
by mistake. And if in doubt, I recommend ,copying what's already there and saving a copy
as a backup. Okay, so I'm going to remove this ,code because this is the gtag.js code that I
will be replacing with Google Tag Manager... ,Now I need to get the data layer and Google
Tag Manager container code to add here, ,so let's head to my blog... Scrolling down we can
find the data layer I've created for you... This ,code uses Shopify's liquid markup to dynamically
add the values for each transaction that occurs ,on your website. So the elements in the curly
brackets (or braces) will be automatically ,replaced by values for each transaction on
Shopify. This will include the order number, ,total price, tax, shopping, currency, and
details for the items someone has purchased... ,You will need to modify this to include
your container ID from Google Tag Manager, ,so I will show you where to find that in
a moment. For now, let's copy this code... ,And now let's head back to Shopify... And let's
paste this into the 'Additional Scripts' section ,under 'Order Status Page'... Now remember we need
to modify this code to include our container ID, ,so let's head to Google Tag Manager to get our
container ID... You will find your container ID ,at the top... This is what we clicked to get the
container code previously. So let's copy this... ,And let's head back to Shopify... Now let's
look for 'GTM', 'dash', 'Example' in my code... ,And let's replace this with our container
ID... Now let's save our changes... ,Great! We've now completed the second step!
When adding Google Tag Manager to Shopify like ,we've done, there is one very important thing to
remember. Since we're using the standard version ,of Shopify (and not Shopify Plus) we can't
add Google Tag Manager to the checkout steps. ,Shopify doesn't let us. This means that those
pages won't be tracked. So we need to exclude ,Shopify as a referral in GA4. So let's
head to Google Analytics to do this... ,We're already in the admin area of Google
Analytics... We need to select 'Data Streams'... ,Then select our data stream... Scroll to the
bottom... And select 'More Tagging Settings'... ,Now we need to select 'List Unwanted Referrals'...
And enter 'myshopify', 'dot', 'com'... ,And click 'Save'... ,This will mean that the pages where we can't
add the Google Tag Manager container code ,won't impact our data by showing
up as referrals in our reports. ,Those checkout steps still won't be reported,
but at least we will have more accurate data. ,While we're here, we need to get our
measurement ID for our GA4 property. ,So let's close this... And at the top of the 'Web
Stream Details' page, we can see our 'Measurement ,ID', let's copy this as we will need it in a
moment... The final step is to configure our tag, ,triggers and variables in Google Tag Manager. So
let's head to Google Tag Manager to do this... ,The first thing you'll need in Google
Tag Manager is a GA4 configuration tag. ,This tag is used to send page views to
Google Analytics. So let's add a new tag... ,Let's name the tag 'Google
Analytics GA4 Page View'... ,And let's select 'Tag Configuration'... And
choose 'GA4 Configuration' as the tag type... ,Now let's paste our measurement ID
that we copied from Google Analytics... ,And let's select 'Triggering'... And
choose 'All Pages' as the trigger... ,Now you can do this later, but I'm
going to publish these changes to ,my Shopify store now So I'm going to
click 'Submit'... Name the changes... ,And click 'Publish'... ,I'm going to navigate back to the container...
Now we need to configure the tag, trigger and ,variables for purchases on our Shopify store. I've
created a pre-configured container you can import ,to Google Tag Manager to get setup quickly.
I've included a link in the description below ,this video. Otherwise I've also included
details for the tag, trigger and variables ,you will need to configure in my blog post.
There's also a link to this in the description ,below. I'm going to import the pre-configured
container. So I'm going to select 'Admin'... ,And then 'Import Container'...
Let's choose the file... ,Select the existing workspace... ,And I generally recommend selecting 'Merge' so
that your existing tags, triggers and variables ,are kept... Now I'm going to import the
pre-configured container... Let's select 'Tags'... ,This has imported two tags. A tag
that will send purchase details to GA4 ,and a tag that will send add to cart details. If
you would like to learn about the add to cart tag, ,then I've included a link to my dedicated add to
cart tutorial in the description below this video. ,Now let's select 'Triggers'... We can see
there are two triggers. One for purchases ,and one for add to carts. These triggers will
fire our GA4 tag when people complete a purchase ,(or add an item to their cart).
And let's select 'Variables'... ,We can see there are six user-defined variables
that will get the values from the data layer we ,added to the order confirmation page. The values
of each of these variables will be send to Google ,Analytics. Okay, so now we need to configure
the tags. So let's head back to 'Tags'... We ,can see I already have a GA4 configuration tag.
This will automatically send page views to GA4. ,Now we need to configure the two tags
we imported to use the GA4 configuration ,tag. So let's select the add to cart tag
first... And select 'Tag Configuration'... ,Then we need to select our existing GA4
configuration tag... And then save the tag... ,And now let's select the purchase tag... ,And select 'Tag Configuration'... And select our
GA4 configuration tag again... And save the tag... ,Now let's click 'Preview'
to test our purchase tag... ,We enter the URL of our Shopify store... ,And click 'Connect'... ,Now we can select a product... ,Add the product to our cart... And checkout... ,Then we enter our details... And
click 'Continue To Shipping'... ,Click 'Continue To Payment'...
Enter our payment details... ,And click 'Pay Now'... ,We can now see the confirmation page, so
let's select the 'Tag Assistant' tab... ,We can see the purchase event... That
our GA4 purchase tag has fired... ,And we can see the details from the data layer... ,Let's check the purchase event has come through
to GA4. So let's head to Google Analytics... ,And let's navigate to 'Configure'...
And then 'DebugView'... ,We can see the purchase event has come through... ,And we can select this to
see additional details... ,We've now added Google Tag Manager to our Shopify
store and we're sending transaction details to ,Google Analytics 4. Once you've tested your tags
and you're happy everything is working correctly, ,you will need to publish your
changes in Google Tag Manager. ,Let's head to Google Tag Manager to do this... We
just need to click 'Submit'... Name our version... ,And click 'Publish'... Our purchase tag
has now been added to our Shopify store. ,Remember that since we're using
the standard version of Shopify, ,the Google Tag Manager container
won't be added to the checkout pages. ,This is something to consider for all of the tags
you implement using Google Tag Manager, so take ,some extra care when adding additional tags. Have
you added Google Tag Manager to Shopify? I would ,love to know! Let me know in the comments
below. And if you found this video helpful, ,please like it so I know to make more videos
like this one. I'll see you in the next video!
Congratulation! You bave finally finished reading shopify where is head tag and believe you bave enougb understending shopify where is head tag
Come on and read the rest of the article!