Google Tag Manager is a tag management solution that mediates between a website or a mobile app and tracking tools like Google Analytics. GTM allows the use of one container for all code tags. Tracking codes have to be added to Google Tag Manager which is common across all pages. This JavaScript code acts as a container and is a home to other scripts that tags the system for injecting scripts into the page. Configuration rules apply for firing tags dynamically eg clicks form submission, track links, etc. Add or modify code snippets of GA by adding them to the existing container. Save your time by leveraging GA built-in tags, create variables and control versions, fire triggers in GA events, and so on. Work with Accounts and Containers by understanding permissions and security. You can also opt for multiple containers. The mobile version of GTM caters to a deferred audience.
GTM container has tags, triggers, and variables. The code snippets related to tags gather and operate the data.
Some tags come with pre-built-in GTM templates, others such as custom HTML and Image tags can be created. A set of rules and conditions in the triggers inform each tag when to fire. Variables are stored pieces of information that are accessible to your tags and triggers. Google Analytics collects visitor data and displays it in the form of reports, whereas Google Tag Manager takes hold of website interactions and sends such data to Google Analytics or any other tracking tool. fig1 shows a summary of how GA is configured with GTM.
Getting Started with Google Tag Manager
Sign up for Google Tag Manager with your Gmail account to get started.
Google Tag Manager New Account & Container Set Up
- to check, analyze, and solve installation of various Google tags such as Google Analytics, Adwords Conversion Tracking, Google Tag Manager, etc.
- verify the correct installation of Google Tags on your page.
- to show which tags are present, report any errors, and suggest ways to improve implementation.
- Tag Assistant Recording records user flow through your website and troubleshoot, diagnose and validate issues regarding google analytics implementation.
Fig3 shows the set up for creating a New Account and Container Setup. Select the target platform – ‘Web’ for your website and click ‘Create’. In GTM set up one account and one container for your Company and Website. Add and manage users for your GTM account. User access and permissions can be set at both the account level or the container level.
Naming Conventions
It is important to follow a naming convention for your structure set up in GTM – tags, triggers, variables, workspaces, and versions with proper descriptions. This will help manage your GTM data for large projects that are being sent to GA.
Google Tag Manager: Installation
With the web container installation, you will be prompted with the code snippet. The Google Tag Manager code fig4 is to be placed on each page of your website.
For WordPress, fig5 shows the page containing code under the opening head tag of the header.php file.
fig6 shows page containing code under the opening body tag of header.php file in WordPress.
The Google Tag Manager container snippet is a small piece of JavaScript and non-JavaScript code that has been pasted into the opening head and body tags of the header.php file. It allows Tag Manager to fire tags by inserting gtm.js into the page. For structuring containers in Google Tag Manager, three cases are possible-
- one website, one container
- multiple websites, one container
- multiple websites, multiple containers
Google Tag Manager – Workspace Interface
(1) – Workspace tab – Will give an overview of your Workspace fig7
(2) – Versions tab – This will show you details of the live version with the no. of tags, triggers, and variables with a history of version ID fig23.
(3) – Default Workspace tab – This will show details of the containers (up to 3) along with the date created. The i-icon to the far left when clicked will show the workspace configuration – name and description. The more tab next to save has an option of delete. You can delete the workspace by clicking the delete tab.
(4) – Overview tab – The current page displayed is the Workspace Overview fig7 which is the same as (1).
(5) – Tags tab – The tags tab when clicked will display details of the name, type, firing triggers, and last edit date. Click on the New tab to create a display of a side slide untitled tag page containing two sections of tag Configuration and Triggering fig8
(6) – Triggers tab – The trigger tab holds the details such as Name, Event Type, Filter, Tags, and Last edited date for the particular trigger. To set up a new trigger click the New tab located at the upper right corner of the page fig(13) & fig14
(7) – Variables tab – This tab displays two sections of Built-in Variables and User-Defined Variables. Details of Name and Type are available for Built-in Variables with a Configure tab at the top right corner of the section. For User-Defined Variables, details such as Name, Type, and Last Edited are available with a New tab at the top right corner of the section. fig9 & fig11
(8) – New Tag tab – You can create a new tag from here and also (5).
(9) – Description box – Find the description of your workspace here. The edit description tab allows provision for editing the description.
(10) – Workspace Changes – All changes made for your workspace appear here. Manage your workspace from here or the default workspace tab (3) or the more tab fig7 in the Now Editing-Default Workspace blue box fig15.
(11) – GTM-XXXXXXX – Container number fig7
(12) – Preview Tab – Gives you a preview of your Container before Submission fig7.
(13) – Submit tab – On clicking the submit tab fig7 the Submit Changes page fig16 is displayed. The Submission Configuration allows you to give a name and description for the version which will be published when you press the Publish tab.
(14) – Folders tab – Create folders for your tag, triggers, and variables fig7.
(15) – Container Not Published – After publishing this box will contain details of the Live Version number, published on and by sapcanvas. By clicking the detailed version tab, it will display the details of the live version fig22 & 24.
Creating a New Tag in Google Tag Manager
In the workspace overview screen (fig7), click the new tag. Every container creates a workspace by default that helps to make changes (if any) to your container. It becomes a part of Google Tag Manager when this workspace is converted to a version.
Tags
Click tag configuration and choose Google Analytics – Universal Analytics (fig8) & use Page View for Track-Type. A tag is a snippet of code that gets executed on a page. Tags send tracking info from your website to a third party eg Google Analytics Tracking Code, Facebook Pixel, or Remarketing Tags.
Variables
Give a name for the variable- Google Analytics (fig9) and enter your Google Analytics tracking code ID.
Variables are used to store information to be used by tags and triggers
- as a value condition for any given trigger.
- as a value that is passed within the tag that is fired.
There are two types of variables-
- built-in variables which are the default installation with the creation of a tag container
- user-defined that can be created and customized.
Start by creating specific User-Defined Variables.
User-Defined Variables Tables show variables gaDomain & gaProperty that match your property in Google Analytics.
These two variables combine into a variable Google Analytics Settings that can be used within your tags. By stating the Google Analytics property as a variable, the same information can be used in multiple tags which makes bulk changes easier whenever you are required to adjust Google Analytics information.
After adding Google Analytics Tracking Code (fig12) save the tag set up.
Trigger
In fig 8 click in the center of the triggering section (or anywhere in this section) and set the trigger as Pageviews. Name the trigger eg All Pages. To set up a new trigger click the + icon (fig13) and choose the trigger type from the options.
fig14 shows [Tag Type – Google Analytics – Universal Analytics] | [Track Type – Page View] | [Variable – {(Google Analytics)}] | [Firing Triggers – All Pages_Page View].
Workspace (fig15) now shows tag – Google Analytics Universal Analytics, trigger – All Pages and variable – Google Analytics.
Google Tag Manager has a feature called the Preview Mode (fig7) to view where the Tag Manager has fired different tags.
Workspaces
To create a new Workspace, click on Default Workspace or Manage Workspace fig7. From the workspace side slide page that gets displayed click the + icon at the top right corner of the page. For the free version, a limit of 3 workspaces can be created at any given time. Give a name and description in the Untitled workspace page and save your workspace. The workspace created is now a draft for your current editing. In this workspace view, you are allowed to change the configuration (name, description) of the workspace. Review the changes made and save. Head to the ‘more sign’ at the top right corner if you want to delete the workspace. Click on ‘Submit’ on the workspace overview page. On the page that is displayed (fig16) enter the version name and description. Click Publish to get the live version and the removal of this workspace.
Anonymization of IP address in Google Tag Manager
According to GDPR, an IP address is personal data. You may be required to turn on IP Anonymization in GTM. IP anonymization feature automatically deletes the last three digits of visitors’ IP address and reduces them to zeros. To set this feature go to your tag configuration and check the Enable overriding settings for this tag (fig17). Next, click on More Settings. From the drop-down options click on Fields to Set and select the Field Name from the drop-down to ‘anonymizeip’. Set its value to ‘true’ and save. From the display page which follows click the submit tab. In the Submission Configuration display page which slides from the right side enter Version Name, and Version Description and publish changes.
Google Tag Assistant: Chrome plugin for Google Tag Manager
If you are working with the Chrome plugin, go to the site and click the Google Tag Assistant (fig18), which will display the Global site tag & Google Tag Manager.
The website home page in the google tag manager console (fig19), will display a ‘Summary’ showing that the tag is fired 1 time(s).
In Google Analytics – Real-Time Reports overview (fig20), you will see that the website home page has been triggered.
Version 1
To sum up the above steps, we created the first pageview tag in Google Tag Manager. To do this we selected a new tag in our workspace overview fig7. The side slide display window showed the Tag Configuration page. You selected the tag as Google Analytics Universal Analytics from the options and set the track type (trigger) as Page View. For the new variable, you selected the option in the dropdown as ‘Google Analytics Settings’. Then you entered your Google Analytics tracking ID. In the Triggering section, All Pages – Page View was chosen as your Firing Triggers and the tag saved. Thus you had installed the GTM container code with (1)tag, (1)trigger, and (1)variable.
Now GTM version 1 is as in fig22-
- tag > track all visitors to your website with ‘GA’
- trigger > tag will fire on ‘All Pages’
- variable > data will be sent to the ‘GA tracking ID’
You have the option to preview your new tags/triggers/variables and check whether they work and debug to apply changes (if any) before publishing. Next click on submit (fig7) and give a name and description (fig16) for your version. After you hit ‘publish’ version1 (fig21) will go live and the workspace will be removed.
Version 2
Set up a new User-Defined Variable- gaProperty & gaDomain. To do this click on Variables then click on a + icon button. Enter a new Constant called gaProperty and add your ‘GA tracking ID’ and save the settings. Next, add the gaDomain with a value of ‘auto’ and save settings.
After you have added the variables gaProperty and gaDomain click on ‘Submit’ (fig7). In the submission configuration (fig16), add a name and description to your version. These workspace changes will go live as Version2 (fig23 & fig24) after you click the ‘Publish’ tab.
Cross-Domain Tracking
Cross Domain Tracking in Google Tag Manager permits session data between the two domains to be viewed as one in Universal Analytics.
Under Tag Configuration select More Setting > Fields to Set > click Field Name and in the drop-down menu select ‘allowLinker’, and in the Value field type ‘True’ fig24.
Scroll down in the More Settings to click the cross-domain segment to extend the fields. After it expands you will see three fields fig26
In the Auto link domains, you can add the domains here separated by a comma. Set the other two fields to False.
No sooner the link is clicked, it will go to “abc.com” Google Analytics will attach the link with particulars that permits the two sites to share information between the domains in the same analytics account. The linker parameter will look like something given below.
_ga=1.162239215.1444002397.1990697408
Navigate to your Google Analytics Admin settings. Under property settings, click on the .js Tracking info, and from the drop-down select Referral Exclusion List. Add the domains your visitors will travel over to your website fig26.
Data Layers
Data Layers are JavaScript codes that retain information tags in one place separate from your website code. In fact when the page loads all tag information is accessible in the same place. Google Tag Manager improves site speed since tags don’t have to go through the code to find the information they require. You can get started with data layers in Google Tag Manager to track particular events for example a download. A new data layer enclosed within a script tag will look something as given under:
- <script>
- dataLayer = [ ] ;
- </script>
For adding a data layer the object placement has to be before the Google Tag Manager container code. After the addition of the data layer code in the page code, the bracket contains variables, events, and information. You may write information directly into the data layer or insert it dynamically.