Google has made it their business to provide outstanding and free tools for marketing experts or professionals as well as website owners to use at all times. One of those tools is the Google Tag Manager, and in this tag manager tutorial, you will learn all you need to know about the tool and its effect on your online business.
You will also learn how to set up and install Google tag manager and its difference from Google Analytics.
What is Google Tag Manager?
Google Tag Manager is a free and innovative tool that allows users to readily manage and deploy marketing tags – i.e. tracking snippets or snippets of code – on your mobile application or website without necessarily modifying the code.
Information obtained from one data source – such as your website, etc. – can be shared with another source of data, i.e. Google Analytics via Google Tag Manager. This remarkable tool is quite handy for anyone with a lot of tags to manage since all the code is stored only in one place.
One vital benefit of this Manager is that marketers can easily manage the code on their own. The services of developers in this aspect will not be required. That may sound somewhat easy or be a walk in the park, but this is far from the truth. This is why we want to cover how to set up and install a tag manager to help you improve your website.
Is Google Tag Manager Easy to Use?
Google has stated that this Tag Manager helps to make tag management easy, simple, and reliable by allowing webmasters and marketers to deploy tags in one place.
When you read the word ‘simple’ in that sentence, one may be forced to believe it is effortless. But in reality, Google Tag Manager is not all that easy to use, especially if the user has no technical training or knowledge.
This means that the searchers are indicating with their relevant search that they are interested and ready to buy something online, and if you sell those things, you will be in the position to make money.
If you want to know how to set up and install this, you need to, first of all, possess some technical knowledge in order to understand how to set up triggers, tags, and variables. For instance, if you need to drop in Facebook pixels, it is essential that you fully understand how Facebook tracking pixels work.
What about setting up event tracking in Google Tag Manager? The same rule applies; you will need valid knowledge about what ‘events’ are as well as how Google Analytics works. You will also need to know what data you should track with events as well as what the reports actually look like in Google Analytics and how to name your actions, categories, as well as labels.
Although it may be easy to manage multiple tags in Google Tag Manager, it implies that there is a learning curve you need to surmount. And once you do surmount it, Manager becomes pretty slick when it comes to what you can track.
So, how does Google Tag Manager work? First of all, there are 3 significant parts of these, namely:
- Tags: Tracking pixels or snippets of JavaScript
- Triggers: This informs them how or when to fire a tag
- Variables: Additional information Google Tag Manager may require for both the tag and trigger to work.
What Makes Google Tag Manager Different from Google Analytics?
Google Tag is not the same as Google Analytics. The former is a tool that is employed for storing and managing third-party code. In Google Tag Manager, there are no reports or any way to carry out any analysis.
Google Analytics, on the other hand, is used for fundamental analysis and reporting. All conversion tracking filters or goals are generally managed via Analytics. All reporting – which includes custom segments, conversion reports, eCommerce sales, bounce rate, time on page engagement reports, etc. are carried out in Google Analytics.
Once you understand how to set up and install this tag manager then you will have a better website.
Google Tag Manager Tutorial: How to Setup and Install
To get started with how to set up and install this Tag Manager, the first step in this manager tutorial is to create a Google Tag account. Visit the Google Tag Manager website and click on the blue-colored tab labeled ‘Start for free’ which is the main call-to-action on that page.
You will be required to use the same Google account for Tag Manager, just like with any of Google’s products. That implies that if you already own a Gmail (Google Analytics, Google Ads, etc.) account, you will be logged in automatically to Google Tag Manager. But if not, you may have to create a Google account first before proceeding. We will not go into detail about this aspect in this tutorial.
As soon as you are logged in, you will be asked to create a new account as well as a new container. The account works much the same way as your Google Analytics account, which is usually for a business/company/client. A container, however, is generally for an app or a website. One container can contain several tags, triggers, and variables.
If several websites belong to a particular business and they have a similar structure – including their tracking implementation, etc. – you can use one container for multiple sites.
Finding the Google Tag Manager Code
It provides users with precise code and instructions on where to add it to your site. You can find this code in 2 different places:
- By clicking the container ID link which is located next to the ‘Publish’ and ‘Preview’ buttons.
- Or by navigating to Admin > Account > Container > Install Google Tag Manager.
Any of these options will open up instructions on how to set up and install this code on your site plus the code snippets that you need to add to a website.
Adding Google Tag Manager Container Code t the Website
Follow these instructions by placing the first code – which is surrounded by script tags – right somewhere between the head tags of your site. This code is the crucial part as it informs your page to load your Manager account container serially. This implies that while Google continues with its magic, the rest of the page continues loading.
The other Tag Manager code – which is the ‘NoScript’ – should be placed right after the opening body tag and usually works as a backup. This allows you to easily track users without JavaScript. The NoScript tag informs the browser if you don’t have JavaScript enabled. And then renders an iframe version of this Container to the page.
It is important to note that although you can place both codes in the body, you should never add both of them to the head. As mentioned earlier, the NoScript section renders an iframe that is not permitted in the head, or else you will end up with an invalid website’s HTML.
The possible options you may consider are as follows:
- script code added to the head and noscript to the body
- Both script and noscript codes are added to the
Take note that the NoScript aspect of this code will not be required. You will only need it if you aim to track visitors without enabled JavaScript – which is an incredibly small fraction of the web traffic with several limitations – or if you want to confirm the ownership of Search Console Property.
Check for the Availability of Google Tag Manager Plugins
If you are making use of any of the popular CMS (Content Management System) that allows the use of plugins, there is an excellent chance that you will come across a plugin that easily installs Google Manager for you. All you will be required to do is to add your container ID.
Some examples of Google Tag Manager plugins include:
- WordPress: GTM4WP
- Magento: A bunch of them exists here
- Shopify: Several plugins here as well
These plugins will save you a lot of time when it comes to how to set up and install. Some platforms like Wix offer built-in integration as well.
But then, if you prefer manual installation – with or without the input of a developer – you will need to bear the following in mind:
Why Should You Place the Google Tag Manager Code in head?
Although this requirement is not set in stone, it is usually highly recommended that you place the script part of this code into the head of your site.
The primary reason for this is that it is much better for tracking. The higher up on the page that snippet is, the faster the page loads. It was recommended in the older version of Google Manager to place the snippet within the body tag, but this would eventually miss visitors who left your website or page before the body tag loads, which is usually a result of slow page speed.
If you run a heavy website, it will take a few seconds for Google Tag Manager to start loading up in the body. Still, it will be initiated much faster in the head thereby enabling you to catch more visitors in order to see how they behave. This may end up empowering you to quickly identify the correct percentage of traffic that bounces right off your pages even before the page loads completely.
Bear in mind that the lower your tracking codes are placed within the website’s code, the later the tracking codes will be launched.
Publishing the Container
When you place the code on your site, navigate to your account, and publish the container, especially if it is empty. The reason behind this is that unpublished Google Tag Manager will eventually cause an error which is usually visible in the browser’s console.
You will see something like the following:
404 not found for GET: http//www.googletagmanager.com/gtm.js?id=GTM-xxxxx
This indicates that your browser is urgently requesting data from Google’s servers, but no data will be returned since that particular container is still unpublished.
This is not such a big problem; however, if your developers are using specific tools – such as TrackJS – to track JavaScript errors, they will see these 404 errors in reports. This will eventually create unwanted ‘noises’ for them, even though they have the option of using filters. But then, publishing an empty container will never hurt anyone.
Checking if Google Tag Manager is Functional
After implementing this code on a webpage, you need to ensure that it was correctly installed.
Choose from any of the following options:
- On your website, right-click on its background, and then choose ‘View page source’ and find the code by looking for ‘gtm.js’
- Enable the preview and debug mode in order to see whether or not it appears on the screen. Click the ‘Preview’ button located at the top right corner of the Tag Manager interface. Then, move over to the website to refresh it in order to check whether or not a Google Tag Manager preview and debug panel appears right at the bottom of the screen.
- Then, make use of the Tag Assistant extension to check whether or not it is displayed as soon as you enable.
