• Skip to main content
  • Skip to primary sidebar

How to Connect Google Tag Manager to Google Analytics?

Reading Time: 7 mins. Posted on December 10, 2018, last updated on February 14, 2020 .

Understand the basics of Google tag Manager and how to connect with Google Analytics such that you don’t need to use Google Analytics code on your website.

How to Connect Google Tag Manager to Google Analytics?

What is Google Tag Manager?

Everyone uses Google Analytics. If we go about by the builtwith.com data, almost 65% of the top million sites use Google Analytics. The percentage increases to over 76% when we only consider the top 100k sites, and it reaches a whopping 93% out of the top 10k sites.

So when you use Google Analytics, one can track many events for better stats and reporting. As an example, what is the average page scroll for the user, and how many pages user visits from individual entry pages?

Instead of writing code for tracking each such event, one can use Google Tag Manager.

For instance, you can create a tag that will tell you how many visitors have read a particular blog or say how in-depth they scrolled to read it. Google Tags will send relevant information on an exact activity to Google Analytics or Google Adwords or any other third party tools.

Google Tag Manager makes the tagging way easier without a need to write code for events or triggers. Copy and paste tagging codes once for a website and use Google’s tag manager UI to track events and fire triggers.

So any non-technical user can also use it to track events.

Though basic knowledge of HTML and CSS can help you create better tracking events and triggers. As an example, if you wish to track multiple forms on a page separately, you need to able to select the right selector CSS class name for it.

One key point one should note is, Google’s Tag Manager interface is only to create tags for a given activity you want to track. It doesn’t generate any kind of reports. For reporting purposes, one has to use Google Analytics or even can pass the data to Google Adwords.

The Advantage of Google Tag Manager

Google Tag Manager is a Google product and is free.

  • Eliminates the heavy lifting of writing code for each event you want to track
  • Automatically codes for you which is bug-free
  • It is much of a user based tool compared to a web developers tool.
  • You can quickly add and edit tags on your own and integrate them with multiple third-party tools.
  • You can generate tags to track specific activities for a website to increase ROI
  • Easy enough for non-programmers to start with
  • Manage mobile apps
  • High-quality reports with any third party tool or Google Analytics

How to Add Google Tag Manager

Sign in to Tag Manager. Do input your account name, country, website URL, and select the container – Web, iOS, Android, or an AMP website. Click create.

New account setup in google tag manager

The next step is to install the given codes on your website HTML. One code shall be installed in the <head> & the other one after the opening <body> tag. When done, click ok. If you are using a WordPress website, you can install the Google Tag Manager WP Plugin and add the code by just adding your property ID.

Google tag manager code

You will be able to capture data, analyze reports & monitor your tags provided the code is installed.

After the initial setup, it’s time to get along with the interface atmos, features, and navigation for easy understanding and smooth functioning.

Also, this is the only code that you need to deploy on every page of the website. Now one can use the tag manager to send the page view data to Google Analytics.

Also read:
How to Add Google Tag Manager (GTM) to WordPress?
How to Add Google Tag Manager (GTM) to WordPress?
3 ways to add Google tag manager or GTM code to a WordPress Blog. Edit header and footer files, or edit functions.php. Finally, use a plugin

Google Tag Manager Dashboard

GTM presents a dashboard with navigation links in the left panel.

We have the Container Name – biztips.co right at the top. We have an alphanumeric ID GTM-XXXX as the GTM ID. Clicking the ID will retrieve us the GTM code for your container.

The Preview and Submit buttons help in previewing our charges and make changes live, respectively. Preview enables you to monitor how your tags are working on a live website using the tag manager console window, as shown below.

Components of Google Tag Manager

1. Container

As the name suggests, a Container holds all your tags in one place. The best practice is to create one container for one website and name the container the same as your website URL. Here, I have named my container as “biztips.co.”

The code we inserted on the website is the container code generated by GTM.

2. Triggers

Triggers are for an event based on the filters. Specific activity is an event (Scroll, Click …), and the condition that triggers the event can be filtered based on conditions.

For example, events can be a download e-book, click a linked or bought a product or remove items from the cart.

There must be a minimum of one trigger to fire a tag. When you click on the trigger option, GTM provides you with a list of possible events that can be triggered to fire different tags. See below.

List of Built-in Trigger Type

Type of triggers in google tag manager

If you wish to understand the details of each trigger, refer to this official guide.

Understanding Events and Filters with an Example

Let’s say I want to track all external links click on my blog into Google Analytics.

