The Google Tag Manager (or GTM) is the best way to include scripts in your WordPress installation. From one location, you can add, change and remove scripts without touching your site. And it does a lot more. You can control when and where your code fires, on what kinds of events you want it to track and activate, and a lot, lot more.
You can save yourself a ton of future headaches and maintenance by using GTM. However, the first step is to install GTM itself. This tutorial will show you how to do this without using a plugin. We also covered Google Adsense Integration with WordPress and Google Analytics integration previously. Almost every site on the Internet will tell you to use a WordPress plugin to get the job done. However, if you’re the kind of person who likes to keep their plugin usage down to a minimum, this tutorial is for you! I’ll be covering two things:
- Setting up an account with Google Tag Manager
- Inserting the two snippets of GTM code
So let’s get started!
Step 1: Creating a New Google Tag Manager Account
Visit the GTM dashboard at https://tagmanager.google.com, and sign in. If you’ve already used Google Tag Manager before, this is where you’ll see a consolidated view of your accounts. We’re going to create a new account for our website – and I’ll be using my own test site as a guinea pig. Click “Create Account” as shown here:
Here, you’ll need to enter your account details. Give it a name that you can recognize from amongst a bunch of others. Since this is a testing account for me, I give it the name “Testing Site”. Select your country from the drop-down box, choose whether or not you want to share data anonymously, and click “Continue”:
This is where you enter your site name. The name of the site will have to be the same on which you plan to include the GTM code for this account. Don’t use “http” or “https” to qualify your site name. Just start it with “www”, otherwise, it’ll throw an error. Remove any trailing slashes as well.
This is also when you choose where you want GTM to track your site. You can choose between several applications like the “Web”, “Android”, “AMP” etc. Since this tutorial is for installation on WordPress, I’m going to select “Web” and click “Create”:
This will bring you to a Terms and Conditions page that flies out from the right-hand side. Just click “Yes” on the top right, and tick the checkbox at the bottom:
Once you’re done with the legalese, you’re given the code to insert into your website:
It’s important to note that these are two separate pieces of code:
- The first one goes into the “<head>” tag of your site
- The second one goes into the “<body>” tag
Ideally, both need to be placed as high as possible in their respective tags. Of course, every piece of code demands insertion into as high a position as possible. But relax – even if it’s not the very first snippet in the head or the body, nothing’s going to happen. It’ll work just fine. However, we really should try and put it as high as possible without compromising our site or our functionality.
Step 2: Inserting the Both Pieces of Code in the WordPress <head> and <body>
Since we want to do this without using any plugins, we’re going to have to add code to our functions.php file located in our theme, or in some other location where we place our custom PHP code.
Most sites will tell you to modify your theme’s header.php in order to insert the code. While that’s a possibility, there are two problems.
First, the advice will vary from one theme to the other. While there’s a general theme structure, not all themes work the same way. So giving advice about modifying your files in a theme specific way is dangerous.
The second problem is that whenever your theme updates, it will erase the changes you make. This is where you need to create a child theme and prevent that from happening. Even inserting code directly in your theme’s functions.php has the same problem. For this reason, I suggest having an external source or plugin for all your WordPress PHP modifications. This way, you don’t need to create a child theme. But you should anyway!
I strongly recommend that you use a child theme for changes to functions.php. If you don’t, your edits will simply be wiped out the next time your theme updates. Creating a child theme itself is beyond the scope of this article, but there are plenty of excellent tutorials out there that will guide you through it.
In the WordPress dashboard, go to Appearance -> Editor as shown here:
This will bring up a list of theme files on the right-hand side. Scroll down till you find “functions.php”. Click it, and this will open it up for editing in the text area. Now paste the following into it at the very bottom:
function add_gtm_to_head() {
$google_head_script = <<<EOD
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
EOD;
echo $google_head_script;
}
add_action('wp_head', 'add_gtm_to_head');
function add_gtm_to_body( $classes ) {
$block = <<<EOD
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
EOD;
$classes[] = '">' . $block . '<br style="display:none';
return $classes;
}
add_filter( 'body_class', 'add_gtm_to_body', 10000 );Replace the first block in bold with the first piece of code from Step 1 that is to be inserted into the <head>. Replace the second block in bold with the snippet that is to go into the <body>. These two functions tap into the “wp_head”, and the “body_class” action hooks to insert the code into the appropriate places.
Save your changes and you’re done!
Step 3: Testing the Google Tag Manager
To see if our insertions have taken effect, click “OK” in the screen within Google Tag Manager that displayed the code. This will take you to the GTM dashboard. Now click the “Preview” button on the top right:
This will show an orange bar indicating that it’s in “Debug” or “Preview” mode. Now open a page of your site in a new tab. You should see a pop-up bar at the bottom belonging to Google Tag Manager. And on the right-hand side, you should see your GTM number as shown here:
If you see that image and your Google Tag Manager number, it means that you have successfully integrated Google Tag Manager into your WordPress site. And without using a single plugin to do so!
2 Responses
Hi bhagwa
Please tell me what are benefits of it in SEO and I will very happy to visit your website
Very helpful, thanks Bhagwad!