The second round of our Google Tag Manager for beginners series is all about installing GTM correctly on your website.
There are numerous systems and technologies to install Google Tag Manager on. Today, we’ll explore the different methods to install GTM flawlessly.
GTM for WordPress: https://wordpress.org/plugins/duracelltomi-google-tag-manager/
GTM for Magento: https://www.magentocommerce.com/magento-connect/google-tag-manager-gtm.html
GTM for AngularJS: https://github.com/angulartics/angulartics-google-tag-manager
GTM for Prestashop: http://addons.prestashop.com/en/20261-google-tag-manager-integration-gtm.html
GTM for Joomla: http://extensions.joomla.org/profile/extension/core-enhancements/coding-a-scripts-integration/google-tag-manager
GTM Beginner course: http://measureschool.com/emailcourse
GTM Ressource Guide: http://measureschool.com/guide
Measure Courses: https://measureschool.com/products
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 lesson, I’m going to show you how you can gets started with Google Tag Manager. We’re gonna install it on your website, and I’m going to give you a little bit more tips on you to place the Google Tag Manager snippet correctly in your HTML code. All and more coming up right after this. Hi, there, and welcome to another video of Measureschool.com, where we teach you the data-driven way of digital marketing. My name is Julian, and in our first lesson, we have talked about the core functionality of Google Tag Manager. I gave you a little bit of an overview. Now in this lesson, we’re gonna discover on how to install Google Tag Manager correctly. There’s actually a lot of things that you can do wrong, so please follow along closely. But before we get started, if you want to test your knowledge after this lesson, then head over to measureschool.com/lesson2 and you can go through a little bit of the quiz and we’ll send you some more resources afterwards. We’ve got lots to cover, so let’s dive in. Today our journey starts by going to your browser and opening up the url, tagmanager.google.com. And it will prompt you with a login screen. Now what you need to input is a Google account address. So if you have an account for example, gmail or YouTube, you’ll be able to use that email address to open up your tag manager account. If you don’t have an account, then you can easily create one by clicking this link. I will skip over this because I have a account that is associated with my Google account. And we simply login, and we’ll get redirected to our Google Tag Manager account. Now chances are if you haven’t worked with Google Tag Manager, you don’t see all these different containers. You’ll be directed to creating a new account. In this step, you’ll be able to create a new account and then set up a container. What does that mean? Well, a container is the actual Google Tag Manager snippet, and you’ll be able to post multiple instances of Google Tag Manager within one account. So the recommended way of setting this up is actually entering your company name here, deciding whether you want to share this data with Google or not, and then entering as the container, your actual website. So later on, you could add multiple containers to that one account. In the last step we choose our container type. In our case, we want to track a website, but it’s also possible to install Google Tag Manager on IOS or Android apps, which is a whole nother process of installation, which we’ll not cover in this tutorial. Let’s click on Web here and create, and have to go through the terms of service and agree to them. Then we will greeted with our actual Google Tag Manager snippet. And this is a marketing tag in essence which you need to install to your website. Now I’ve said before that you’ll be able to do everything through Google Tag Manager, but actually, this is a snippet that you need to install into your HTML code. It’s probably the last tag that you need to install because we will be deploying all our future tags through Google Tag Manager, but this is necessary for Google Tag Manager to work correctly. Now the instructions say that you should place the actual code beneath the opening body tag, so it requires to make an actually code change on your website and implement this into your HTML on your website, so for moresides, you would take the snippet and copy it over to an email to send to your developer in order for him to install it, but make sure to give him the instructions to place this beneath the opening body tag. Another method would be to utilize plugins, and there are a lot of plugins out there that handle the code implementation for your system so if you’re on WordPress, there’s a great plugin by Thomas Geiger, which I’m gonna link up below. There are also plugins to install this for Magento shops, Jumlah, and your lad, JS-driven websites, but I encourage you to just head over to Google and input your CMS or your shop system with the addition of Google Tag Manager installation, and you’re most likely to find instructions for this. Now just to show you how it would work manually, we are gonna head over to our demo shop here and this is a site that runs on WordPress. WordPress is the most used CMS in the world, so I’m gonna demonstrate this based on WordPress, but maybe your installation process will be different, depending on your CMS. So in order to install this, we need to install it on all the pages and what we actually wanna do is input it into the page source so it appears inside of this page source. Since this is a CMS, it works with templates and theme files, so it will be able to place the code one time and will automatically be inputted in all of the pages. So how would we do that? First of all, we need to have access to our back end system, which in WordPress is under the WP Admin section. You’ll go into the Admin section of our site and under Appearance, we have an Editor where we can edit these template files. Then we will search for the right template file. In our case, that would be the header.php back here. And we can look through code and place it in the correct location under the opening body tag which is in our case, right here. Then we update the file, and we should be all set. One warning here, the WordPress website, it is actually a recommended to install this into atheme so the files don’t get overwritten once the theme is updated. I have skipped a step, but it’s a recommended practice within WordPress. Now we can look up, if everything worked fine, we can go back to our demo shop and actually open up the page source and look for our GTM snippet, which is right here under the opening body tag. So this all works fine. Now we wanna make sure that it’s actually deployed on all the pages, so we go through and look into the page source. Another nicer way is to actually go into the preview in debug mode within our Google Tag Manager, so let’s do this really quickly. We load our page here and we see that our debug console opens. You can navigate to the next site and see how a debug console opens as well, and this will be the case for every website that has Google Tag Manager installed correctly. So if the Google Tag Manager console doesn’t open, we haven’t have installed Google Tag Manager correctly on our website. So it seems to be the case that all the websites are tagged correctly. Obviously, this is something that you need to check more extensively in some cases, especially if you’re working with multiple systems on one website, but in our case, everything seems to work fine. We can also check with a browser extension, called the Google Tag Assistant that Google Tag Manager’s installed. Again, this implementation most likely is gonna differ from your implementation on your website if you have a different system running than WordPress. Now let me mention some of the educators. So sometimes you will have very restrictive content management systems or a website builder where you want to install Google Tag Manager, and sometimes you run into the case, for example here, on our Lead Pages account, you can actually edit the HTML, but they have an option to install Tracking Codes. Now in our case, we have two fields here. One is the Head tracking code and the other is End-of-Body checking tag. Unfortunately, there is no beneath the opening body tag box, so we had to adjust our Google Tag Manager tracking. What did we do? We basically looked for the noscript tag and placed that in the actual body of our website and the script tag of Google Tag Manager in the head section of Google Tag Manager. So if you look at our Google Tag Manager code again, which you can find right up here. We have taken the noscript part and placed that in the body section and the script part in the head section, which is a legitimate practice to deploy Google Tag Manager because Google Tag Manager will still be working as expected. You just need to make sure to not place the noscript tag within the head section because it will throw an error in certain browsers. And when we go over, we can also look if this has been the deplugged correctly. Reload this page. And