I have created a Click – All Elements event to trigger as soon as a user clicks the link that isn’t on my blog domain biztips.co.

The event is “click,” and the trigger is based on the filter is those links that don’t have the biztips.co as the domain name.

Similarly, one can create any trigger based on conditions using CSS classes or HTML IDs. If you have more than one link that points to the same URI (multiple add to cart button or multiple buys now buttons) and wants to track which link is being clicked, you can specify the HTML ID or CSS class to trigger different events based on each element. It is where you need some knowledge of HTML / CSS to come in handy. A way to measure the Click Through Rate of each element on a page.

Once the trigger is created, create a tag to Google Analytics.

3. Variables

Google Tag Manager Variables are of 2 types – Built-in Variables are provided by the Google Tag Manager and User-defined Variables.

One can use built-in variables directly or can create a variable from the built-in ones. Creating a variable is seldom needed as Google Tag Manager has provided much of the required variables.

Create Tag to Connect Google Analytics

We have a basic understanding of the tag manager lingoes. So now, let us use the tag manager to track page views in Google Analytics and replace the code of Google Analytics with that of the tag manager.

Click Tags on the left panel on the dashboard and click the New tag Button. You will see the Tag Configuration and Triggering options.

Select Google Analytics – Universal Analytics for the Tag Configuration and for Triggering set it for “all pages.”

Integrating Google Analytics for the first time, you will need to set the Google Analytics Property ID.

Click the drop-down list in “Google Analytics Settings”  Under New Variable option and add your Google Analytics Property ID which you will have from the Google Analytics dashboard and is of the form UA-XXXXXX-XX

Save the tag.

It is now ready to go live.

After creating tags, you need to publish them. Before publishing the tag, you can preview it and check whether it is working fine or not on your website.

On the dashboard, click Preview. An orange strip appears that tells you that you are in a preview mode now. You can preview and debug the workspace by visiting your website. See the images below.

Preview in google tag manager

Debug Pane at the bottom of biztips.co website. The debug window helps you analyze potential errors in the tag. This window is visible only to the tag creator and not to the users.

The debug window shows all the information about the tags, triggers, and data layers. An event summary on the left side provides details on all the events that take place. Furthermore, the events also show the tags that you have programmed to fire, their triggers, and block triggers if any.

To close the debug window, go to the GTM dashboard and click Leave Preview Mode.

Google Tag Assistant – A Free Chrome Extension

The Google tag assistant is a free Chrome extension. It is helpful to perform a check whether or not your tags are firing correctly or if it needs editing. Below is the screenshot of the Google tag assistant that I have installed in my chrome browser.

Google tag assistant in google tag manager

The Google tag assistant uses a Green, Blue & Red color system to indicate the health of your tags. Green means all of your tags are working, blue means GTA has suggestions to improve a tag, and red means it’s not working.

Check all your tags using GTA, and when it appears that all tags are firing correctly, you can go ahead and publish them. Hit the Submit button in the upper right corner on the GTM dashboard, enter a name and description for the new container version, and publish it.

Every time you make a new tag, trigger, variable, filter, or any small change in the existing properties in GTM, it will ask to review the changes, save and publish them. This way, you will create new versions of your container every time you save.

You are Here: Home / Tools / Google Tag Manager / How to Connect Google Tag Manager to Google Analytics?

About Shabbir Bhimani

Blogging Since 2009. If I can leave my high paying C# job in an MNC in the midst of global financial crisis of 2008, anybody can do it. @BizTips I guide programmers and developers to Start and Grow an Online Business. Read more about me here.

May I help You With ...

Upwork Proposal
Finding Clients
Start a Store
Start a Blog
 

Or Help Yourself ..

Primary Sidebar

About Shabbir Bhimani

Blogging Since 2009. If I can leave my high paying C# job in an MNC in the midst of global financial crisis of 2008, anybody can do it. @BizTips I guide programmers and developers to Start and Grow an Online Business.

Get in touch with me on LinkedIn or read more about me here.

Let me Guide You to Start and Grow your Online Business

Download my
FREE eBook NOW
to win more clients.
And it is not an annoying pop-up either

Additional menu

  • Twitter
  • Linkedin

BizTips

Shabbir Bhimani: Start and Grow an Online Business

  • Freelancers Start Here
  • Start An eCommerce Store
  • Start A Blog
  • About
  • Archive
  • Disclaimer
  • Contact
  • Glossary

2009 - 2023 All my content & images are licensed as Creative Commons.

WebTurtles LLP. LLPIN: AAL-5288. Hosted with Linode.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT