Implementing Google Analytics
Implementing Analytics with Google Tag Manager
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.
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 plugin such as Yoast’s Google Analytics for WordPress 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 basic 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. 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 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 Google Tag Manager (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 Manger, 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 Kilifi County GTM account and container.
The next page will provide the code needed to install GTM on your site. Simply copy that code into your website template so that it is included on every page. This code should appear immediately after the opening tag. You may want to get your website developer to help with this part.
On this same page, below the code, click on the Google Analytics icon to start creating Google Analytics tags.
Our First Tag: A Form Submission Listener
The first tag we are going to create is one that detects when a form is submitted from one of our blog pages. Tags like this are referred to as listeners because they listen for events like a form submission. GTM provides a variety of listeners for tracking common UI Events.
In the Tag Name field, we entered “Blog Form Submit Listener” and under Tag Type, we selected “Form Submit Listener.”
Next, click “+ Add” in the upper right hand corner to create a Firing Rule. A Firing Rule tells GTM when to fire this tag. In the “Add Rule(s)” modal that opens, select “Create a new rule.” We use the Rule Name “Blog Pages” because this listener should only fire on our blog pages. Under the Conditions heading, we select “{{url path}}”, “starts with”, and enter the text “/blog/.” This ensures that the listener only fires on the pages on our website starting with “/blog/.”
Our Second Tag: A Google Analytics Event
Our first tag did not involve Google Analytics at all. It simply set up a listener within the GTM framework that will fire Events we can detect and can be used to fire other tags that will implement Google Analytics tracking. This is a common technique used to implement Google Analytics tracking within GTM. Some tags, like listeners, push information into a Data Layer. Information in the Data Layer is read by other tags to do things like fire Google Analytics Events.
To create our Google Analytics Event tag, we start by clicking “NEW” in the upper left corner of the Overview screen, and select “Tag.”
We name this tag “Blog Updates Signup” and under Tag Type, select “Universal Analytics.” If you are still running Classic Google Analytics, select that option. To learn how to tell which version of Google Analytics you are running, see our previous blog post, under the heading How to check if you already have Universal Analytics.
Next, we enter our Tracking ID, and under Track Type we select “Event.” 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 the Event for by adding a Firing Rule. We click on the “+ Add” button next to Firing Rules in the upper right. Then, we select the “Create new rule” button and name the rule “Blog Updates Submit.” Now, we need to add two rules to set the conditions for this Firing Rule so that it only fires when the form being submitted is the Blog Updates signup form.
The first rule checks the Data Layer for form submissions detected by the listen tag we defined earlier. For that rule, we select “{{event}}”, “contains”, and enter the text “gtm.formSubmit.” Next, we click on the “+” sign at the end of that rule to add another rule. For this rule, we need to tell the tag how to identify that the form submission detected by the listener is for 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 Kilifi County 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.
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 then select “Debug” to test our tags.
This puts us into debug mode, and when we open the Kilifi County blog, we see a panel at the bottom of the screen that shows which GTM tags are firing. As shown below, we can see that as soon as the blog page is opened, the listener has fired. That is because the Firing Rule specified that this listener should run on every page starting with “/blog/.”
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.
Conclusion
I hope, 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. You can learn more by subscribing to CXL Website
