How to Install Google Tag Manager on WordPress – The Guide

This is a guide to installing Google Tag Manager on your WordPress website.

Installing GTM on WordPress opens up a lot of options for you as a website owner to deploy and organize 3rd party tools on your website.

It’s a pretty awesome and useful tool and what we talk about a lot on this blog, so check out our other articles if you want to go deeper.

Let’s go over two methods you can use to add Google Tag Manager to your WordPress website in this post.

Sound good? Let’s dive right in…

Step #1: Create a Google Tag Manager Account

Since you are here, you probably have an account, but if don’t have an account yet, go here to set one up.

google-tag-manager-wordpress

Step #2: Implement Google Tag Manager Code Snippet on to Your Website

If you need to go back to get the scripts just click on Google Tag Manager ID which you can find on the top right corner. After you click on it a window will pop-up.

google-tag-manager-script

Now, adding the scripts to a WordPress website can be done by using a plugin or by editing the theme files.

But there is a catch:

The way WordPress works is that you need access to edit files or install a plugin. Make sure this is something that you can do before going forward. 

First Method: Use a Plugin

Content management systems like WordPress have the availability to extend their functionality by installing plugins.

One that I can recommend is the Google Tag Manager for WordPress by Tamas Geiger. Installing it is very easy:

  1. Log into your WordPress admin panel.
  2. Go to Plugins / Add new.
  3. Search for “Google Tag Manager.”
  4. Click on “Install now” in the search results next to “DuracellTomi’s Google Tag Manager for WordPress.”
  5. Now, go to Settings / Google Tag Manager and enter your GTM container ID.
gtm-wordpress-plugin-gtm-id

Even if the plugin is a safer route, know the following about this method.

The <head> script is added correctly to your website because it is critical to enable all features of GTM. The <body> script is an iframe snippet that acts as a fallback for users with JavaScript disabled. Because WordPress doesn’t have a hook to place custom code under the body tag, by default it is placed in the footer.

This is not ideal because it reduces the likelihood of the tag firing. It will still work, but only after the page fully loads.

If your setup requires you to definitely need the <body> script to be added in the respective tag, you can choose the custom injection method. This plugin uses a workaround, so to be sure everything still functions ok on your site, make sure you test and see if your website is still working as expected using a few different browsers.

gtm-wordpress-installation-plugin

A great thing about using this plugin is that it comes with multiple dataLayer integrations usually available through customization.

For example, in the Basic tab, we can send the post date, author name or post title to the dataLayer. We can take these data points and transfer them to our analytics tool.

The Integration tab is something you probably need to check if you are using plugins such as ContactForm 7 or WooCommerce. It is handy if you want to utilize Google Analytics Enhanced E-Commerce Tracking capabilities because you don’t have to implement the dataLayer yourself.

Also, the plugin can inject the Google Optimize Page Hiding Snippet to make your experiments run smoothly.

Second Method: Edit the Theme Files to Install Tag Manager

It’s best practice to have a child theme for whatever customization you want to do to your theme. Like adding the GTM container code. You don’t want the changes to be overwritten when a new update becomes available for your parent theme. Usually editing the theme’s files is something that you should avoid. Talk to your website developer to choose the best method.

Here is what you need to do (or what a developer would do): Within WordPress, you can log into your dashboard, then go to Appearance.

gtm-wordpress-theme-file

Under Theme Editor, you should have access to the theme files itself.

Note: It is recommended that you create and only edit something called a Child Theme in your WordPress website. For more guidance on what a Child Theme is and if you should use it, check out this guide.

After that, look for the theme header.php file and click on it. Here you will find the head tag and the body tag. Let’s copy the first part of the code and place it beneath the opening head tag. The second script part needs to go beneath the opening body tag.

Finally, click Update File.

wordpress-theme-gtm

Step #3: Check if GTM is Installed Correctly

There are a few ways to check that you have set GTM up correctly. Here are a few:

1. Check using the build-in GTM Preview and Debug Mode

Go into your Google Tag Manager account and click on the Preview button.

gtm-preview-and-debug-mode

Tag Manager will have now put only your browser (not your customers) into a special state where, when viewing your website pages, you see a little dashboard pop up from the bottom of your screen.

So go over to your website and refresh the page to see if this indeed happens. If so, then you have installed GTM correctly. Check a few pages just to make sure.

gtm-preview-and-debug-mode-wordpress-installation

2. Check Your Website’s Source Code

Go to your website and look into your page source to see if the scripts are now placed in the head section of our HTML and beneath the opening body tag.

To do this, right-click and look for the View page source option.  Now you could go through other pages and check whether it’s installed in the HTML, but we can also help ourselves with some tools.

check-the-gtm-snippet

3. Check with the Google Tag Assistant Extension

The last way is with the tool, Google Tag Assistant. After you install it on your browser, click on the icon to open it. You should see that Google Tag Manager is installed.

gtm-tag-assistant

Summary

There you have it, they are the steps you need to install Google Tag manager on your WordPress website. You should now be ready to start using Google Tag Manager to deploy your tags. For ways to learn how to use GTM now, head over and read our GTM Self Study Guide here.

Now, I’d like to hear from you. Which method from today’s guide did you use to add Google Tag Manager to WordPress? What tags are you going to add? Or maybe you ran into a problem. Whatever it is, leave us a comment down below and let me know.

Leave a Comment

avatar