How to install Google Tag Manager on your WordPress Website

Table of Contents for How to install Google Tag Manager on your WordPress Website

  1. Implement GTM on WordPress Manually
  2. Implement GTM on WordPress Using Plugins


In this article, I will show you how to correctly install Google Tag Manager on your WordPress website in three different ways.

Implement GTM on WordPress manually

The first way to implement Google Tag Manager on a WordPress website is by manually adding the code.

Follow the below steps to know more:

Step-1: Understand what Google Tag Manager really is. In a nutshell, it is a free online tool that is used to deploy and manage various tags on your website. Google Tag Manager (GTM) is not the same as Google Analytics’ (GA). So Google Analytics is not automatically installed on your website just because you installed GTM.

Step-2: Get ‘Admin’ access to the WordPress website where you want to install GTM.

Step-3: Login to your WordPress Admin panel and then navigate to ‘Appearance’ > ‘Editor’:

Note: If the WordPress Appearance Editor option is missing then it means either you do not have the ‘admin’ access or because of some security settings, the option is hidden.

Google Tag Manager

Get the E-Book (100 Pages)

Get the E-Book (62 Pages)

Step-4: Look at the various template files on the right-hand side to get an idea of what is available to you in your website theme:

A WordPress theme is made up of several template files like header.php, footer.php, sidebar.php, functions.php, etc. All of these template files work together to create your website design and functionality.

The template files make customization possible on your WordPress website. The more template files your theme has got, the more customization you can do on your website.

The name and number of template files vary from theme to theme. So some themes may have a ‘header.php’ file and some themes may not have any such file. It is also possible that some themes refer to the ‘header.php’ file by some other file name. 

In some themes, it is possible to add a code both in the head and body section of an HTML document via headers.php file while in some other themes it may not possible to add any code in the body section of an HTML document via header.php. It all depends upon how your theme has been coded.

That’s is why it is important that before you add/edit any code to your WordPress website, get familiar with your theme template files especially the template file which is responsible for generating headers and navigation on your website.

In most cases, the WordPress template file which generates headers and navigation is named ‘header.php’. Through this file you can make changes to the head section (<head>…..</head>) of each web page on your website.

In many themes, this file also lets you add code immediately after the opening body tag (<body>).

If you are using a WordPress theme framework (like Genesis) then most likely you use two themes instead of one.

These two themes are called the parent theme and the child themeThe parent theme contains all of your website’s core functionality. The child theme inherits its functionality from the parent theme and is used to add custom styling options.

Use the child theme to do whatever customization you want to do (like adding the GTM container code) on your website. Leave the parent theme intact.

The advantage of using a WordPress theme framework is that you can easily update your theme without the risk of losing custom styling. Your customization won’t automatically disappear with the next WordPress upgrade.

To learn more about how and which template files work together to create your WordPress website design and functionality, read this article: Understanding WordPress Website Architecture

Step-5: Find the name and location of the template file through which you can add a piece of code in the head section (<head>…</head>) of each web page on your website. Most likely it will be the ‘header.php’ template file. But it could also be something else.

Step-6: Find the name and location of the template file through which you can add a piece of code immediately after the opening body tag (<body>). Most likely it will be the ‘header.php’ template file. But it could also be something else.

For example, if you use the Genesis framework, as I do, then there is no easy way to add a piece of code immediately after the opening body tag. So I asked my child theme developer to provide me with a way to add a code immediately after the opening body tag.  He created the function “_genesis_before_js_callback” in the functions.php file and then asked me to add my code there:

_genesis_before_js_callback(){

/*

* Add your custom js code here;

*/

?>

<script> </script>

<?php

}

You may need to come up with such a workaround. Your theme developer can help here.

Note: If for some reason you cannot find the name and location of the template files through which you can add a piece of code in the head section (<head>…</head>) and a piece of code immediately after the opening body tag (<body>) on each page of your website then contact your theme developer.

Step-8: Navigate to https://tagmanager.google.com and then log in using your Google username and password.

Step-9: Click on the ‘Create Account’ link:

Step-10: Enter your account name (you can use your company name as the account name) and then click on the ‘Continue’ button:

Step-11: Now click on the drop-down under ‘Country’ and select your country.

Step-12: Add the container name under ‘Container setup’ and select the container type. Then click on ‘Create’.

Step-13: Accept the Google Tag Manager Terms of Service Agreement by clicking the checkbox and then the ‘Yes’ button.

You will then see the Google Tag Manager installation code:

