Categories
WordPress

Installing Google Tag Manager [GTM] on WordPress (Without a Plugin)

Long gone are the days when you have to individually manage different tracking scripts with 100 separate logins and work every time with the source code.

With the introduction of Google Tag Manager — a tag management platform, you can manage almost everything from just one spot. Tags are essentially scripts (generally speaking, or as how the majority of marketing folks use), you want to fire on a page, multiple pages, or your entire site.

Google Tag Manager (GTM) already comes integrated with a bunch of commonly used tags/scripts, such as Google Analytics, Google Optimize, Hotjar, Crazy Egg, etc., so chances are, whatever you typically deploy, can all be done from one place. Worse case, it has a custom HTML option, to install third-party scripts that are not available within the integration options.

As far as innovation in marketing technology goes, GTM is a fantastic well-thought-out tool for anyone who measures any metric as it relates to tracking new users, conversions, behavior, and more. And while I’d love to talk more about this aspect, I’ll shift the focus back to the premise.

Installing GTM on WordPress

Most folks assume that when someone asks about GTM installation on WordPress, they believe that it’s mostly for Google Analytics.

Probably true; but as mentioned, GTM can be used for a variety of external scripts, not just Google Analytics.

A prerequisite to tying-in your other tags is to first configure them individually in their own logins. Whatever the case may be, you’d need to insert the GTM script in the first place to establish communication with all of your tags.

To do so, follow the steps along:

Step 1: Grab Your GTM Tracking Codes

Once you’ve created your Google Tag Manager login, there are a couple of ways to grab your code. I’ll discuss one of the easier methods.

From your dashboard, click on your GTM number, and your code will open in a pop-up window. (Image below for reference).

how to grab your google tag manager code
As seen, GTM prefers that you install codes in two places. Once within the <head> section, and once within the <body> tag. In fact, the instructions are more specific. It wants you to install the code for head as high as possible (inside it), and the code for body, immediately after the opening tag. In My FAQ (further down), I discuss why you’d need to install the code twice.

Step 2: Locating the header.php File

Clearly, we need to put the code in two places. Now, before I cover how to do so, let me re-emphasize, that this post explicitly discusses achieving this feat without using a plugin.

Many WP users (and nothing wrong it), typically leverage the “Insert Headers and Footers” plugin, this guide will explore the option of working directly with the header.php file.

What Is header.php?

The header.php is nothing but a function file at the end of the day, but traditionally, it contains two important elements that we’d need:

  1. It has the <head></head> section
  2. And the <body></body>

This file, is usually located under “theme editor,” which is hosted the main “Appearance” section of your WP dashboard.

step 1 of accessing header.php
Step 1 of accessing header.php

Next, in the theme editor, locate the header.php from the right-most vertical window, titled “Theme Files.”

Step 2 of accessing header.php
Step 2 of accessing header.php

Step 3: Inserting the Google Tag Manager Code

After step 2 has been executed on, the subsequent step is that of inserting your GTM code. To help you visualize how to do so, I will provide a few screen captures from my header.php file. See below:

Where to Place the Google Tag Manager <head> Code in WordPress

Where to Place the Google Tag Manager <Head> Code in WordPress
As illustrated, if possible, place your GTM head code right after the opening <head> tag in your header.php file.

Where to Place the Google Tag Manager <body> Code in WordPress

installing google tag manager body code in wordpress.png
Similar to what was done for the <head> code, I pasted the code meant for <body>, right after the opening body tag.

Once both codes are pasted correctly, be sure to scroll down, if not visible already in your header.php function window, and select “update file.”

Step 4: Publish Your GTM Container

Google Tag Manager has a system where nothing gets pushed to your production/live website, until you publish your changes or updates. So, once you’ve inserted your GTM code in WordPress, you’d need to come back to your GTM workspace, and:

  1. Select Submit.
  2. Then, on the ensuing window, select publish.
submitting changes in google tag manager workspace
First, submit your changes.
publishing changes in google tag manager workspace
Then, add a version name, description, and publish your changes.

As soon as you’re published, theoretically, you’re done. Although, it’s best recommended to verify if you indeed correctly installed Google Tag Manager. For that, you can take insights from my 3 Methods of Verifying if Google Tag Manager Is Installed Correctly, where as the name suggests, goes on how you can make sure whether you’ve accurately positioned your GTM code. To be 100% sure, I’d advise that you take advantage of all of the three methods I mentioned.

Three Quick GTM FAQs

Why Does GTM Asks to Install the Code Twice? (Once Within Head, and Once Within Body)

The reason GTM asks to place the code as high as possible in the <head> section is because there is less room for a misfire. Normally, browsers load the body tag after the head tag; however, in a situation where a user leaves the page almost instantaneously without allowing the browser a chance to load the rest of the page, the hit would be missed. This concept becomes even more critical when you have multiple tags inside your GTM container.
The reason it asks to also place the body code is because it serves as a backup in an event when someone’s browser does not have JavaScript enabled. If you care at all in also tracking non-JS users, the body code comes in handy.

Do You Need Google Tag Manager?

If you run a website and want to understand user behavior, trends, etc. you’re likely involved in some kind of tracking. Using Google Tag Manager serves the following three biggest benefits:
1. You can manage multiple trackings (seriously, there are tons of integrations options) all from one place.
2. You don’t have to foo-foo with the source code of your website. Maybe once when installing the GTM, and that’s it. While this is extremely useful for a large organization, it is a great value add for any website owner. The question of whether or not you’ll end up breaking a site becomes invalid when you don’t even have to go into the back-end after the initial setup.
3. A bonus one, in my mind, is that you can bypass your developers, and sprint cycles of 2-3 weeks or more (depending), for a simple script insertion. All you have to do is add that specific script in GTM, publish it, and you’re good to go!

How Can I Tell if Google Tag Manager Is Installed?

As mentioned before, you can refer to my previously written article, which goes over three quick and easy methods of verifying successful GTM installation.

You May Also Want to Check Out:

Conclusion

By now, you must have figured out that installing Google Tag Manager [GTM] on WordPress (without a plugin), is not as hard as you might have imagined.

The only fearful factor in the entire process (if any), is working with your header.php file. For instance, you accidentally end up breaking something. In that event, I’d recommend taking backups of your WP site first, and even a separate one of your entire header.php, and then start tweaking the file.

In any event though, if all you’re doing is copy-pasting the code directly, the chances of errors are very slim.