Traditionally, if you wanted to install Google Analytics or a conversion pixel you would have to send it to your developer or IT department and watch the clock. With the arrival of tag management systems, this sort of reliance on developers has become a thing of the past.
Tag management systems such as Google Tag Manager allow marketers to quickly deploy and manage a wide range of tracking pixels, code snippets and more.
In this article, I will walk you through how to both install Google Tag Manager on your website and how to use Google Analytics via GTM.
Getting started with Google Tag Manager
To get started, head over to Google Tag Manager and log in with your Google account.
Once logged in, you can create your account and first container.
At this point, it may be useful to quickly explain what a ‘container’ is in relation to Google Tag Manager.
A container is the snippet of code that holds all of your tags, triggers and variables (more on these to come). You typically have 1 container per site and it sits on every page.
Creating your account
To set up your account, simply add the name of your company/website into the ‘account’ name field. Once you have done this, you will need to enter your container name, which is typically the URL of your website. For this scenario, you will want to select ‘Web’ under ‘Where to Use Container’.
With your account and container setup, you can now hit create to move on to installing the tracking code.
Installing the tracking code
Once you land on your Google Tag Manager dashboard, you will be greeted by two boxes of code and some installation instructions. You are looking at the code that makes the magic happen, let’s look at how you can place this on your site.
Firstly, you need to add the initial section of code as high in the <head> of your site as possible. Additionally, you need to paste the second piece of code after the opening <body> tag.
If you use WordPress you have a few options to get this done.
Methods to install Google Tag Manager
1) Edit your WordPress Theme files
If you use a standard WordPress theme, you can most likely access your <head> via your header.php file.
There are two ways that you can normally locate this file, either by using an FTP client or editing the files through the backend of WordPress.
Let’s run through how to do this:
Using an FTP client
If you use an FTP client like FileZilla, then you can navigate to your wp-content/themes folder and open up the header.php file.
You should see something like this.
Once open, you should see both your <head> and <body> tags.
All you need to do now is add the installation code to the relevant areas and you are done!
Something to note is that if a theme receives an update, the header.php could be overwritten. For this reason, it is advisable to create a child theme when modifying these sorts of files.
Here’s a guide to creating a child theme for your site if you would like to have a crack at it.
Using the WordPress editor
If you don’t have an FTP client setup, fear not, you can still get GTM installed.
Navigate to Appearance > Editor in your WordPress menu. Once you are in the editor, you should see all of your theme files listed on the right-hand side of the screen under templates.
Find your theme’s header.php and click on it.
You should now see the file content open up in the box, in the middle of the screen.
Add your code into the instructed areas to finishing installing Google Tag Manager.
An important note on editing code
Be careful when editing any files that are in your WordPress installation. PHP files don’t play nicely if you input something that disrupts the execution of the PHP code.
It will normally cause an error that will prevent any information being sent to the browser, which in most cases will show as a blank, white screen. If your site has debugging enabled, you might see an error message when this happens.
Just be careful if you are not comfortable editing code. Ideally, I recommend that you use a code editor with syntax highlighting such as sublime text, as opposed to the WordPress editor.
2) Use a plugin
If you aren’t too keen on modifying your site files, don’t worry – you can use a trusty plugin to get the job done.
There are a few plugins out there that you can use to get Google Tag Manager up and running, but I personally like to use ‘DuracellTomi’s Google Tag Manager for WordPress‘.
Not only does this plugin allow you to install Google Tag Manager, but it also gives you options to enable eCommerce tracking, setup Google Optimize and it also creates a dataLayer for you.
Things couldn’t be simpler with DuracellTomi’s plugin. Once installed, navigate to settings > Google Tag Manager and you will be greeted with the following menu.
After you have entered your Google Tag Manger ID, you are met with the options for ‘Container code placement’.
The four options are as follows:
1) Footer of the page
2) Custom
3) Codeless injection
4) Off
The easiest method
I recommend that if you are not comfortable editing any of your site files, you choose the ‘Footer of the page’ option.
Whilst not the recommended way to install by Google, it will get you up-and-running without having to get your hands dirty. However, if you use ‘Google Tag Assistant’ you will most likely see an error about unorthodox installation.
The recommended method
If you don’t mind making a quick edit to your WordPress files then I recommend that you go ahead with the ‘custom’ option. This method will install Google Tag Manager as recommended by Google but will require you to add a line of PHP just after your opening <body> tag.
To do this, you will need to open your header.php file and input the following code after the <body> tag:
<?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>3) Use Hooks
If you are a Genesis framework user (like myself) then you can use hooks to install Google Tag Manager.
To add the installation code into the <head> of your site add the following to your functions.php.
// Add GTM in the head
add_action( 'wp_head', 'gtm_head_code' );
function gtm_head_code() { ?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<?php }
Additionally, add this code into your functions.php.
// Add GTM to the body
add_action( 'genesis_before', 'gtm_body_code' );
function gtm_body_code() { ?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php }Adding Google Analytics to Google Tag Manager
Congratulations! You now have Google Tag Manager installed.
But having a tag manager with no tags isn’t much use to anyone, let’s fix that and get some set up!
With GTM now installed, one of the first things you should do is set up your Google Analytics tracking code via Google Tag Manager.
If you already have Google Analytics installed
If you have Google Analytics already installed in a conventional way (with your tracking code in the <head> of every page), then you will need to remove it after you have set up Google Analytics tracking via Google Tag Manager.
This is an important step to carry out, as duplicate Google Analytics tags can cause your account to report incorrect bounce rate data.
Steps to Add Google Analytics tracking
1) Add the Google Analytics Base Tag
To get started, click on the ‘New Tag’ box in the overview section of your ‘workspace’.
Once the tag tab has slid out from the right-hand side of the screen, you will see a ‘Tag’ Configuration box, click it.
Next, choose the ‘Universal Analytics’ item from the tag type menu.
Now that we have selected the Universal Analytics tag it is time to configure it.
2) Save your Google Analytics Tracking ID as a variable
In the ‘Track Type’ drop-down menu, choose the ‘Pageview’ option. This ‘Pageview’ option does what it says on the tin, it sends a ‘Pageview’ hit to Google Analytics.
Next, we have to link up your GA tracking ID to the tag, select ‘New Variable’ to continue the setup.
A quick note on variables in Google Tag Manager
If you are new to Google Tag Manager, variables can be tricky to get your head around, but they are essential to get the most from the tool. Simply explained, a variable in GTM allows you to pair a value with a name which can then be reused.
In this case, it will allow us to assign our Google Analytics tracking ID ( the value) to a name (GA-ID) which we can then use throughout our tags. The power of storing our Google Analytics tracking ID as a variable is flexibility.
If we used our GA tracking code in 10 places and then needed to update it, we can just change the variable value and all 10 places will update. In other words, the changes are universally applied.
Configuring the variable
Once you have clicked on ‘New Variable’ you will be taken to the ‘Variable Configuration’ tab.
Leave the ‘Variable type’ as ‘Google Analytics settings’ and enter your Google Analytics tracking ID into the ‘Tracking ID’ section.
To find your tracking ID, head over to the admin area in your Google Analytics account. Once there, go to the property, click Tracking Info > Tracking Code. You will then see your tracking code at the top of the page.
Finally, name the variable as GA-ID and hit save in the top right-hand corner.
3) Add the page view trigger
The final step in setting up your Google Analytics base tag is to add a ‘trigger’.
A ‘trigger’ in Google Tag Manager is a condition that will cause the respective tag to fire.
You will find the ‘trigger box’, below the ‘tag configuration box’, click it to add a ‘trigger’.
In a typical setup, you will want your Google Analytics tracking to run on all of your pages. So to do this we need to select the ‘All Pages’ trigger.
With the tag now set to fire on all pages, we can name the tag and save it.
Tag naming conventions
When naming tags, it is best to use a consistent naming convention to keep your account organised. I like to use the following rules for tags:
{Tag vendor} – { Tag description}
So, in this case, I would save this tag as ‘GA – Base Tag’.
Test your tracking
With Google Tag Manager installed and GA tracking set up, you may think that you can publish your container.
Not so fast.
As tempting as it may be to set things up and then publish them straight away, it can often result in misconfigured tags being deployed.
To avoid ending up scratching your head over why you have no GA data, always take a few minutes to debug your tags.
Using Preview mode
The first thing to do before you think about clicking the publish button is to activate preview mode.
Preview mode allows you to see which tags are firing when your page loads and also when certain events occur, like when a button is pressed.
On top of that, preview mode gives you in-depth information about the contents of a tag and also into more advanced areas like the dataLayer.
To activate preview mode, click the ‘preview’ button next to the ‘submit’ button in the top right-hand corner of the screen.
Now that preview mode is activated you can visit your site to check if your tags are firing as expected. Once you have visited your page, you will see a debug panel pop up from the bottom of the browser window.
Inside the preview panel, you will see ‘Tags Fired On This Page’. Underneath this heading will be all of the tags that have been fired on page load.
If you have set up everything up correctly, you should then see your GA – Base Tag.
Using Google Tag Assistant
Google Tag Assistant is a must have chrome extension in my book. This handy tool allows you to view all Google tags that are being fired by Google Tag Manager.
On top of that, it gives you the status of Google-based tags, this is invaluable when debugging tags.
Once you have downloaded Google Tag Assistant, you will see a little icon in your extension bar.
Click on the Google Tag Assistant icon and press enable. You will now need to refresh the page. After you refresh the page, you will see the various Google tags that have been loaded along with their status.
Publishing your tags
Now that you have confirmed your tags are firing as expected, it’s time to publish your container.
Click the submit button in the top right-hand corner of the interface to begin publishing your container.g
Filling out version control fields
In the version name field, enter a name that represents the changes you have just made. In this instance, you will want to name it something like ‘GA Base tag set up’.
Additionally, enter a brief description of the changes you have made into the description box.
Both of these fields are optional, but it is always worth filling these in as it makes your GTM account much easier to work with. On top of that, having containers’ versions and descriptions filled out can help with debugging if any issues occur with your setup.
To get things wrapped up, press the publish button and sit back while your container goes live.
Conclusion
Using a tag management system like Google Tag Manager is must have tool in any marketers arsenal.
Setting up Google Analytics through Google Tag Manager is just the tip of the iceberg when it comes to using GTM.
Has using Google Tag Manager improved your workflow? Let me know in the comments below!