Using Google Tag Manager with WordPress

By now you’ve had some type of exposure to Google’s new Tag Manager. If you haven’t read my last post on how to use Google Tag Manager.

This post is going to be a bit more technical, but hopefully you’ll find it useful.

Recently, I wanted to run a test to see if I could compare how various categories on my wordpress site perform against each other. Using GTM, I was able to set up a quick hack to make this happen.

First, you’ll want to make sure that you have an empty data layer in your header file. This needs to go above your Google Tag Manager code so that it can be executed properly.

It will look like this:

Simple right? Next you’ll want to add this bit of code to your single.php file:

Be sure to publish your pages and empty your cache once these changes have been made.

This fantastic piece of code is courtesy of Julien Coquet and contains a few changes to his original code. I put mine right after the end loop code in WordPress on the single.php page.

As you can see above, the code is calling a few items. Those are:

  1. The post author’s name
  2. The post type
  3. The number of comments
  4. The category
  5. The tags
  6. The publish date

Macros in Google Tag Manager

Next, you’ll want to log into your Google Tag Manager and go to your container and add these as macros.

You can call your macro whatever you want and you’ll choose ‘Data Layer Variable’ for your macro type.

If you’re creating one for the Author you could call it WP Author. In the data layer variable name, you’ll call it GTM_WP_authorname.

Once you’ve added all of your data layer variables, you’ll go to your Google Analytics tag and go to more settings. Under more settings you’ll choose Custom Variables and select new. Choose your first slot and Name it Author name (This is what will appear as the variable in Google Analytics.) For the value, choose your macro WP Author and choose Page Level for scope. Repeat this process for up to five variables.Custom Variables in Google Tag Manager

This is where it gets interesting. After trial and error, I discovered that if you don’t tell it to stop, the GTM code will fire before the page renders and it won’t record the custom variables on the page. One way around this is to create a custom rule for your blog pages.

Rules in Google Tag ManagerIn my case, I created a new rule that equals the event gtm.dom and url contains /blog/. This simple script will only fire on blog pages once the entire page has loaded. In this case, I also created another rule that will fire on all pages not containing /blog/ as soon as the page loads.

If you want to check your work, I suggest using this plugin called WASP. The Web Analytics Solution Profiler has been really helpful to help debug what’s going on with my pages.

Hopefully you’ll find this tutorial helpful!WASP Profiler for Chrome

Chip Oglesby is the owner of Creative Spark Columbia and a digital nomad. He spends his days researching emerging technologies and how small businesses can capitalize on them and spends his afternoons and nights training for a triathlon.

Posted in Analytics Tagged with: ,
4 comments on “Using Google Tag Manager with WordPress
  1. Seth says:

    I am using the Genesis theme, so I do not want to hack the single.php file or it will be overwritten on the next update. Can I insert the Julien Coquet snippet using the Genesis Hooks plugin? If so, where?

  2. Aaron says:

    Having an issue with the last part and the datalayer is not populating. I setup the following rule in GTM “event = gtm.dom” but it does not work.

    • Chip Oglesby says:

      Hi Aaron, the datalayer should be responding properly. If you’ll send me the site you’re working on, I’ll take a look at it and let you know what’s wrong.

      My initial thought is you’re probably firing the tag before the entire page can load with the correct info.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>