Adding code snippets to your WordPress blog or website is a real pain!
You have to keep editing your template files to add different code snippets (tags), be that for web analytics, advertising pixels, e-commerce, or other marketing tags.
Wouldn’t it be easier to add a single code snippet once and it handles all such needs for several tags that you need to add or update in future?
It might be slightly less known to those of us who aren’t pro-marketers but there’s a fairly new tool from Google that lets you handle all the codes and tags that you need to include into your website.
Google Tag Manager lets you easily add all code snippets such as analytics, PPC etc. to your website. The best part is that you can add/remove or update your codes from a central platform by just adding the tag once to your website.
Tag managers are becoming increasingly popular and marketers find them really useful. An Econsultancy study reveals that 73% of marketers using a tag management system found that it speeds up their ability to run marketing campaigns, with 42% describing the process as “significantly faster.”
In addition to easy tags management, one added benefit I want to point out before jumping into the complete details is that use of tag managers can help you significantly improve your page load time.
Tag Managers can be configured to fire only when they are needed on a page, and as they load asynchronously, it can help with your page speed.
In this tutorial, I will walk you through the steps of adding a popular tags management tool – Google Tag Manager to your WordPress website in a few different ways.
First, I will briefly explain what Google Tag Manager is, and why it can be helpful to invest some time in setting it up for your website.
I will then continue with detailed instructions to add it to your WordPress website and make sure it’s up and working perfectly. You can directly skip to the instructions section using this link or other sections of your interest using Table of Contents.
Table of Contents
- What is Google Tag Manager?
- How Google Tag Manager Works
- Why use Google Tag Manager?
- Setting up Google Tag Manager Account
- Installing Google Tag Manager on your Website
- Preview and Debug Google Tag Manager Installation
- Adding Google Analytics with Google Tag Manager
- Beyond the Basics of Adding Tag Manager
What is Google Tag Manager?
Marketing is getting more and more sophisticated. Along with several other new marketing technologies, one that has seen a massive growth in last years is the Tag Management space.
“Tags” help marketers to collect insightful data about their website audience and ultimately help webmasters and marketers to better understand and serve their audience.
A large site might need more than twenty tags to implement different marketing technologies. Adding and updating codes for those tags take a lot of time and a poor implementation can often slow down your website.
Besides, if you aren’t technical you might need to wait until the technical person gets time to deploy those required marketing tags. This can delay your data collection and there are chances that it can be poorly implemented, not how and when you wanted.
There are simply so many tags that we might need to add to our websites depending on our needs. With Google alone, there are tags for AdWords, DoubleClick, Google Analytics, AdSense, and so on.
Google Tag Manager helps you tackle those problems of adding marketing technology tags by making the process quick and easy with a central platform where you can add/update tags and control everything.
The best part of Google Tag Manager is that it's completely free and it allows you to add all Google and other third-party tags.
We can add all the codes on our website with a single container code snippet from Google Tag Manager by adding it once in our template file.
How Google Tag Manager Works
Getting deep into Google Tag Manager can make it rather complicated as there’s more to the technical and advanced marketing part. So, I will try and keep it fairly basic and easy to understand for everyone.
To understand how it works – Google Tag Manager uses one code snippet called container that you need to add manually or by use of a plugin to our website.
Once you add the container code, you will need to use Triggers and Variables to control when and where your tags are fired on your website. Triggers and Variables act as rules and conditions that can be defined on the central tag manager platform.
Google Tag Manager comes with built-in tags such as Google Analytics tags but as I mentioned earlier you can add any other third party tags.
We continue using the Google Tag Manager as a central platform to further define and update when and where certain tags should fire by attaching different triggers to them.
Here’s an introductory video with basic concepts behind Google Tag Manager and how marketers can benefit from it.
As you can see in the above video, there’s also the Mobile part of it that makes use of Google Tag Manager SDK to integrate into apps. But here we are only concerned about the web part as we need to add it to our WordPress website.
Why use Google Tag Manager?
The benefits should have been apparent to you already with the problems and solutions discussed above.
To outline the few major benefits of using Google Tag Manager,
- Making it quick and easy to add several marketing technology Tags through a central platform (for a non-technical person and with marketers in mind).
- Making the marketing process agile with no time wasted to add any Tags (no longer necessary to wait for your Tech person or department for tags implementation.)
- Quick insights to see if the tags are implemented properly and are working as required.
- Ability to add all Google and other Third-party tags
- Improves your page load time by firing only required tags on a particular page
- Increased performance as your codes execute asynchronously helping your pages to load faster
Setting up Google Tag Manager Account
The first thing you need to do is setup an account on Google Tag Manager. Creating an account is fairly easy and if you have used other Google services such as Google Analytics before, you can even relate to the accounts structure.
Under Account Name, you can use your company name and you can setup the container under your website name (where you will install the tags).
Choose from Web or iOS Android depending on where you want to install the tags. As we are going to add it to our website, we will choose Web.
Once you agree to Google Tag Manager Terms and Conditions, you will be presented with a code that you should now add to your website.
Installing Google Tag Manager on your Website
Google has an easy getting started guide that can help you for all simple and complex implementations.
We will need to add the Tag Manager Code immediately after the opening <body> tag in your header. Here’s what the sample code of Google Tag Manager should look like.
Make sure you are replacing two instances of GTM-XXXX with your container ID if you are copying the code above.
If you didn’t manage to copy the code when it was displayed for the first time, you could always get the code for your website by clicking on the GTM-XXXX just besides your container name in the dashboard.
Adding Google Tag Manager Code to WordPress Theme
If you are comfortable with codes and editing your theme, you can insert the code in your Theme Header (header.php) file in WordPress. I will not show you how to do this in details because if you are comfortable editing your code you already know how and where to make edits.
- Use Child Theme of your Template if possible
- Edit Theme Header (header.php) file and add the above code immediately after the opening body tag.
- Don't forget to add the code again when you change the theme, if you aren't using a child theme.
See the below screenshot for reference. Please, backup your header.php file and always you a code editor to make any edits locally.
Add Google Tag Manager Code WordPress Plugin
Adding a plugin is the easiest way to add Google Tag Manager to WordPress websites. You can directly install the DuracellTomi's Google Tag Manager for WordPress.
Instructions Installing Google Tag Manager WordPress Plugin
- From your dashboard, Go to Plugins > Add New
- Search for Google Tag Manager and install the DuracellTomi's Google Tag Manager plugin
- After you activate the plugin, it will ask you to fill in your Google Tag Manager ID.
- Copy your Google Tag Manager ID code that is just next to your container name (GTM-XXXXX) in Google Tag Manager Dashboard and paste it in the settings page of the plugin (Settings > Google Tag Manager).
- Save Changes and you should now have Google Tag Manager installed on your website!
But, there’s one problem with this approach.
The plugin places your Google Tag Manager code on the footer of your WordPress website by default. Although this doesn’t require you to make any tweaks to your template, it’s not a recommended practice by Google.
Google recommends placing the code just after the opening body tag (<body>) in your template. Even after installing the plugin, you will need to add the below code in your header.php file for proper implementation.
Again to remind you, only do this if you are comfortable editing your template files.
Choose Custom option under Container code placement settings and add the below line of code after your opening <body> tag.
So, you might ask why install the plugin in the first place? – It makes it easy to somehow add the code. And importantly the plugin is experimenting with right placement that you can try under the Codeless injection settings, but you still have the warning that it’s an experimental feature, and it could break your frontend.
And importantly, the plugin is experimenting with right placement that you can try under the Codeless injection settings, but you still have the warning that it’s an experimental feature, and it could break your website.
Additionally, you have additional options to configure for triggers and variables that you can define for WordPress websites from within the plugin. The plugin also adds some powerful options and integrations with popular plugins such as contact form and WooCommerce.
Google Tag Manager for Genesis Websites
If you use the Genesis Framework for your WordPress theme like this website, it can be even simpler to add without using any plugins.
Genesis has several hooks where we can insert the Google Tag Manager code snippet directly.
Editing Genesis Child Theme Template
If you are using Genesis Framework, then you are indeed using a child theme. We will add the Google Tag Manager code to the functions.php file of your child theme.
Again, you will need to be comfortable editing codes/theme files to add it using this method.
Go to the functions.php file of your Genesis child theme (Use an FTP program to open the file preferably in a code editor like Atom).
Use the Google Tag Manager code from previous installation steps to add it to the code below and insert the final code to your functions.php file.
Installing Genesis Hooks Plugin
If you are not comfortable editing the code and writing functions of your own, you can use the Genesis Simple Hooks plugin from StudioPress that provides easy to use interface for modifying your Genesis theme via the hook system.
The plugin provides you with a settings page that you can use to insert your Google Tag Manager code by attaching it to the right action hook.
- Install and activate the Genesis Simple Hooks plugin
- From your Dashboard, go to Genesis > Simple Hooks
- Find the genesis_before Hook that executes immediately after the opening body <body> tag.
- Paste your Google Tag Manager code in the box (see screenshot below for reference) and save changes.
Preview and Debug Google Tag Manager Installation
Now that you have added the Google Tag Manager code on your website, you can check to see if it has been implemented properly and if the tags are firing on your page.
Publish your Google Tags Container
The first thing you need to do is go ahead and publish your container (if you haven’t done so already). We will learn how to add tags to our container once we verify the container tag is working properly.
You can now use the Preview mode of Google Tag Manager by simply clicking on Preview Button.
After activating the preview mode, you can debug the version by directly visiting your website. You should see a Google Tag Manager bar below your website when you are in a Preview mode of Google Tag Manager.
This can help you verify and check for problems before you publish your tags.
Test Installation of Google Tags with Tag Assistant
Google has another tool called Google Tag Assistant that helps us verify if the tags are installed correctly on the page.
You will need to install the Tag Assistant (by Google) Chrome extension. Watch the official video below to see how it works in details.
Basically, once you install the chrome extension you will be able to see if the Google Tag Manager code is firing on your page. The Tag Assistant icon on your extensions bar will turn green and show you the number of tags deployed on page.
You should see a green tag assistant icon with 1 tag when you haven’t got anything installed apart from Google Tag Manager code.
Adding Google Analytics with Google Tag Manager
Okay, so let’s move on to making real use of Google Tag Manager. You can now add hundreds of tags using the Google Tag Manager interface.
To display an example of Google Tag Manager, we will look at adding one of the most popular tag seen on websites – Google Analytics tag.
If you haven’t got Google Analytics code for your website, go and add a new account for your website on Google Analytics. Setting up a new account for your website is really easy (see the screenshot below).
Go to Google Analytics, sign in with your Google Account, and set up your account by filling your Account Name and add your Website name and URL to add your property.
Getting Tracking ID for Google Analytics
Fill in the details and click on “Get Tracking ID” at the end of the page. Once you agree to terms and conditions, you will be taken on to a page with tracking ID of your property.
Copy the Tracking ID (see underlined ID above)
If you have already setup a Google Analytics account, you can find your tracking ID by navigating to Admin → Property → Property Settings or in Admin → Tracking Info → Tracking Code.
Getting back to the Google Tag Manager platform, let’s add the Google Analytics tag to our Tag Manager container.
Steps to add Google Analytics to Tag Manager
Click on “Add New Tag” from your Google Tags Manager container dashboard.
You will now see several products that Tag Manager has made it easy to add tags.
Step 1: Choose Google Analytics from the list of the products and click on Continue.
Step 2: Select the latest Universal Analytics under Tag Type.
Step 3: Paste your Tracking ID for your website and choose Page View under Track Type. Click on Continue.
Step 4: Choose All Pages for the tag to be fired and finally click on Create Tag.
See the screenshot below for all the steps.
You will need to name your tag and finally save it.
Now that you have setup a new tag, you can go ahead and preview the tag on your website.
Click on Publish on the right end to push the changes live if the tag is firing properly.
You should finally see a success message with your live changes.
That’s all you need to do to add the Google Analytics code to your Google Tag Manager.
Note for slightly advanced users: In Step 3, instead of directly pasting the Tracking ID, you can just select a Variable by defining one with a value of your Analytics Tracking ID.
To create a new variable called gaProperty (go to Variables > Add New) and add your Tracking ID as value to that variable (see screenshot below).
The advantage of using variables as such is that if you are looking to create multiple tags, you can simply select the gaProperty variable (or any other variable you create) instead having to manually include it each time. It can also save you time in case you have to change your Google Analytics property and use a different ID.
You can now use the Google Tag Assistant extension again to test if the Google Analytics tag is firing on the page. As you can see in the screenshot below, the tag assistant icon shows 2 tags on the page.
Note: The Chrome extension sometimes can be buggy and tell you that you haven't placed the tags right way. Make the right placement and don't worry much about the issue as I can see several other users reporting some problem with the extension. As you can see, the above screenshot initially shows I haven't placed the Google Analytics tag the recommended way. After refreshing it few times, it all turned green!
You can now continue adding other tags that you need for your website such as Google Adwords, Facebook pixels, etc. to your Google Tag container.
Beyond the Basics of Adding Tag Manager
This tutorial simply introduces you to the Tag Manager tool and enables you to add few universal codes such as Google Analytics to your website.
Google Tag Manager and its application on web and mobile, however, is a sophisticated topic and there’s so much to learn about advanced marketing topics.
If you are interested in exploring more, I would like to recommend few courses and resources that can help you further your learning.
- Google Tag Manager Fundamentals – Best basic course to get started with Google Tag Manager, officially available for Free from Google.
- Understanding Google Tag Manager (GTM) on Lynda.com that cover the topic in details.
- Search for recorded webinars and other free videos available on Google Analytics' YouTube channel.
Google Tag Manager is a really useful tool for marketers and webmasters. If you are using several codes on your website, you should make an effort to learn and install the codes. Best of all, it's free to use and I am sure it will be worth using it.
Did you manage to add Google Tag Manager and Google Analytics tag to your WordPress website? Let me know if you found the tutorial helpful.