Implementing 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).

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.

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.

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.”

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.

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.

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.

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.

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.

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.

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.

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.

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.

Conclusion

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.