Installing Google Tag Manager on WordPress – The Complete Guide

!!! UPDATED 2016-09-28 !!! – New screenshots and adaptions to newest version of GTM –

One of the most important things on any site is to have some kind of web analytics tools setup so that you can track what is happening on your site. While there are many web analytics platforms out there my sole focus is on Google Analytics.

This guide is for those who want an easy way of installing Google Analytics through Google Tag Manager.

What you need in order to make this work:

  • A Google Account (free)
  • A self hosted WordPress installation (not residing on wordpress.com)
  • A cup of coffee

Setup a Google Analytics Account

The first thing that needs to be done is to setup a new account in Google Analytics for your site if you haven’t already. This is done in just a few minutes, but we’re going to tweak this a bit later on so keep on reading.

Head over to the Google Analytics site and login (or create a free Google Account if you haven’t already).

Create Google Analytics Account

 

Once logged in all you need to do is click on Admin in the top menu followed by opening the Account Menu and click “Create new account” at the end. When doing this you are instructing Google Analytics that you want to create a brand new account for a new site.

Create Google Analytics Account #2

 

Next steps is also very straight forward. There are 3 required field to fill in and just make sure to fill them out according to your needs. For just a small site with only one web property this works out just fine.

Just make sure that you enter your site with or without the preceding www. in front under Website URL if you are using that. Something I’m not using on this site. That is all up to personal preference.

Below this there are some optional tick boxes regarding what you want to share with Google. It is completely safe to leave all four boxed checked. But then again, feel free to opt out of any given one.

Just click Get Tracking ID at the bottom and accept the Google Analytics Terms of Service and you’re good to go.

Google Analytics Tracking ID

 

You’ve got your unique Google Analytics Tracking ID, yay! Now, let’s start working on collecting that precious data of yours.

Note: The data above is for Universal Analytics, which is the kind of tracking variant you’d want if you’re installing something from scratch today. You can easily adapt the rest of this guide if you are using the traditional ga.js tracking code since before.


 

You might also like

Top 5 debugging tools for GA and GTM

Read more!

 

Hello Google Tag Manager

Up until Google Tag Manager arrived, webmasters had to implement the tracking code(s) on every page through out the CMS (like WordPress) and make sure that it showed the right tracking code on the right page at the right time.

All that changed with Google Tag Manager. Now we’ve got a new interface where we basically just install an empty script (container) on all pages on the site and then manage all scripts from within GTM asynchronously.

That. Is. Amazing.

In order to get this to work, just point your browser to the site for Google Tag Manager. Log in via your Google Account if you haven’t already and let’s get this data collection going.

Google Tag Manager - Create Account

Start by creating an account by clicking on CREATE ACCOUNT. An account in Google Tag Manager is a place where you can store everything related to a company, even if they have many sites. If you only have a few personal sites (webpages) you can name this basically anything. Like My Sites or something.

gtm-setup-new-account

I choose to name my account after the domain I’m going to track. Make sure to give this a unique name so that it’s easy identifiable when your account list grows.

When it comes to ticking the box to Share data anonymously with Google or not is once again a personal preference. I believe that if you don’t have that big international corporation you’re working for, demanding that you own all your data (in which case the free version of Google Analytics wouldn’t suffice) just go with your gut feeling. I tend to keep it selected. But it’s all up to you really.

gtm-setup-new-account-container

Next part is where we put in the actual site information.

For the Container Name part, make sure to name it after the site you are going to use it on. This makes it much easier finding what you are looking for when you have multiple accounts and containers.

Then select if your GTM container is to be used on either the “Web” (classic webpages, this is probably what you’re going for), iOS apps or Android apps.

Hit Create when done and bask in glory after creating your first Google Tag Manager container.

Yay, you’re getting good at this now!

Google Tag Manager Snippet Codes

On the following page you will be presented with the unique GTM ID for your container as well as code needed to implement the container on your site. But we are not there quite yet… so keep that code available for just a few more minutes.

Note: Your GTM ID will differ from mine. Make sure to use your own ID or you will not see any data further on.

Connect your Google Tag Manager Container with a Google Analytics Property

At this point we have one container in GTM and a Property in Google Analytics and it’s time connect the two. Don’t fret, it’s the easiest thing to do.

When you’re looking at your Container it’s rather empty before you start populate it with some data. Start by clicking on Tags -> New.

gtm-create-new-tag

This will give you the option to create a brand new tag inside Google Tag Manager that we are going to use to send data to Google Analytics with.

Click anywhere inside the box that says Tag Configuration and let’s get started.

Google Tag Manager Tag Templates

The first thing you have to select is what template you are going to use. In other words; where are you going to send your data? Since we’re about to send the data to Google Analytics using Universal Analytics, that’s the option we’re going for here.

