What is Google Tag Manager? Simply put, Google Tag Manager is a user-friendly solution that allows you to add and maintain HTML/JavaScript snippets that send data to third-parties, on your website or mobile app. Instead of adding multiple scripts on your site separately, Google Tag Manager provides a solution where you can add only one piece of code on the page which allows you to inject anything on the site. In a way, Google Tag Manager is like a library that allows you to do a lot more, in an easier way when it comes to tracking and sending data to popular platforms such as Google Analytics, Facebook, AdWords, DoubleClick and many others.
Once you have Google Tag Manager installed on your website, you have GTM’s main components to play around with:
1.Tags – they hold bits of code that would normally be placed on a webpage.
2.Triggers – they are linked to the tags and make the rules of when they are firing.
3.Variables – they are used within tags or triggers and can be customized.
4.Data Layer – custom information layer made available to GTM (usually dynamic data that is sourced from the back-end).
I hope by now you are convinced that Google Tag Manager(GTM) is a really handy tool, so I am going to go through the process of adding it to a WordPress website.
GTM can be added either via Plugin, or by modifying the WordPress installation. I will not go into too much details on how to add it via plugin, as it is quite straightforward. I will just mention Duracell Tomi’s GTM Plugin, which is a really good and widely used plugin when it comes to GTM.
The other way of implementing GTM requires you to get your hands dirty with a bit of code, but nothing too complicated. All that needs to be done is to modify the functions.php file. Alternative route to that would be using a Functionality plugin. If you click through to the article you would be able to see the benefits of it.
For the sake of this post I will go through modifying the functions.php file, but the code and examples would be applicable for the later as well.
So, to kick of with the implementation, lets take a look at what GTM’s code look like
The first bit, goes in the “head” tag and the second bit goes in your “body” tag.
In order to do that in WordPress, we will edit the functions.php file.
If you are interested what we will be changing in the grand scheme of things, the diagram below illustrates a top level picture of the WordPress architecture and the particular element we are adding functions in – functions.php
The diagram is courtesy of WordPress
Before we continue, here are some useful resources that are going to be used in the next few lines functions.php, header.php, add_action(), wp_head
What we will do is edit the functions.php and add the following code:
/* Add Google Tag Manager javascript code as close to
the opening <head> tag as possible
=====================================================*/
function my_custom_code1(){
?>
// Google Tag Manager
// Replace this lines with your code provided by google
// End Google Tag Manager
<?php
}
add_action( 'wp_head', 'my_custom_code1', 10 );
What that code would do is create a function “my_custom_code1” that holds the first bit of the GTM code. With the add_action function we are passing 3 parameters – the location where we are adding the code – “wp_head” (the “head” element), our new function and the last one – “10” determines the position within the “head”, where the smaller the number, the higher up in the “head” it is. Since Google suggests adding the first bit as high as possible in the “head”, that would make sure the code is where it should be.
Adding the second bit of code, after the “body” tag though, we have to go through a bit of a workaround, since the WordPress core does not provide a hook for injecting fucntions in the “body”. That would mean there is an additional step to carry before we add the second bit of code for the Google Tag Manager.
Firstly, open your header.php file and there you should see something like this:
<body <?php body_class(); ?>> <div id="bodyContainer">
In there, add the following:
<body <?php body_class(); ?>> <?php body_top(); ?> <div id="bodyContainer">
Once we have the “body_top()” function added, the last step is to replicate the same logic from step one, but for the “noscript” bit of GTM’s code.
/* Add Google Tag Manager noscript code immediately after
the opening <body> tag
========================================================*/
function my_custom_code2(){
?>
// Google Tag Manager (noscript)
// Replace this lines with your code provided by google
// End Google Tag Manager (noscript)
<?php
}
add_action( 'body_top', 'my_custom_code2' );
Here is what you should have in your functions.php file (full example)
/* Add Google Tag Manager javascript code as close to
the opening <head> tag as possible
=====================================================*/
function my_custom_code1(){
?>
<!-- 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-XXXX');</script>
<!-- End Google Tag Manager -->
<?php
}
add_action( 'wp_head', 'my_custom_code1', 10 );
/* Add Google Tag Manager noscript codeimmediately after
the opening <body> tag
========================================================*/
function my_custom_code2(){
?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
}
add_action( 'body_top', 'my_custom_code2' );
And that is it. That is how you add your Google Tag Manager script on a WordPress website.
If you have any questions or feedback, please post a comment below 🙂
Share this Post
