how to add google tag manager code in shopify

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.

Congratulation! You bave finally finished reading how to add google tag manager code in shopify and believe you bave enougb understending how to add google tag manager code in shopify

Come on and read the rest of the article!