Google Tag Manager is a tag management system allowing marketers and webmasters to deploy website tags all in one place. It allows you to quickly and easily update tags and code snippets on your website or mobile app. The is a system created by Google to manage JavaScript and HTML tags used for tracking and analytics on websites.
The Google Tag Manager code is a small piece of JavaScript and non-JavaScript code that you paste into your pages. It enables Tag Manager to fire tags by inserting gtm.js into the page (or through the use of an iframe when JavaScript isn't available).
This is how you will implement the Google Tag Manager code on your website:
1. Copy the following JavaScript and paste it as close to the opening <head> tag as possible on every page of your website, replacing GTM-XXXX with your container ID:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];
w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);})
(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
2. Copy the following code and paste it immediately after the opening <body> tag on every page of your website, replacing GTM-XXXX with your container ID:
<!-- Google Tag Manager -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager -->
The Google Tag Manager code must be placed directly on the page where you wanted to track. It must not be placed in a hidden iframe or deploying it within another tag management system because it will prevent certain tags from accurately tracking the parent page.
If you want to gain more control over the tag events or data, you can customize using asynchronous methods. To customize your installation, see the guide from here:
Google Tag Manager - Quick Start Guide
If you are using Wordpress, you can use this plugin just by adding your Google Tag Manager container ID:
Duracell Tomi's Google Tag Manager for WordPress
If you are using Joomla, this is a popular plugin:
Google Tag Manager for Joomla
If you are using Shopify, here is the guide on where to place it on your theme:
Add Google Tag Manager code to your Theme
If you are using Bigcommerce, go to:
TEMPLATES > LAYOUT > BASE.HTML
It should be in layout/base.html and layout/empty.html
then you need to insert code in base.html.
How will you know that the Google Tag Manager code is working?
Use this chrome tool: Tag Assistant (by Google)
You will see a tag icon indicating the status of the tag on the page you're viewing.
Click on the tag icon to open a window containing tag details. It will show how many tags were found, how many errors were found, any errors, and a link to the most relevant help document available to resolve the problem.
In addition, Tag Assistant makes suggestions when improvements can be made such as it's about time to update the Analytics tag installed and replace it with the newer version.
The Google Tag Manager code is a small piece of JavaScript and non-JavaScript code that you paste into your pages. It enables Tag Manager to fire tags by inserting gtm.js into the page (or through the use of an iframe when JavaScript isn't available).
This is how you will implement the Google Tag Manager code on your website:
1. Copy the following JavaScript and paste it as close to the opening <head> tag as possible on every page of your website, replacing GTM-XXXX with your container ID:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];
w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);})
(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
2. Copy the following code and paste it immediately after the opening <body> tag on every page of your website, replacing GTM-XXXX with your container ID:
<!-- Google Tag Manager -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager -->
The Google Tag Manager code must be placed directly on the page where you wanted to track. It must not be placed in a hidden iframe or deploying it within another tag management system because it will prevent certain tags from accurately tracking the parent page.
If you want to gain more control over the tag events or data, you can customize using asynchronous methods. To customize your installation, see the guide from here:
Google Tag Manager - Quick Start Guide
If you are using Wordpress, you can use this plugin just by adding your Google Tag Manager container ID:
Duracell Tomi's Google Tag Manager for WordPress
If you are using Joomla, this is a popular plugin:
Google Tag Manager for Joomla
If you are using Shopify, here is the guide on where to place it on your theme:
Add Google Tag Manager code to your Theme
If you are using Bigcommerce, go to:
TEMPLATES > LAYOUT > BASE.HTML
It should be in layout/base.html and layout/empty.html
then you need to insert code in base.html.
How will you know that the Google Tag Manager code is working?
Use this chrome tool: Tag Assistant (by Google)
You will see a tag icon indicating the status of the tag on the page you're viewing.
- Grey tag icon with an 'x' indicates that no code was found on the page.
- Green indicator will show if a valid tag was found. The number in the icon indicates the number of tags that were found. Be happy if you see green!
- Blue indicator will show there are suggestions on improving overall tagging health.
- Yellow indicator will show that a tag was found with minor implementation issues. When there are duplicate codes, yellow would appear.
- Red indicator will show that a tag was found with critical implementation issues. Usually happens when something in the code is missing that's why it won't fire.
Click on the tag icon to open a window containing tag details. It will show how many tags were found, how many errors were found, any errors, and a link to the most relevant help document available to resolve the problem.
In addition, Tag Assistant makes suggestions when improvements can be made such as it's about time to update the Analytics tag installed and replace it with the newer version.
Comments