WordPress Tutorial

Google Tag Manager In WordPress — A Beginner’s Guide

You visit a website and it guesses your exact location correctly. Sounds like a good magic trick, right?

If you want to know more about this neat feature, stick by us as we will cover the ins and outs of Google Tag Manager.

In addition, we will also teach you how to add the Google Tag Manager into your WordPress website.

What Is a Google Tag Manager?

Before we answer the big question, let’s take a few steps back and explore the tag technology beforehand.

A tag which is an abbreviation for pixel tag or tracking pixel is an HTML code snippet that is used to track user behavior and conversions.

Despite always being present on many websites and email marketing campaigns, you might not be able to spot a tag since its size is 1×1 pixel only.

That being said, visibility is not a tag’s primary focus.

Each tag is embedded with an external link. When you visit a website or open an email that contains a pixel tag, your browser discreetly follows the external link and transmits certain data to the server.

Here’s an example of what a pixel tag looks like in source code:

<img style="“position: absolute;" src="“Tracking">

Seeing that tag technology is getting more popular in the digital marketing industry due to its ability to discreetly get data, there are plenty of third-party companies that offer management services for tag technology.

With that in mind, the Tag Manager is a product of Google that provides this type of service.

Since they belong to the same company, Google Tag Manager is often associated with Google Analytics. That is because Google Analytics uses the help of a marketing tag called the GA Tracking Code to track user interactions.

While you could easily add Google Analytics tags into your site to track general information like page views and referrals, Google Tag Manager complements Google Analytics’ by supplying user behavior data that require the use of customized pixel tags.

In addition, Google Tag Manager is compatible with other types of tag platforms such as Adobe Analytics, Google Ads, Facebook, and Twitter.

What Can We Do with Google Tag Manager?

Despite being linked to Google Analytics most of the time, Google Tag Manager is capable of handling multiple pixel tags simultaneously.

In terms of features, Google Tag Manager is responsible for facilitating the tag-adding process, setting the rules for the deployment of pixel tags, and conducting global editing whenever a change of code occurs.

While Google Tag Manager acts as your right-hand man in managing all of your tags, you still need to understand each pixel tag’s features – like knowing Facebook features for effective use of Facebook tags – as you’ll determine what user behavior data you want to extract using this method.

Considering that tag technology tracks behavioral data, the type of data that a pixel tag could retrieve includes, but is not limited to:

  • Type of operating system
  • Type of website or email used (mobile or desktop)
  • IP address (Internet Service Provider and location)
  • Screen resolution

Based on the nature of the data, it’s not surprising that Google Tag Manager is widely used in digital marketing.

As you may know, user behavior data is highly valued in marketing as knowing about it allows you to get valuable insights to help determine the best possible marketing campaign for your brand.

With the help of tag technology, you’ll not only get to generate sales in the long run but also discover any bottlenecks that might occur within the business process. Consequently, the analytics allows you to perform growth hacking much more efficiently.

From a technical perspective, pixel tags allow you to track heat maps which give accurate observations regarding how efficient your website is in generating traffic.

The data serves as valuable input for determining what and how you can improve your site and making it a commodity instead of a liability.

All things considered, having the ability to obtain user interaction data in such a short amount of time is certainly valuable for any business that strives for success. And the best part is that you have total control over the analytics process.

These are just a few examples of what you can do with Google Tag Manager. In summary, the sky is your only limit.

How to Install Google Tag Manager in WordPress?

While the use of Google Tag Manager is popular among digital marketers, you don’t have to be one to take advantage of its features in the first place.

Like we said earlier, Google Tag Manager can collect any user behavior data requested by the user. As long as you have a website and a clear plan on what you’re going to do with the data, feel free to use the system however you want.

Now that you’ve got a full scope of what you can achieve with Google Tag Manager, let’s discuss how you can implement it on your website.

Please note that this tutorial will only work if you’re using WordPress as a platform on a self-published site, not on WordPress.com. Different from WordPress.com, WordPress.org allows you to self-host your site, thus granting you full access to the site files and code. Feel free to read this article for further explanation regarding this topic.

If you haven’t subscribed to a web hosting provider yet, feel free to check out Hostinger’s hosting plans. We provide robust web hosting services with lots of perks for the price as low as $0.80 per month.

