Implement Google Tag Manager & Supercharge Your WordPress Performance

“Measure what you treasure.” You’ve heard it a thousand times. And, as a marketing professional, we know we don’t have to preach the value of tracking pixels, A/B testing, or conversion tracking to you.

But appreciating the data and wrangling your web developers into implementing the code are two very different things—especially when they’re heads-down on a project, sustained only by their growing pyramids of Diet Dew.

The good news is you can actually get what you need without pestering your dev team.

It’s called Google Tag Manager (GTM)—and it’s the magic wand that will power your digital marketing sorcery.

What it GTM, exactly?

You know those “tracking pixels” or “code snippets” everyone wants you to install on your site? They’re commonly referred to as “tags.”

And, now, instead of asking your busy developers to implement each tag on your site, you can ask them to install Google Tag Manager once and use its web interface to manage your tags from that point, forward.

To make things simple, Google has pre-built many commonly used tags that are all easily managed from a user-friendly console. In many cases, you’ll just pick the type of tag you want and enter your account ID. That’s it. In just seconds, you’ll have the new tag up-and-running on your site.

Better than waiting a few days for your web gal to get back to you, right?

We often use GTM to add tracking for Google Analytics goals like download link clicks, form completions, and the million other little things that can help you fine-tune the conversion paths on your site.

GTM also allows you to:

• Preview and debug your tags
• See who made changes to your tags should multiple people be working on your site
• Roll back to any version of your tags should something go wrong

Now, if that’s not magic, we don’t know what is.

What’s the catch?

Like all things in life, nothing is ever perfectly simple. (Don’t worry. We’ll walk you through the solutions.)

Let’s dig in…

GTM and Google Analytics

For starters, if you’re already running Google Analytics, you’ll want to change how it’s implemented. That’s because GTM treats Google Analytics like any other tag.

As a Google product, GTM understands things like Property IDs and other features of Analytics, so it can be very smart in how Analytics is used.

The challenge: GTM uses a different mechanism for sending Analytics events than Google Analytics—and those mechanisms are not compatible.

To make things even more confusing, the non-GTM version of the Google Analytics snippet quietly switched to a GTM-style system at the end of 2017. Early in 2019, there are still many plugins and tools that haven’t updated to the new model.

So, you may need to update or replace some plugins or scripts that report to Google Analytics to accomplish this implementation—but you were going to have to do it sooner or later anyway.

We’re going to focus on Google Tag Manager, but if you just want to update your Google Analytics, here are some helpful articles:

• Introduction to gtag.js – The new Google Global Site Tag
• What is gtag.js and when should I migrate?

GTM and WordPress

Google will tell you that you should be using Tag Manager, but it can be complicated for non-devs to implement on a WordPress site. So, like we said earlier, you’ll be able to manage tags without developer support once implemented, but you’ll likely need someone’s help for the initial GTM installation.

What makes this piece so tricky?

For starters, WordPress doesn’t offer you a way to place the GTM code as instructed by Google.

The other primary issue with GTM and WordPress relates to ecommerce transactions.

Most ecommerce plugins, like WooCommerce, are still only supporting older Google Analytics methods. (Hopefully, these will get updates soon. We’ll cover your options in the next sections.)

How to correctly place GTM code in your WordPress theme

In the installation instructions, Google recommends that you place one of the code snippets immediately after the opening tag of your page.

Unfortunately, WordPress does not natively support placing code here.

Here are your options:

Option 1: You get lucky and your theme already has support

Some frameworks, like Genesis, have built-in support for GTM. Meaning, there are tools available to easily insert the code snippet in the correct place.

At Firebrand, our custom themes include a “hook” for the code snippet. When we’re using third-party themes, we add the hook to the header.php file and implement the snippet in functions.php.

(We include sample code of how we implement this at the end of the article.)

Option 2: Get your developer to hard-code it

Send your developer the required snippets and installation instructions and let them know this is the last time they’ll have to do this. Instant motivation.

When your developer implements the code, you’ll probably want to remove all of the existing, hard-coded tags from your site and move them to GTM. It’s usually quite eye-opening to see just how many of tags you’re already running.

Option 3: Put the GTM code in the footer

Many WordPress themes have a method for putting code in the footer. Granted, this method will work most of the time, but because it messes up the loading order, you can run into issues that might not be immediately transparent.

This approach isn’t recommended by Google, since it can slow down the loading of your page and will certainly miss some of your visits.
A/B testing can have serious problems because the content will be loaded in the wrong order.

Option 4: Use a plugin

This is WordPress, so, of course, “there’s a plugin for that.”

The Google Tag Manager for WordPress plugin supports a number of GTM installation methods. And, their recommended method involves modifying your theme. While this is probably the best option if you choose to use this plugin, we think there’s a more maintainable way to make that modification. (Again, we’ll share that code at the bottom of this post.)

Adding Google Analytics with GTM

Now that we have the GTM container installed on our site, we can use it to easily add Google Analytics.

To get GTM to implement your regular Google Analytics pageview:

1. 1. Add a new Tag
   2. Give it a name (let’s call it “GA Universal Page View”)
   3. Select a Google Analytics Tag type

1. Set the Track Type to “Page View” and specify your Google Property ID; if you’ve defined a Google Analytics Setting variable (and you should), use that instead
2. Select the pre-defined “All Pages” trigger and hit SAVE

And, there you go. You’ve just implemented Google Analytics using GTM.

See? Magic!

Sending WooCommerce transaction data

(Not running WooCommerce? Skip ahead to testing.)

The official WooCommerce Google Analytics plugin does not send transaction data using the GTM method (known to us techie folks as “DataLayer.push()”) The gtm4wp plugin, however, implements that mechanism for you on WooCommerce.

