Only Load Google Tag Manager Code On Specific Pages

When WordPress 5.2 released on 7th May 2019, it included the new “wp_body_open” action, which allowed to insert arbitrary code into the body section of WordPress. One of the best uses of this new functionality was inserting Google Tag Manager (GTM) code, because Google recommends placing it in the body and not the header or footer, unlike other scripts. In this article, I’m going to show you how to use Google Tag Manager to only insert code on specific pages instead of on the entire site.

Why Not Just Add the Code in the Gutenberg Editor?

Last week, I had praised the WordPress Gutenberg editor, and said that it was much more efficient to just inline CSS or JavaScript on specific pages, instead of adding them to a theme or the functions.php file. So why not use the same approach all the time? Why should we use GTM to inject code into certain parts of the site?

The reason is that GTM allows us to check a bunch of variables to decide whether or not we want to insert code. As an example, I want to run my Google Analytics code only on when I’m not logged into my site. This way, my analytics software doesn’t count my personal site visits. Similarly, it can check for a host of other things, which are just impossible to do from Gutenberg. Hence the need for GTM.

Using Triggers to Check for Specific Pages

Let’s say you have a certain tag that you want to run on one or two pages only. I personally have this requirement all the time for certain tracking codes. I occasionally need to get more information about how customers interact with a particular page, but don’t want to add the code everywhere. At most, one or two pages on which I’m running the experiment.

So you create your tag with the code you want in GTM in exactly the same way as before. Now at the bottom, you create a new Trigger like this:

Give the trigger a name, specify the Trigger Type as a “Page View”, then choose for the trigger to fire on “Some Page Views” as demonstrated in the screenshot. If this is a regular piece of code like Google Analytics, for example, you’d simply choose the other option. In fact, for the overwhelming number of tags, you’ll choose for it to trigger on all page loads. But not here.

Now we configure the event. Choose “Page URL” in the first box, and “Matches RegEx” in the second one as shown here:

In the final field, enter the “page slug” of the page on which you want to run the code. If you have more than one page, you can separate the two with an OR operator (|) as shown above. You can repeat this as many times as you want.

There are ways to get more sophisticated if the number of pages increases, but this is enough to get you started. Now save your changes, and preview them using the normal GTM preview functionality. Make sure you don’t have anything blocking scripts from running. Then publish your changes, given it a name, and you’re done!

Bottom Line

GTM is a great way to selectively add certain scripts to your website without needing to change anything on your site itself. Sure, there are plenty of other ways to achieve this, but I find GTM to be the most flexible because of the ability to create sophisticated Triggers and check for a lot of variables. This allows for extremely precise targeting, like verifying that a user isn’t logged in before the tag fires!