• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPArena

WPArena

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Services
WPArena » Tutorials
Tutorials

How to Integrate Google Tag Manager without a Plugin in WordPress

Avatar of Bhagwad Park Bhagwad Park Updated: September 17, 2019

Integrate Google Tag Manager
Share1FacebookTweetPin1LinkedInEmailPrint

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:

  1. Setting up an account with Google Tag Manager
  2. Inserting the two snippets of GTM code

So let’s get started!

Integrate Google Tag Manager

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:

Create an account in Google Tag Manager

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”:

Set up Account and Account Name in Google Tag Manager

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”:

Create the Container Name and Select Web

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:

Accept terms of the GTM Agreement

Once you’re done with the legalese, you’re given the code to insert into your website:

Insert Two Snippets of Code into Google Tag Manager

It’s important to note that these are two separate pieces of code:

  1. The first one goes into the “<head>” tag of your site
  2. 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:

Apperance Theme Editor

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:

Activate Preview Mode for Google Tag Manager

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:

Check that Tag Manager has Been Installed

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!

This post was orginally published on: May 29, 2018 and was updated on: September 17, 2019.

Related Tags: Google Google Tag Manager Integration

Share1FacebookTweetPin1LinkedInEmailPrint

Related Stories

  • How to Hide the Fact That Your Site is Running on WordPress

    How to Hide the Fact That Your Site is Running on WordPress

  • How To Configure Feedburner RSS Email Subscriptions

    How To Configure Feedburner RSS Email Subscriptions

  • How To Fix WordPress Plugin Updates Not Working

Avatar of Bhagwad Park

Bhagwad Park

Hi, I'm Bhagwad! A freelance technical writer and I've been providing WordPress tutorials to the community since 2010. I enjoy playing with code and have developed several Android apps. I run www.wp-tweaks.com where I compare web hosting discounts between Hostgator coupons, Bluehost, SiteGround and InMotion. Feel free to visit it and send me a message!

Reader Interactions

Join the Discussion
  1. Avatar of NumanNuman says

    May 29, 2018

    Hi bhagwa
    Please tell me what are benefits of it in SEO and I will very happy to visit your website

    Reply
  2. Avatar of Dilin AnandDilin Anand says

    December 12, 2019

    Very helpful, thanks Bhagwad!

    Reply
  3. Avatar of Antalya Dijital PazarlamaAntalya Dijital Pazarlama says

    January 20, 2021

    Great content for Digital Marketing

    Reply
  4. Avatar of PiroMaxPiroMax says

    November 5, 2021

    Thanks. I thought that this cannot be done in WordPress now. Let’s try to integrate.

    Reply

Share Your Thoughts Cancel reply

Before submitting your comment, we kindly ask that you read our comment policy. Your email address will remain confidential and will not be published or shared anywhere. If you subscribe, you will receive notifications regarding new comments.

Primary Sidebar

cart66 review

Cart66 WordPress Shopping Cart In-Depth Review

WordPress Real Estate Themes

Best Real Estate WordPress themes

Recent Topics

  • 27 Top SEO Companies in the World
  • 12 Ways To Monetize Your WordPress Blog
  • Comparing the Best Employee Engagement Software in the Market
  • Stellar Converter for OST Review: Best Tool for OST to PST Conversion
  • How To Use WordPress as an eCommerce Store

Footer

Top

  • Services
  • Our Themes
  • Facebook
  • Twitter
  • Linkedin

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact

Copyright © 2023 · All Rights Reserved · WPArena is a Project of TechAbout LLC.
We are not affiliated with Automattic or WordPress.

  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact
Share this ArticleLike this article? Email it to a friend!

Email sent!