This code is made up of two parts. The first part goes into the head section of your web pages and the second part goes into the body section.

NoteIf you already have a GTM account then just click on the container ID to see the GTM installation code:

Step-14: Copy the first part of the GTM installation code. You can do this by clicking on the ‘Copy’ icon, like below.

Paste it as high as possible, in the head section (<head>..</head>) of your header.php (or some other equivalent template file) via your WordPress admin panel:

Note: Take a backup of your theme template file before you make changes to it. So if something goes wrong, you can easily revert back to the last known good configuration.

Step-15: Click on the ‘Update File’ button to save the changes made to your theme file.

Step-16: Copy the second part of the GTM installation code:

Paste it in the template file which allows you to add the code immediately after the opening body tag (<body>):

Note: Take a backup of your theme template file before you make changes to it. So if something goes wrong, you can easily revert back to the last known good configuration.

Step-17: Click on the ‘Update File’ button to save the changes made to your theme file.

Step-18: Navigate back to your GTM account and then click on the ‘Submit’ button:

Step-19: Enter the version name and then click on the ‘Publish’ button to publish your container:

Step-20: Click on the ‘Workspace’ link (in the top navigation) and then click on the ‘Preview’ button:

It will open a new window, provide any URL of your website and click on ‘Start’.

Step-21: Another tab with the URL you have specified will open. Now navigate back to the GTM preview window. You should now see the below screen with a ‘Google container found’ notification along with the GTM container ID.

If you see the preview window with the above notification, then it means the Google Tag Manager is installed on your website.

It is important to remember that at this stage you have not yet installed Google Analytics on your website. You have installed only the GTM container tag on your website. 

To order to install Google Analytics on your website, you would first need to create a tag in GTM which fires Google Analytics pageview on all the pages of your website. Then you would need to preview and publish your container.

That’s how you can install Google Tag Manager on your WordPress website using the manual method.

To learn more about how to install Google Analytics on your website via GTM, check the section ‘Setting up Google Analytics via Google Tag Manager’ of the article ‘Google Tag Manager Implementation & deployment Guide

Implement GTM on WordPress Using Plugins

I am not a big fan of using plugins and use them only when it is absolutely necessary.

The biggest downside of using a plugin is the lack of control over the code, placed on your website by the plugin. Another minor issue is that the use of plugins negatively impacts your WordPress website speed. So I try to minimize the use of plugins, wherever I can.

You can also install GTM on your WordPress website via a plugin. But you may still need to make some code changes in your WordPress template file(s).  

The advantage of using a plugin is that you can take advantage of the added functionality provided by the plugin.

I found two plugins useful for GTM code implementation. One is ‘Head Footer and Post Injection’ and another is  DuracellTomi’s Google Tag Manager for WordPress by Thomas Geiger.

Google Tag Manager for WordPress By Thomas Geiger

DuracellTomi’s Google Tag Manager for WordPress by Thomas Geiger is very popular for implementing Google Tag Manager on WordPress websites. It has over 400,000+ active installations.

Following are the various advantages of using the plugin:

#1 If you are using a genesis child theme then you can install GTM on your website without making any code changes to your template file(s). Just add your container ID and select ‘custom’ next to ‘container code placement’, to install GTM on your website:

However, after the installation, test whether this plugin is compatible with your website theme.

If the plugin is not compatible with your website theme then you can either uninstall it or you can ask your theme developer to make your website theme compatible with the plugin.

#2  You can easily push a lot of information (related to a blog post, site search, visitors, browser, etc) into the data layer and then later with the help of data layer variables you can send this information to Google Analytics.

#3 You can enable scroll tracking and/or video tracking.

#4 You can blacklist various tags and variables.

#5 If you use Woocommerce then you can set up ecommerce tracking or enhanced ecommerce tracking on your WordPress website.

Follow the below steps to implement Google Tag Manager on a WordPress website using Google Tag Manager for WordPress By Thomas Geiger

Step-1: Navigate to your WordPress website dashboard and click on ‘Add New’ under Plugins.

Step-2: In the search box, type ‘Google Tag Manager’.

Step-3: You will see a bunch of lists. Select ‘Google Tag Manager for WordPress’ by Thomas Geiger and click on ‘Install Now’.

Step-4: Now navigate to ‘Installed plugins’ through the dashboard menu.

Step-5: You shall see the plugin listed in the dashboard. Click on ‘Activate’.

Step-6: Now Click on ‘Settings’ under the plugin. It will open a configuration panel for the plugin.

Step-7: Enter your GTM container ID (Google Tag Manager ID) in the text box provided.