When you have selected the Tag template, give the tag a name. You can use whatever naming convention you’d like here but my recommendation is to keep it consistent for your own sake in the future.

Since beginning of time (well, GTM-wise at least) I’ve given my standard pageview tags the following name: UA – Pageview

That shows me that the tag is connected to UA (Universal Analytics) and that I’m sending pageview data.

Google Tag Manager - Create Tag

Next step is to check back into Google Analytics and the property you created just before. Just copy the UA-XXXXXXX-Y and insert it into the Tracking ID field in GTM.

Once again, use your own unique identifier here, not mine. Your data will not show otherwise.

Leave Track Type to its default; Pageview.

Next, we need to tell Google Tag Manager when and where to fire this tag. Hence, click the Triggering section just below.

gtm-all-pages-trigger

You’ll se one default Trigger in this list named All Pages. Select this one and you’re done. You’ve just told Google Tag Manager to trigger this tag on every page where the GTM Container (snippet code) is present, which is going to be on every page on your site. Which leads us to…

Installing Google Tag Manager on WordPress

There are two ways of doing this and both are relatively straight forward and easy to implement.

Either we go with a WordPress Plugin or we insert the code in the template ourselves. Now what are the pros and cons of either of them?

Install Google Tag Manager via WordPress Plugin

  • + Easy to implement.
  • + Doesn’t change when updating theme.
  • + Gives additional custom functionality from plugin author.
  • – Dependent on third party for it to work.

What WordPress Plugin would I recommend for Google Tag Manager?

I’d go with DuracellTomi’s version since it works like a charm out of the box.

Google_Tag_Manager_for_WordPress_settings_‹_dcarlbom_com_—_WordPress

All you need to do is to install the Plugin from within the admin section of your WordPress site and then just insert your unique GTM ID that you created a few moments ago. If the Plugin doesn’t highlight exactly where to go, this is what you are looking for:

http://yourdomain.com/wp-admin/options-general.php?page=gtm4wp-settings

The next part is where it could get a bit tricky. Google recommends that you insert the GTM Container just after the opening <head> tag in the WordPress Theme Template.

The good part here is that the plugin nowadays actually tries to implement the code through a codeless injection which usually works as a charm. Try this option first and make sure that your frontend (your actual page in the browser) turns into a mess.

Google Tag Manager add WordPress code to page

If this for any reason doesn’t work, select the Custom option and to below changes to your template instead.

Select Custom in the options, copy the code below and then navigate to Appearance -> Editor.

Edit_Themes_‹_dcarlbom_com_—_WordPress

Don’t panic!

Somewhere on the right side under Templates you should find a file named header.php – that’s what you’re looking for. There is a chance that this file doesn’t exist in your template, in that case try looking for a file called main.php och perhaps index.php in that case.

Inside your header.php, find the opening <head> tag and insert your code just below that line of code.

NOTE: Your code will differ from mine, unless you are using the exact same theme and template as I am. What’s important is that you place the code just after the opening <head> tag.

Just save that and just like magic, you’ve now inserted the GTM Container on your WordPress site by using a WordPress Plugin.

Install Google Tag Manager without a plugin

If you’ve read the part about installing GTM with the WordPress plugin you already know what to do, but let’s have a look at the ups and downsides of this.

  • + Complete control over the implementation.
  • + Not dependent on any third party code/plugin.
  • – Still needs to be reinserted when changing or updating core template files.

The only thing that really differs is what kind of code you need to insert just after the opening <body tag in your header.php file.

Looking at the Admin -> Install GTM in Google Tag Manager you will see the exact snippet of code that needs to be implemented on your site.

The following code should be placed as high up as possible in the <head> of every page possible.

And the additional code that need to be added right after the opening <body> tag is as follows.

 

Google has as of September 2016 changed its recommendations as of where the Google Tag Manager tracking code should be placed. This means that part of your GTM tracking code should now be placed as close to the opening <head> tag as possible.

Publish your GTM Container

The last step in order to get data collection going is to publish the GTM Container you’ve setup in this guide. One of many strengths with Google Tag Manager is the possibility to keep every update separated in versions so that you always have the possibility to go back if something stops working after you’ve done an update.

Let’s publish that Container!

gtm-publish

Since this is your first version you’re creating, all you really need to do is press Publish in the top right corner. Give the container a descriptive name and just hit Publish one last time an you’re all set!

BAM! You’re live.

Congratulations. You have now successfully installed Google Tag Manager together with Universal Analytics on a WordPress site.

[Updated] In this article I will guide you through on how to make sure that we filter out the data we don’t want into Google Analytics by working with some dataLayers in GTM.

Tell your friends...Share on Facebook32Tweet about this on TwitterShare on Google+6Share on LinkedIn11