Google Tag Manager

image-google-tag-manger
image-google-tag-manger

Google Tag Manager is a tag management solution which mediates between a website or a mobile app and tracking tools like Google Analytics. Tracking codes [JavaScript codes] has to be added to  Google Tag Manager and then configuration rules applied for firing the tags eg clicks, form submission, etc.

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.

Getting Started with Google Tag Manager

Click on  Google Tag Manager and sign in with your Gmail account to get started. 

figa-set_up_account
fig(a)-set_up_account

fig(a)-Set up a Tag Manager Account.

Install a Tag Assistant plugin within chrome

  • to check, analyze and solve installation of various Google tags such as Google Analytics, Adwords Conversion Tracking, Google Tag Manager etc.
  • verify 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.
figb-set_up_container
figb-set_up_container

fig(b)-Set up a Container

figc-install_google_tag_master_code
figc-install_google_tag_manager_code

fig(c)- Google Tag Manager code to be placed in each page of your website.

figd-placement_of_code_under_opening_head_tag_header.php_file
figd-placement_of_code_under_opening_head_tag_header.php_file

fig(d) shows page containing code under the opening head tag of header.php file.

fige-placement_of_code_under_opening_body_tag_header.php_file
fige-placement_of_code_under_opening_body_tag_header.php_file

fig(e)- shows page containing code under the opening body tag of header.php file.

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
fig1-GTM_workspace
fig1-GTM_workspace

fig(1)-In Workspace overview screen, click the new tag.

Workspace: 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.

fig2-tag_configuration
fig2-tag_configuration

fig2-Click tag configuration and choose Universal Analytics & 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.

fig3-choose_a_variable
fig3-choose_a_variable

fig3-Give a name for the variable- Google Analytics 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 three specific User-Defined Variables.

User-Defined Variables
User-Defined Variables

User-Defined Variables Tables show variables gaDomain & gaProperty that match your property in Google Analytics.

Built_in_variables_&_User_defined_variables
Built_in_variables_&_User_defined_variables

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 make bulk changes easier whenever you are required to adjust Google Analytics information.  

fig4-enter_google_tracking_ID
fig4-enter_google_tracking_ID

fig 4-After adding Google Analytics Tracking Code save the tag set up.

fig5-trigger
fig5a-trigger

fig 5a-Click the + icon in Triggering [fig2] and choose Page Views

fig5b-tag_name-tag_type-track_type-variable_{{Google Analytics}}-trigger_allpages_pageviews
fig5b-tag_name-tag_type-track_type-variable_{{Google Analytics}}-trigger_allpages_pageviews
fig6-workspace_showing_tag_variable_trigger
fig6-workspace_showing_tag_variable_trigger

fig6-Workspace showing tag as Google Analytics Universal Analytics, trigger as All Pages and variable as Google Analytics.

Google Tag Manager has a feature called the Preview Mode where we can view where the Tag Manager has fired different tags.

fig7-click_submit_workspace
fig7-click_submit_workspace

fig7-After tag, the variable trigger is set to All Pages then add a description and click on the submit button in the workspace.

fig8-tag_manager_analysis_chrome_plugin
fig8-tag_manager_analysis_chrome_plugin

fig8- Go to the site and click the chrome plugin-Google Tag Assistant, which will display Global site tag & Google Tag Manager.

fig9- google_tag_manager_website_page_shows_tags_fired
fig9- google_tag_manager_website_page_shows_tags_fired

fig9-On the website page in the google tag manager console you will find a display of Summary showing that tags are fired on this page.

fig10-Real_Time_Report_Google_Analytics_Displays_Tracking copy
fig10-Real_Time_Report_Google_Analytics_Displays_Tracking copy

fig10-In Real Time Reports in the overview you will see that the page has been triggered.

fig11-version1_live_published_with_tag_trigger_variable copy
fig11-version 1

Set up a new User-Defined Variable- gaProperty & gaDomain.

fig12a-set_up_user_defined_variable_gaProperty_ gaDomain
fig12a-set_up_user_defined_variable_gaProperty_ gaDomain
Version 2
Version 2

Click Variables then click on a +New 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. Publish this workspace as change Version 2 by clicking Submit.

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.

cd1-more_settings_fields-to-set
cd1-more_settings_fields-to-set

Scroll down in the More Settings to click the cross-domain section to expand the fields. After it expands you will see three fields

In the Auto link domains, you can add the domains here separated by a comma. Set the other two fields to False.

cd2-auto_link_domains-cross-domain-tracking
cd2-auto_link_domains-cross-domain-tracking

No sooner the link is clicked that leads to “abc.com,” Google Analytics will attach the link with information that permits the two sites to share the data 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.

cd2-auto_link_domains-cross-domain-tracking
cd2-auto_link_domains-cross-domain-tracking

Data Layers

Data Layers are JavaScript codes that retain information tags in one place separate from your website code. In fact when page loads all tag information are available 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 specific events such as 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.

Digital Marketing Solutions

Thank you for subscribing.

Something went wrong.