Note: You can find your GTM container ID in the Tag Manager console.

Step-8: Now you need to choose the option to select where to place the code on your page. The best-recommended method is ‘Custom’ but it requires a little tweak in your website code. Select ‘Custom’.

As you can see from the notification, if we chose the ‘Custom’ method, we need to add the following code in the <body> tag just after opening.

<?php if ( function_exists( ‘gtm4wp_the_gtm_tag’ ) ) { gtm4wp_the_gtm_tag(); } ?>

Step-9: Now navigate to ‘Appearance’ > ‘Editor’:

Step-10: Find the file which contains <body>…</body> tag. Generally, it’s a ‘header.php’ file. Add the above code just after the opening of the <body> tag.

Step-11: Navigate back to the setting of the plugin and click on ‘Save Changes’.

Congratulations! you have successfully added Google Tag Manager code to your WordPress website using the plugin.

You can check whether it’s working or not by using the GTM preview steps just like we did while adding the code manually.

If you see the preview window with the above notification, then it means the Google Tag Manager is successfully installed on your website.

Head Footer and Post Injection

This is also another great plugin to implement additional code on WordPress websites, especially if you don’t know where are your <head> and <body> tags are placed in the theme. With this plugin, you can just simply copy your code and implement them in the header, footer, and body.

Some of the injection points and features are:

  • in the page section where most of the codes are usually added.
  • just after the tag as required by some JavaScript SDK (like Facebook).
  • in the page footer (just before the tag).
  • recognize and execute PHP code to add logic to your injections.
  • distinct desktop and mobile injections.

To use Head Footer and Post Injection for installing Google Tag Manager follow the below steps:

Step-1: Navigate to your WordPress website dashboard and click on ‘Add New’ under plugins.

Step-2: In the search box, type ‘post injection’.

Step-3: You will see ‘Head, Footer and Post Injection’ click on ‘Install now’.

Step-4: Now navigate to ‘Installed plugins’ through the dashboard menu.

Step-5: You shall see the plugin listed in the dashboard. Click on ‘Activate’.

Step-6: Now click on ‘Settings’ in your WordPress website dashboard.

Step-7: Click on ‘header and footer’.

You will get a configuration panel like below.

  • You can add any code in the <head> tag of your website (for all pages).
  • If you want to add the code only to the home page you can add your code to the second panel.
  • If you want to add any code after the <body> tag you can add it in the third window. you also get an option to add code on desktop as well as on mobile websites.

Step-8: Now navigate to the Google Tag Manager account then just click on the container ID to see the GTM installation code:

Step-9: Copy the first part of the GTM installation code: You can do this by clicking on the ‘Copy’ icon, like below.

Step-10: Paste the code in “<HEAD> PAGE SECTION INJECTION” as below:

Step-11: Now copy the second part of the GTM installation code:

Step-12: Paste the code in “AFTER THE <BODY> TAG” as below.

Now since we want this code to fire on both mobile and desktop devices, paste the same code in the ‘mobile’ window as well.

Step-13: Click on ‘Save’.

Congratulations! You have successfully added Google Tag Manager code to your WordPress website using the Head, Footer, and Post injection plugin.

You can check whether it’s working or not by using the GTM preview steps just like we did earlier.

If you see the preview window with the above notification, then it means the Google Tag Manager is successfully installed on your website.

So, that is how you can install Google Tag Manager on a WordPress website using three different methods.

Note: There are many plugins available through which you can install GTM on your WordPress website. You can search for them in the ‘Plugins’ section of your WordPress admin panel.

Other articles on WordPress

Related articles

Register for the FREE TRAINING...

"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."



Here’s what we’re going to cover in this training…

#1 Why digital analytics is the key to online business success.

​#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.

#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.

#4 ​Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

#5 The number 1 reason why conversion optimization is not working for your business.

#6 How to advertise on any marketing platform for FREE with an unlimited budget.

​#7 How to learn and master digital analytics and conversion optimization in record time.



   

My best selling books on Digital Analytics and Conversion Optimization

Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

Attribution Modelling in Google Analytics and Beyond
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.

About the Author

Himanshu Sharma

  • Founder, OptimizeSmart.com
  • Over 15 years of experience in digital analytics and marketing
  • Author of four best-selling books on digital analytics and conversion optimization
  • Nominated for Digital Analytics Association Awards for Excellence
  • Runs one of the most popular blogs in the world on digital analytics
  • Consultant to countless small and big businesses over the decade
error: Alert: Content is protected !!