Implementing Analytics with Google Tag Manager

Published February 23, 2017
You know you could be getting more insight from Google Analytics, but adding code to your website to track conversions and other statistics seems like a daunting task. Thanks to Google Tag Manager, it doesn’t have to be! Google Tag Manager exists to make analytics implementation easier, allowing you to add or update your website tags without having to involve your very-busy IT or development department. An easy process means a greater ability to track new campaigns and to collect the data you need.
This post introduces Google Tag Manager and explains how it can be used to ease the burden of managing tracking code, and to get more insight from Google Analytics.

Implementing Google Analytics with Google Tag Manager


What are tags and why do I need to manage them?

Tags are short pieces of JavaScript code that you add to your website to enable Google Analytics to track visitor behavior. When you installed Google Analytics on your website, you added a basic tag to all your pages to track each visit to a page. You may have used a Wordpress plugin such as Google Analytics by MonsterInsights to install the basic Google Analytics tag, or you may have added the basic tag directly into your website template, so that it is included in the header of every page.

Adding the basic Google Analytics tag to your website allows Google Analytics to track standard metrics, like the number of Users, Sessions, and Pageviews. However, if you want to track non-generic stats, like mailing list registrations or trial account signups, you need to add custom tags to your website to track this more specific information. Custom tags can be written in JavaScript, using methods from Google’s analytics.js library.

Once you start adding custom tags to your website, you need to manage them. Why? Because, as your site’s design changes, the tags will need to be updated to stay synchronized with how your site works. In addition, as marketing campaigns change and your requirements for data change, you will need to add, update, and remove tags as appropriate.

The drawback? Managing tags requires programmer time and can become a bottleneck, slowing down the development of your website. This bottleneck can also impede your ability to track new marketing campaigns. If the developers cannot get the tags implemented in time for your next campaign, you won’t have the stats you need to evaluate performance.

Google Tag Manager (GTM) eases the bottleneck by automating many aspects of tag management. GTM also enables non-programmers to add many of the custom tags needed to track marketing campaigns.

Example: Tracking Email Signups

Suppose you want to track email signups on your blog. Most signup processes these days do not have a traditional “Thank You” page – so there is no way for the basic Google Analytics tag (which tracks pages) to capture this data. Instead, your email signup process probably finishes with a modal, like the one below (from the Megalytic Analytics Reporting Blog).

thank you mogal

In this situation, you need to add a tag that will fire a Google Analytics Event to track the form submission that collects the email address and adds it to your mailing list.

Amazingly, with GTM you can do this without writing any code or modifying your website. Once you have installed GTM, you can implement tracking like this by simply configuring tags in the GTM user interface. The rest of this post walks through this process, illustrating the steps for implementing tracking of the blog signup.

Setting up Google Tag Manager

To use Google Tag Manager, you need to create an account. Give your account a name, and then give your container a name. Your container will hold all the tags that you manage. Most people have one container per website, and it is typical to name your container after your website. Select the “Web Pages” type of container, add your domain, and click “Create Account and Container.” Below is the setup page for the Megalytic GTM account and container.


Creating a Google Tag Manager Account


Once you click “Create,” the interface will provide the codes needed to install GTM on your site. Simply copy that code into your website template so that it is included on every page.

You’ll see two codes, one of which should appear as high as possible within the section, and another which should appear after the opening tag. You may want to get your website developer to help with this part.


Google Tag Manager - Code for Website


Our First Tag: Google Analytics Tracking Code

Once you’ve created an account and inserted the code, you can proceed with adding Google Analytics to your site. From the Workspace section that appears after setting up your account, select “Add a New Tag.”


Google Tag Manager - Adding a New Tag


Start by giving your tag a descriptive name (in this case, “Google Analytics” covers its function). Next, click the Tag Configuration section to choose a Tag Type and select Universal Analytics from the options that appear.


Google Tag Manager - Choose Tag Type


Paste your Google Analytics ID into the Tracking ID field. You can find your ID within the Property section of your account. Keep the “Track Type” as Pageview, which should be the default option.


Google Tag Manager - Configure Google Analytics


Click the Triggering section to determine where you want the code to appear. In most cases, you’ll want to track every page of your site, and so you can select the All Pages option. Once complete, save your Tag.

Our Second Tag: A Google Analytics Event

Next, we’ll create a tag that allows us to trigger a Google Analytics Event when a form is submitted. To begin, we’ll need to complete a housekeeping task under the Variables section of Tag Manager. Click “Configure” and check the box next to “Form ID” within the options that appear.


Google Tag Manager - Choose Form Id


After returning to the Tags section, we can create a new tag as before, once again selecting the Universal Analytics Tag Type. We name this tag “GA Event Blog Updates Signup,” enter our Tracking ID, and select “Event” under Track Type.

