In lesson 2 of our Google Tag Manager beginner series, letโs cover how to properly install GTM in your website with the most used CMS, WordPress. Get some tips and learn more about container snippets and where to correctly place them in your HTML codes so youโd be ready for your first tag deployment.
Test your knowledge: https://measureschool.com/lesson2
๐ Learn more from Measureschool: https://measureschool.com/products
๐Looking to kick-start your data journey? Hire us: https://measureschool.com/services/
๐ Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books
๐ท Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear
In this video, I’m going to show you how you can install Google Tag Manager correctly on your website. All and more coming up.
Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And this is our second lesson of our beginner series of Google Tag Manager. If you haven’t seen our first lesson, then head back where we give you a little bit of an overview on Google Tag Manager. Link will be in the description below. In this lesson, I’m going to show you how you can install Google Tag Manager correctly. And like last time, we have a little bit of a quiz prepared for you after you’ve gone through this tutorial. You can test your knowledge at measureschool.com/lesson2. But for now, we got lots to cover. So let’s dive in.
All right, today, our journey starts at tagmanager.google.com. This is the page that you can go to login to your Google Tag Manager account. Now, you will need to have a Google account in order to use Google Tag Manager which means if you already have a Gmail account, or a YouTube account, or any account for the Google services, you most likely will be able to use it here as well. I have a demo account here already set up, you just enter your password. And then you are in, you can access Google Tag Manager. Now, most likely, if you are completely new to the system, you won’t see here anything. You will right away, go to this step. And this is where you start setting up your Google Tag Manager account. Now Google Tag Manager accounts are divided in the account level. And then the container level. You can have multiple accounts. And within that account, you can have multiple containers. Now, Containers are really the snippets or the central code that exists for your website. So best practice is to name your account after your company. So for example, Demo Inc. Choose your country, then you can choose whether you want to share data with Google. And if you click on continue, you go to the container setup. Now, the container is something that is unique for your website where you going to install Google Tag Manager. So I’d recommend to enter your website here,ย just the domain. Really doesn’t matter what you call the container so you can recognize it later on, I would recommend the URL here. And afterward, you can use the container in different instances. We will be installing Google Tag Manager on the web. There’s also a container available for iOS, Android, and AMP pages. But the setup of these is completely different to what we are doing here on the web. Check out our other tutorials if you want to learn more about these three other methods. We’ll go with web right here, and then create our Google Tag Manager account. We need to adhere to some TOS. And if you have read this all you can accept it, click yes here and your new Google Tag Manager account will be initiated.
Once you have gone through the process, we already greeted with our Google Tag Manager snippet. If you don’t see the snippet when you open up your Google Tag Manager account, you can always click on your Google Tag Manager ID up here. And it will open this window up as well. Now, this already gives us some installation instructions. We need to place this part of the code in the head section of our HTML and this part of the code in our body section of the HTML. Now, this will probably be the last snippet or piece of code that you will need to install onto your website and you will need to have some kind of greater access to the website itself in order to install this. There are different methods of installing this code. So let me talk you through the options.
First of all, if you have a developer working on your website who is responsible for the technical infrastructure of the website, I would consult with him in order to install those correctly. Secondly, if you have a CMS running a content management system such as WordPress, Shopify, Magento, Joomla, or any other backend system that actually generates your website, you might be able to install a plugin to install these codes via plugins. There are many out there. I would just encourage you to take your CMS system, for example, WordPress and then Google for Google Tag Manager installation on WordPress. And most likely there will be already a tutorial that will explain the right setup. We also have some tutorials on some of the content management systems here on this channel.
Thirdly, you can also install this manually on your website. If you have access to the code of your website and feel comfortable doing this then I’ll lead you through the steps right now. This is probably what you do developer would go through or what the plugin does in the background. As an example, I have a WordPress installation right here. WordPress is the most used content management system in the world. So if you are running a WordPress blog, you can follow along with these instructions. But if you’re not running WordPress on your website where you want to install Google Tag Manager, these instructions most likely will differ. Now, content management systems are normally governed by a theme which you can control the design of the website itself. Within WordPress, you can log into your back end system, then go to Appearance right here. And under editor, you can see your different themes that you have set up, but also have access to the theme files itself. Now, notice that I have set up a child theme here because I don’t want my changes that are due to the theme files right here effect when a new update comes up to the parent theme, which is storefront. So it’s a best practice to have a child theme if you’re working in WordPress. I have this already set up. I’m going to go over here. And then I have my theme header file that I can click on. This is a PHP file that governs all the different sites that are generated by WordPress on my front end.
And right here, I can see that there’s a head tag that is generating my HTML. And then here’s the closing head tag. And then we have here the opening body tag as well. Now, I can take my codes. First of all, the first code is in the head section itself. I’m going to copy this go over to my theme. And I want to place it as high up as possible into the HTML. This is important because the website itself will get passed from top to bottom by the browser. And we want to fire our tracking codes with Google Tag Manager as soon as possible so the likelihood of them firing is higher. So I’m going to place them directly under the opening head tag here. And then I’m going to grab my second code, go back to the theme files and look for the opening body tag which is right here. And right underneath and gonna paste my Google Tag Manager code. Now, I’m going to update this file and it should be written to my theme files. If this is not something that you can do in your WordPress theme, then you might need to directly access these files via FTP in order to change them. But now I should have Google Tag Manager installed. If I go over to my page, reload the page, I can click right click and then view page source. And I can see the HTML of my website of how its marked up. We have our Google Tag Manager code right at the beginning here. And if we scroll down with all the generated code by the CMS system, we should also find our no script part of Google Tag Manager, which is right under the opening body tag in our HTML as well.
So Google Tag Manager is correctly installed on this website. Now, we can go through all the different sites that we have on our website and look into the HTML, but it would be rather cumbersome. A better way of validating is simply to go into the preview and debug mode. So in Google Tag Manager, we can put our browser and only our browser into a special mode which will pop up a debug console down below. So I’m going to reload. And we see we have this popping up down here, nothing fires at the moment. But this way, we can go through the pages. And just make sure that this pops up down here in order for us to validate that Google Tag Manager is on all pages. And if you don’t see this tag manager console pop up, you most likely haven’t installed Google Tag Manager correctly on your website. So just make sure that this is visible on all the pages if you enter the preview mode inside of Google Tag Manager. So this seems to be working correctly. And we have installed Google Tag Manager and now ready to deploy our first tags. But before we do so, I would encourage you once you have set this up to actually submit the first version in Google Tag Manager in order to initialize GTM correctly.
Click on Publish. This will go live to all the users although we have zero tags triggers and variables installed just yet. So this is how you can install Google Tag Manager on your website. And now we are ready to deploy our first tag with Google Tag Manager.
All right, so there you have it. This is how you can install Google Tag Manager on your website. If you think you understood everything, then maybe test your knowledge at measureschool.com/lesson2 to where we have a little bit of a quiz prepared for you, for you to go through and test your knowledge and see if you understood everything. And if you want to follow along with our Google Tag Manager for beginners series, then why not subscribe to our channel right over there. Because we bring you a new lesson next week. Now, my name is Julian. See you on the next one.