Hey there Measure geeks Julian
here, back with another video. In this video, we are going to do
a little bit of an update on how to install Google Tag Manager on our
demo shop of Shopify right here. Now to get started, you obviously
need to Google Tag Manager container. I have one already here. It's completely empty, but
then you also need to have access to your Shopify store and you
need to have the rights to actually go in and edit your theme files. So make sure that you are able to do so. I'm an admin on this account. So I should be able to edit
our team files as well. Now, the next part would be to actually
look at what we need to install. Inside of Google Tag Manager, you will find two kind of snippets
that you need to install on your page. So we have this first and the second
snippet, you can also find them in the admin section on the install,
Google Tag Manager right here. So here we go. We have our Google Tag Manager code
that we need to place in the head section of the HTML of our page. And then also a body part right here. So let's go ahead and install this. The first part inside of our backend
is to go to online store and then under theme files, we'll go to our current theme
and click on actions and then edit code. Now this will put us into the code editor. Don't be afraid. We just need to do this once
and place our codes right here. So the next part you need to
look for the theme liquid file. So this is, uh, our theme liquefy. This is the base HTML
code that runs our theme. And here we can already start
looking for our first head tag. I'm going to copy this and then paste
it right here under the meter section at the beginning here, but pretty much
on top here with the head section. So we put it in here and then we have
our second code, which I'm going to copy. Okay. And then I'll go back and then
scroll down to find the place where our body actually starts. This is different for every single theme. So you can rely on this number right here,
but just look for this opening body thing. So this is a tag opening,
and then we have here buddy. And right underneath. We want to put in our
Google Tag Manager code. Oh, I already have mine in here
cause I was testing this before. So this is now in the theme and we can
go ahead and save this and this should now be implemented on our theme file. Now we can test this actually
out by going into Google Tag Manager, let's go to workspace
here and then we click on preview. And be aware you should be clicking
on preview only if you have already submitted a version, at least one version. So I have already several
versions or two versions in here. If you don't have a version published
yet, you will get a little notice here that you cannot use the Tag assistant yet. So in that case, um, if, if you are
sure that you don't have any kind of tags and here you can just click
submit, put, um, A version name in here. So for example, initialization version,
and then we publish this and then you are sure to be able to click on this
preview button and just preview button. As we have just seen opens up our
tech assistant here, we need to put in our site URL with the HTP
and, um, the other stuff attached. And then we click on connect. And that should now connect to our page. And we see here that this is
connected and therefore we have installed Google Tag Manager correctly
because it is able to connect. So when we go to Tag assistant, back
to the Tag assistant, we should be able to see here that our first push
that was in the data layer is to our page, uh, demoshop.myshopify.com. So if I go to the next page, for
example, to this catalog page here, we should have another piece of
information in this second tab. So this is now installed correctly
because we know that this is actually showing us this information here. So Google Tag Manager is correctly
installed now on most of the page because there's one last
bit that we need to install. And this is on the thank you page itself. So let's go over back to our backend here. And did next place where we need to
place our tags is under settings. And then you need to go to checkout
and on the checkout you go here. So on the order processing, we
have additional script part, and this is the part that will then be implemented on our order status page. Was this also the other success
page or the thank you page after the user has bought something and here's
where we also need to place our tags. So we can go ahead and copy
this code and put us in here. And then right underneath, let's put
our second code underneath here as well. Then we click on save. And that should also be implemented. So how can we test this? Well, let's go and buy
extra an actual product. And here's where I can also show you,
uh, where our implementation falls short. And unfortunately we can't
do anything about it. So I'm going to add something to cart. Then we're going to view cart. And now instead of a Tag
assistant, we can still see that. We are now on the cart page
and we are going to check out. Now here's where our implementation
falls short because we go to a area of the site that is kind of restricted. So. At this point, Google Tag Manager
won't be able to pick anything up. We also don't get this little debugger
thing down here that we had before, because these pages to checkout pages
are off limits for Google Tag Manager unfortunately. Unless you have a Shopify plus store
where you can edit the checkout files, you will be able to install Google Tag
Manager correctly for any other store that is not on Shopify plus unfortunately
there is no way to install this currently. Okay. Um, but Nonetheless, we want
to continue testing this. So I'm going to put in some test
data here and let's go to shipping. Yup. That seems fine. And I have my bogus shopping vendor
in here, so let's enter some data. And now we actually exit the checkout. So we should be fine and go out of
the checkout and here, Google Tag Manager should be connected again. So here we see, okay. The user is now on the thank you page. So with this implementation of Google
Tag Manager, we should be definitely able to track most of the pages on our
website except of the checkout pages. But then the most important page day
is where we can have Google Tag Manager installed again and input our codes. Cool. So this is really already it. Um, we have installed Google Tag
Manager on a Shopify store, at least on the pages that we can install this. There are always multiple methods of
doing so you could also use a plugin. You could also, um, place this
differently in your theme files, but, uh, this has worked for me so far. And, um, this is how you can now
install Google Tag Manager and work with Google Tag Manager on a Shopify store. Now, if you want to stick around. Here's a little bit of a bonus. Let's install our first tag with
Google Tag Manager, and this will be the new Google Analytics 4 tag. So if you're not familiar with
Google Analytics 4 it has been announced, and it's not the next
version of Google Analytics. And I'm going to set up here a property
on our account, a trust that you'll be able to do yourself this thing when we
actually, when you actually set this up. So let's go here with currency
next, and then we can fill out the information, but we don't have to,
and we can create our property. And then we choose web here because
it's a web store and then our domain. So let me input this correctly as well. And then we can choose
enhance measurement. Now enhance measurement
will actually track certain things for you automatically. Page views, scrolls, outbound
link, click site search, video engagement, file downloads. So we're going to keep this a tick because
this is a really cool information and something we need to get rid of this. Then we can create our stream. Now this will give us, hopefully
our little, URL that we can or tracking ID that we can then
implement with Google Tag Manager. So let's wait for this for a second. and here we go, we get our
upstream details and what we need right here is the measurement ID. So I'm going to copy this over
and yeah, we are going to go ahead and now go into our Tag Manager
again, and we click on new tags. And as a tag configuration, we click
on the tag configuration button. We will choose the Google Analytics
4 configuration, and here we need to simply enter our measurement ID. Now we give this whole thing a name. So this will be our GA 4
it's our configuration tag, and also a page view tag. So I'm going to put page view in
here, we're going to deploy this on all pages, which means simply. If you click here on triggers, we
can choose the all pages trigger. So it will be deployed
really on all pages. All right, let's go into the preview mode. This will reconnect our preview mode. We'll go back to the page automatically
and here we have connected. So on this page we should have already,
when we go here to our demo shop. Our Google Analytics
4 has fired correctly. So we should be able to see
this inside of Analytics. Now, I'm not quite sure if this
will work because sometimes the.. It takes a little bit of time for
Google Analytics 4 to initiate. So if we are dealing here with a
complete new installation, then sometimes it takes a few hours
to really show up these events. Unfortunately, I see nothing
of the sorts right here. I'm going to click around. So we, we are actually
producing some stuff here. But it doesn't seem to react just yet. So unfortunately this is, um,
a two new account that won't react for to our, little. Demo right here. Oh yeah, here we go. Okay.
I just had to reload. So we see here, we have a page view and
we can also see what data was sent over to Google Analytics with this page view. So here we are on this page
right now and yeah, this is the page that we are on right now. So, uh, we can just try this out and
we should see in real time here, uh, that new events come in, but yeah. Takes awhile because Google
Analytics 4 is a special kind of new system that actually Betches hits. So it might take some time for
them to come in, but here we go. We have, now this information, let's
see if you can trigger a scroll as well. So I'm going to go here. We need to scroll to the bottom
in order to, for it to trigger. So maybe we'll get some
new information in here. We can see a scroll as well. It doesn't seem to be, so
maybe you go to a longer page. It's not a pretty much longer. Yeah.
Here we get a scroll as well. So we getting information into our new
Google Analytics 4 instance, as well. And you should be able to then
see this as well on all of the reports that you have right there. Okay. Don't forget if you want to take this
live onto your website, Shopify store, and you can click here, submit, uh,
give it a little description installed GA 4 tag here, and we can publish this
and obviously you can then choose to create more tracking onto your system
with the help of Google Tag Manager. That is now installed
on your Shopify store. Now, if you like this video, please
consider giving us a thumbs up so we can give the algorithm a
good signal to boost this video. And other people will
be able to discover it. Now, my name is Julian till next time.