Events are defined using a Category, Action, Label, and Value. Only the Category and Action are required. Here, we are going to use a Category named “Newsletter,” and the Action will be “Subscription.” We might want to track other types of registrations in this category with other tags, like “Enroll in Webinar.” The completed tag setup is shown below.


Google Tag Manager - Setup Google Analytics Event


Next, we need to tell GTM what form submission to track as the Event, by adding a Trigger. We click the Triggering section and select the “+” symbol to create a new Trigger, choosing a Trigger Type of Form Submission.


Google Tag Manager - Form Submission Trigger


Within the Trigger options, we check the boxes by Wait for Tags and Check Validation to ensure that GTM tracks submissions accurately. In the field below, we’ll enable the Trigger for any Page URL containing /blog/.

Now, we need to tell the tag how to specifically track the blog subscription form (there might be other forms on our blog pages). To do this, we need to look at the HTML for the page with the blog submission form on it and find its unique id.

Using Chrome, we can right click on the form in the Megalytic blog, and select “Inspect Element.” This will open a pane in the lower half of the browser where we can see the HTML. Looking for the form element, we see that is has the ID “newsletter-signup-form”. We can use this ID in the Firing Rule to track submissions of this form.


finding the form id in the html


Going back to the Trigger dialog, under the “Fire this trigger when...” section, select the “Form ID” option, choose “equals” and enter “newsletter-signup-form.” The completed Trigger looks like this.


Google Tag Manager - Trigger Complete


Now, we click save, and our Google Analytics tag has been created. To learn more about creating tags to track different kinds of Events, check out Justin Cutroni’s Auto Event Tracking with Google Analytics Tag Manager

Testing Our Tags and Publishing Them

By default, tags are created in “unpublished” mode. To use this tag, we will need to click “Publish” in the upper right hand corner of the Overview screen. Before we do that, however, we are going to click on “Preview and Debug” to test our tags.


Google Tag Manager - Preview


This puts us into debug mode, and when we open the Megalytic blog, we see a panel at the bottom of the screen that shows which GTM tags are firing. So far, so good! Now, we enter an email address in the upper right corner Blog Updates form, and click “Go” to submit it. As you can see below, when we do this, the Blog Updates Signup tag fires.
KEEP same screenshot: gtm signup tag firing

Terrific! We have successfully implemented tracking of our blog signups using Google Tag Manager. Now, we go back to the Overview screen in GTM, exit from Preview mode, and click “Publish” to publish our tags on the live website.


Hopefully, this example has provided some insight into how you can use Google Tag Manager to implement Google Analytics tracking on your website. The beauty of this approach is that, once GTM is installed, you can implement all kinds of tracking without having to write any JavaScript code. To learn more, visit the Google Tag Manager Help Center.


When the client first came to you, you talked up the value of Google Analytics. You emphasized the importance of seeing where your traffic was coming from. You went on and on about how Google Analytics can show traffic sources to pinpoint whether people came from search, social media or a specific site referral, and how valuable this data was. You sold them on it, so much so that your client looked forward to receiving that first report, the magical day when they would finally understand where visitors were coming from.
But then the report came, and it looked like this:



It showed that 10% of your client’s traffic came from “(direct)/(none)”. What does this label mean? How do you explain Direct traffic to your client? Better yet, how do you explain “none”?
Let’s take a closer look at understanding Direct traffic in Google Analytics and how we can address it with clients.
Digital marketers spend a lot of time focused on PPC and SEO campaigns in order to drive desirable traffic to a website. The phrases we’re ranking for and bidding on get meticulous attention, so much so that we often forget about some of the other ways that visitors find us.

We put a tremendous amount of the effort we put into reviewing organic search data and PPC campaign performance in analytics. But how closely do we monitor referral reports?

If that’s not a channel you review regularly, you may be missing out on seeing traffic that is coming directly from links you’ve obtained around the web, local business listings, news mentions, and more. Many times, links are only considered as a means to an end, a metric that Google uses in determining how to rank sites in the SERPs (search engine results pages). But the fact is, many of a site’s links may be directly contributing to its traffic.

In this article, we’ll review how to look at referral reports in Google Analytics, and some of the many ways to use that data to better inform your web marketing decisions.


Remember how your mom told you not to stand too close to the television because it might hurt your eyes?

The same rules can apply to data. If you’re too close, you may miss the patterns and trends that are crucial to understanding your website’s performance. You can’t judge a site’s performance looking at data in the bubble of a single day, you must consider any day’s traffic compared to the days before and after.

Google Analytics makes it fairly easy to analyze trends over long periods of time. But it also allows you to stand right in front of that TV, to look at more granular levels of time, right down to the hour.
There’s a better way to get that close to the data, without burning your retinas. We’ll cover how to analyze traffic effectively in today’s post.