Once everything is set, you can follow this tutorial for the Google Tag Manager installation process:

1. Sign up for Google Tag Manager

To create a new account, you can go to Google Tag Manager’s webpage here and click Start for free on the top right corner of the page.

The system will require you to log in to your Gmail account. If this account manages your company’s tags, we suggest you use the company’s email instead of your personal email.

On the Add a New Account page, fill out the fields using the correct data. The Container option follows the type of device in which your website operates from. Since we’re using WordPress, we go with the Web option.

Google Tag Manager Sign Up pageOnce you’re done, click Create. Next, the webpage will show Google Tag Manager’s terms of service. Acknowledge it by checking the agreement box then click Yes.

2. Get the code

By now, you should be able to see your Tag Manager Dashboard. A pop-up will also appear on the screen, containing two different sets of HTML code as shown below.Google Tag Manager tracking codesThey’re your tracking codes that need to be added to your site. The first set goes in your <head> section while the second one goes after the opening <body> tag.

Leave the pop-up open for now as we will need it in the following steps.

3. Log in to your WordPress Dashboard

Moving on to your WordPress Dashboard, we’re going to add the tracking code into your site.

In order to make any changes to the website’s code, you need to have administrative access.

4. Go to Appearance -> Editor

Navigate to the Editor section within the Appearance area. If you don’t see the Editor option, that means you don’t have the administrative access needed to make any changes.

In the Editor page, you’ll see a list of template files on the right side of the page. Click the one titled header.php to add the tracking code.

In most cases, you can add both the tracking code to the header and body section of the header.php file. However, certain themes don’t allow this action or use a different name for the file.

Therefore, you need to familiarize yourself with your theme template files responsible for generating headers and navigation in your site.

Once you open the header.php file, add the first tracking code to the header section, specifically on the very top of the <head> element.

<head>
<!-- Google Tag Manager --><script>(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'?'&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-WHWQMKM');</script><!-- End Google Tag Manager →
<!-- Other code follows after the tracking code -->
</head>

Similarly, add the second tracking code to the header section, specifically on the very top of the <body> element.

<body>
<!-- Google Tag Manager (noscript) →<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WHWQMKM"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) →
<!-- Other code follows after the tracking code -->
</body>

Save the changes once you’re done.

Due to the nature of the theme template files, you need to be careful when making any changes in the header.php file.

Failure to do it correctly would result in a broken template and improper tracking code functioning.

That being said, it’s best to make a copy of the file’s code before making any changes to it. That way, if things go south, you can always restore the original code.

Adding Tracking Tags to Google Tag Manager

After successfully implementing the tracking code into your site, it’s time to learn how to add tracking tags to your Google Tag Manager account.

    1. Going back to your  Google Tag Manager Dashboard, click Add a new tag under the New Tag section.New Tag section on Google Tag Manager
    2. Click on the Tag Configuration section to choose the tag you want to add.
      Tag Configuration on Google Tag Manager

      Pro tip: Depending on the type of tag, you may need to provide certain data regarding your Partner ID. To do so, you need to know what specific requirements your product demands prior to this step.

    3. Don’t forget to set the trigger via the Triggering section. This step determines the action that will trigger your tracking tag to load.
    4. Once you’re done, click the Save button on the top right corner of the page.
    5. Rename the tag appropriately, then click Publish.

Congratulations, now you’re all set to use Google Tag Manager!

Conclusion

Google Tag Manager is a free tag management system that allows you to manage multiple tracking tags simultaneously. Not only that, the system is capable of tracking user behavior and conversions, producing analytics for digital marketing purposes.

To implement Google Tag Manager WordPress, you’re required to do these steps:

  • Sign up for Google Tag Manager
  • Get the GTM code snipped
  • Add the tracking code to your WordPress header and body section
  • Configure and publish your tags on Google Tag Manager

Easy to use, free, and highly beneficial. What’s not to love?

About the author

Jordana Alexandrea

Jordana is Hostinger's Digital Content Writer. She is passionate about content creation, SEO writing, and the growth of information systems. During her free time, she dabbles in freestyle writing and the latest gaming news.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!

More in WordPress Tutorial
10 Best WordPress Review Plugins of 2019
Close