Since the plugin developer already has a tutorial on how to implement Enhanced Ecommerce Google Analytics transactions, we’ll just cover the Standard Ecommerce stuff here (and talk a little bit about Google Analytics events).

The transaction event

This is going to get a little bit technical but hang with us. We’ll walk you through each step of the way.

In most WooCommerce installations, the transaction event is going to happen on the order confirmation page. So, when your WordPress server builds that page, it must include all of the transaction information in a form that Google Analytics can use. In the case of the gtm4wp plugin, that’s going to be a DataLayer event.

For our purposes, here, you don’t really need to know the how’s and why’s of the DataLayer, just that GTM is going to send an event.

For Standard Analytics, the confirmation page will send a message to Google with the event, “gtm4wp.orderCompleted.”

But since Google doesn’t know what to do with “gtm4wp.orderCompleted,” you’ll have to give it a little direction.

In our GTM console, we’re going to add a Trigger. And, it’s these Triggers that define the conditions which determine when Tags activate (or “fire”).

Here’s a pretty straightforward trigger:

1. 1. Add a new Trigger
   2. Name it “GTM4WP Event”

1. 1. Choose a Trigger Type of “Custom Event”

1. 1. Let GTM know the event name is “gtm4wp.orderCompleted”

1. Hit SAVE—and you’ve defined your trigger

Now, pour your favorite libation. We’re halfway there!

The transaction tag

Now that GTM has a trigger, we can use that to send an event from GTM to Google Analytics. (Remember, they are not the same thing. GTM simply manages code snippets and communications.)

Here’s what you’ll do:

1. Create a new tag
2. Name it “Transaction” (or whatever makes sense to you)
3. Assign the Universal Analytics Tag type
4. Set the Track Type to “Transaction” (this tells Google Analytics that we’re tracking an ecommerce Transaction)
5. If you have your Analytics ID set up in your Global Settings, move on to set the trigger; If you don’t have Global Settings configured, you can put in your Analytics Property ID here:

(In this example, we’re using a Constant Custom Variable, but you can put your ID directly in here if you want to keep it simple.)

Now, trigger the tag

At the bottom of your Transaction tag, just set the trigger to “GTM4WP” (that’s what we named the trigger above) and hit SAVE.

Please, test before you publish

Before you hit that big blue SUBMIT button and publish to your live site, be sure to test your GTM implementation first.

Thankfully, Google has provided you with solid documentation of this process.

The ability to review and test your tags before publishing to your live site is another one of the great advantages of using Google Tag Manager.

Basically, when you click PREVIEW, GTM sets a cookie in your browser that tells it to load the tags you’ve edited instead of the published tags.

When you visit your site with this cookie set, you’ll get a preview of the tag “container.”
(You’re the only one who will see this alternate container, as you’re the only one with the cookie.)

When this cookie is active, it will also enable a debug mode that shows which triggers and tags have been activated on your page.

It’s this debugging panel that will confirm that your tags are working.

When you’re satisfied, go back to GTM and hit SUBMIT to publish your container.

There’s a lot more to learn in the Wizarding World of Google Tag Manager, but count on the fact that your powers will grow over time, and your colleagues and clients will be impressed.

Looking for some great sources for GTM information?

We recommend:

• Simo Ahava – An all-around GTM Wizard
• Official GTM documentation
• GTM4WP documentation

Your sample GTM code—and how we implement it

Oh… and code. We promised code…
Ssh.
Give the non-techies a minute to clear out.
…
Okay.

Here’s how we set up or modify themes to properly implement the GTM snippets:

Add a hook to your theme

Safety note: Unless you created the theme, never directly modify a theme. Rather, use a child theme.

In the header.php file, add one line after the opening <body> tag:

[code language=”php”]
&lt;?php do_action(‘doc_body_start’); ?&gt;
[/code]

Call the hook in your functions file

Now we’re going to create a function that uses that new hook to insert the GTM code right where Google wants it.

In the functions.php file we will add:

[code language=”php”]
/**
* Google Tag Manager container ID
*/
define("GTM_CONTAINER_ID", "GTM-xxxxxxx");

/**
* Echo out Google Tag Manager code for head section
*/
function fb2018_gtm_head(){
echo "
&lt;!– Google Tag Manager –&gt;
&lt;script&gt;(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’?’&amp;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_CONTAINER_ID . "’);&lt;/script&gt;
&lt;!– End Google Tag Manager –&gt;
";
}
add_action(‘wp_head’, ‘fb2018_gtm_head’, 1); // 1 = hook it first!

/**
* Echo out Google Tag Manager code for body section
*/
function fb2018_gtm_body(){
?&gt;
&lt;!– Google Tag Manager (noscript) –&gt;
&lt;noscript&gt;&lt;iframe src="https://www.googletagmanager.com/ns.html?id=&lt;?php echo GTM_CONTAINER_ID; ?&gt;"
height="0" width="0" style="display:none;visibility:hidden"&gt;&lt;/iframe&gt;&lt;/noscript&gt;
&lt;!– End Google Tag Manager (noscript) –&gt;
&lt;?php
}
add_action(‘doc_body_start’, ‘fb2018_gtm_body’, 1); // 1 = hook it first!
[/code]

The tag manager snippets provided above are current as of March 2019, but you may want to check and make sure you have the latest version from Google.

Bonus: using wp-config.php

If you don’t want the container ID in your theme code, you can move the define() statement to your wp-config.php file.

Implement the gtm4wp function

If you’re running the gtm4wp plugin, you can use it to create the snippet.
Instead of the functions.php code above just use:

[code language=”php”]
add_action(‘doc_body_start’, ‘gtm4wp_the_gtm_tag’, 1); // 1 = hook it first!
[/code]

Then select “custom” in the code placement options for the Google Tag Manager plugin.

Now, get out there and use your powers for good.