In this guide we are going to take a look at the basic installation process for adding Google Analytics to your website via Google Tag Manager.
In October 2012 Google released their free tag management tool titled Google Tag Manager (GTM). The software allows webmasters to easily manage tracking tags on their websites from a central dashboard.
In this guide, we will be performing the installation on WordPress, but these directions will work for any web platform.
Personally, I've used Google Tag Manager since V1 to install tags and track user interaction with my web projects. With the update to V2 in 2014, Tag Manager has become an intuitive and easy to use platform. The wide range of configurable options makes for powerful tracking possibilities.
Before we get started, you'll need to make sure you have an active Google account. From there you'll need to head over to Google Tag Manager and enable the service for your account. Note that in the following examples I've removed the actual codes for GTM and Google Analytics in the following examples. Where you see GTM-XXXXXXX or UA-XXXXXXXXX-1 you will place your tracking code.
Launching GTM for the first time, you'll be prompted to create a new account. The first step will ask you to enter a name for your account.
In the second step name the container as your domain's URL without the leading http(s):// - in this example netmospherics.com. We will be tracking a website, so select 'Web' and click create.
After accepting the Terms of Service Agreement you'll land in the dashboard. The initial screen will provide you the code snippets that you need to add to your website.
We want Google Tag Manager to be present on every page of my site which means it's best to trigger it in a global template file. Since I am performing the install on WordPress, I fired up my FTP client and opened the header.php file for my site's current theme.
Then follow the straightforward directions that Tag Manager provides:
The resulting implementation looks like this:
To check that the installation is live, navigate to your live site. Once there, do a hard refresh (shift + refresh) or use an incognito window to ensure that you are pulling the latest version of your page. View the source code of your site (on Chrome right click on the page -> Inspect).
Looking at the code, ensure that the Google Tag Manager code is loading at the top of the <head> and at the top of the <body>.
Once you've confirmed the code is live, we are good to go!
With Tag Manager installed, you're off to the races. At the time of writing, Google supports over 50 tag types out of the box. We will go through an install of Google Analytics which will help you get familiar with how Tag Manager works.
Before we add Analytics to the site, we need to make sure we have an active account. Head on over to Google Analytics and enable the service. Add a new account and fill in your account name, website name, URL, category, and timezone. Once you click 'Get Tracking ID', you'll be prompted to accept the Terms of Service.
Once your account is created, you'll land on the tracking info page. For future reference, you can find this under Admin > Property > Tracking Info > Tracking Code. Copy down the 'Tracking ID' which begins with 'UA-' as we will need it below.
Now that we have the tracking ID, head back over to Google Tag Manager.
Before we add the tag, we want to set up a couple of variables that the tag will use. On the left nav click 'Variables', and then click 'New' under 'User-Defined Variables'.
The first variable we will name 'gaProperty'. Select 'Constant' and fill in your Google Analytics Property ID from the steps above.
The second variable will be named 'gaDomain'. Select 'Constant' and type 'auto' as the value.
Next, click 'Tags' from the left nav and select 'New Tag'.
This will open a side-in from the right. Name the tag, we recommend 'GA Pageview' and then click on the top 'Tag Configuration' pane.
This opens another slide-in where you'll select 'Universal Analytics'.
Next, ensure that 'Track Type' is set to 'Page View'. Then click 'Enable overriding settings in this tag' and click the add a variable icon next to 'Tracking ID'. You'll select the 'gaProperty' variable we just created.
Next, click the 'Triggering' section. Choose the 'All Pages' trigger and finally hit save on the 'GA Pageview' tag.
What we've done above is to tell Google Tag Manager that the tag will be a Google Analytics Universal type and set the property ID to match our Analytics property. Then we told the software to trigger the tag across every page of our site. The end result is the tag will be added for every pageview from all users.
The final step is to preview and publish the changes.
First, hit the preview button. You'll see an alert that preview mode is active. Next head to the site you just installed the tracking on. You'll see the Google Tag Manager preview pane load on the bottom of your window. We are looking to confirm that the 'GA Pageview' tag is firing as we browse the site.
Once you've confirmed this, you can switch back over to Google Tag Manager. You'll 'Leave Preview Mode' and finally hit 'Submit' to publish the changes. On the publish screen you can name your version and give a brief description of the changes. This is helpful for managing the process down the road and I highly suggest you be descriptive in here so you can refer back later.
The final test is to confirm that you can see the live traffic in Google Analytics:
I hope you enjoyed this guide. Please leave any questions or comments below.