Development Marketing

Set up Google Tag Manager to WordPress like a pro

BY WPreveal Editorial
Last edited:
 October 27, 2023
Reading time:
 16 mins

/

Blog

/

Development, Marketing

/

Set up Google Tag Manager...

đź’ˇWe may earn a commision if you subscribe to a service from a link on this page.

In today’s digital landscape, tracking and managing website data is crucial for optimizing performance, making informed decisions, and understanding user behavior. Google Tag Manager (GTM) is a powerful tool that simplifies the process of adding and managing various tracking codes, pixels, and tags on your WordPress website. With GTM, you can efficiently deploy analytics, advertising, and other marketing tools without the need for manual code implementation. In this comprehensive guide, we’ll take you through the process of setting up Google Tag Manager in WordPress like a pro, allowing you to harness the full potential of this versatile platform.

Table of Contents

  • Introduction
  • Step 1: Create a Google Tag Manager Account
  • Step 2: Set Up Your First Container
  • Step 3: Install Google Tag Manager on Your WordPress Site
  • Step 4: Configure Basic Tags
  • Step 5: Test and Publish Your Container
  • Advanced GTM Techniques
  • Conclusion

Introduction

Before diving into the technical aspects of setting up Google Tag Manager, let’s briefly understand what GTM is and why it’s essential for your WordPress website.

What Is Google Tag Manager?

Google Tag Manager is a user-friendly platform that allows website owners and digital marketers to manage and deploy tracking codes, scripts, and tags on their websites without the need for developer intervention. It acts as a container that holds all your tags in one place, making it easier to add, edit, and organize various tracking tools like Google Analytics, Facebook Pixel, AdWords Conversion Tracking, and more.

Why Use Google Tag Manager?

  • Simplified Management: GTM streamlines the process of adding and managing tags. Instead of manually inserting code snippets into your site’s HTML, you can use GTM’s intuitive interface to set up and customize tracking.
  • Enhanced Flexibility: With GTM, you have the flexibility to control when and where your tags fire. You can specify conditions, triggers, and variables to fine-tune tag behavior.
  • Real-time Debugging: GTM provides a debug console that helps you identify and troubleshoot issues with your tags before they go live, ensuring accurate data collection.
  • Version Control: GTM allows you to create and save versions of your container, making it easy to roll back changes or compare different configurations.
  • Collaboration: Multiple team members can collaborate on a GTM container, streamlining the workflow for marketing, development, and analytics teams.

Now that you understand the importance of Google Tag Manager let’s proceed with the setup process.

Step 1: Create a Google Tag Manager Account

The first step in setting up GTM is to create an account if you don’t already have one. Here’s how:

  1. Visit the Google Tag Manager website: Go to Google Tag Manager and sign in with your Google account. If you don’t have one, you’ll need to create one.
  2. Create an account: Click the “Create Account” button, and you’ll be prompted to enter an account name. This name can be your business name, website name, or any identifier you prefer. Choose the appropriate country and time zone for your location. Lastly, since we aim to add the code to a WordPress website, we choose the target platform to be Web.
  3. Accept terms and conditions: Review and accept the Terms of Service Agreement.
  4. Set up your container: After creating your account, you’ll be asked to set up your first container. A container is a collection of tags, triggers, and variables specific to a website or mobile app. Enter your container name, select “Web” for the platform, and choose your target country.
  5. Set/Accept the data sharing settings: You’ll be asked to accept data sharing settings for your account. Make your selections based on your preferences.
  6. Copy the GTM container code: After completing the setup, you’ll be presented with two code snippets: one for the container header and another for the container body. These code snippets are crucial for implementing GTM on your WordPress site. Keep them handy for the next steps.

Step 2: Set Up Your First Container

With your Google Tag Manager account created, it’s time to configure your first container. The scope of this article is not how to create proper events and tags, rather than how to properly add the GTM code to your website. However in order to verify everything is working correctly, it is suggested you have some events that are easy to trigger for testing purposes. If you have no such event configured, let’s present a reminder of how to create set up your first container create some tags. Follow these steps:

  1. Access your container: Log in to your Google Tag Manager account, and you’ll see your newly created container listed. Click on the container to open it.
  2. Understanding the GTM Workspace: When you enter your container, you’ll find yourself in the GTM workspace. This is where you’ll create and manage your tags, triggers, and variables. Familiarize yourself with the workspace, as you’ll spend most of your time here.
  3. Create Your First Tag: Click on “Add a new tag” to start creating your first tag. Give your tag a descriptive name to easily identify it later.
  4. Configure your Main Google Tag: In order for every GA4 event measurement to be enabled, you’ll need the main Google Tag to be firstly installed. We like to call it “GA4 Configuration” tag because it reflects it’s cause. (And because it was called like that in the first place, Google recently changed it’s name). Add the Tag ID of your Google Analytics account:
  5. Configure your first Event Tag: GTM offers a wide range of tag templates, including Google Analytics, Facebook Pixel, AdWords Conversion Tracking, and more. Choose the tag type that corresponds to the tool you want to deploy and configure the tag settings accordingly. For instance, if you’re setting up a Google Analytics 4 event, select the “Google Analytics: GA4 Event” tag and enter your measurement ID.
  6. Set Triggers: Tags fire based on triggers. Triggers specify the conditions under which your tag should run. You can use built-in triggers like “All Pages” or create custom triggers based on specific events, such as form submissions or button clicks.

    Let’s create a tag that will trigger every time we click a button which redirects to a specific page (could a “Contact Us” button redirecting to the contact page of your website). For that, we should choose All Elements as a trigger type:

    Then, we select “Some Clicks” and from the options that become available next, we select Page URL and contain. By adding “/contact-us” to the field, we will track only button clicks that send to our contact us page:
  7. Save Your Tag: After configuring your tag and triggers, save it. You can then proceed to create additional tags, triggers, or variables as needed.

Step 3: Install Google Tag Manager on Your WordPress Site

Now that you’ve set up your GTM container and configured your first tag, it’s time to install GTM on your WordPress website. This involves adding the GTM container code snippets to your site’s HTML. There are to ways to do that:

1. Manually Add the Code (Recommended):

Adding Google Tag Manager (GTM) to your WordPress website via a child theme’s functions.php file and the wp_header and wp_body_open hooks is a robust and safe approach. This ensures that your GTM container code remains intact even when you update or switch themes. Let’s go through the process step by step:

Step 1: Create or Activate a Child Theme (If Not Already Done)

If you’re not using a child theme already, create one to avoid making changes directly to your parent theme, which can be overwritten during theme updates. You can create a child theme manually or use a plugin like Child Theme Configurator.

Step 2: Access Your Child Theme’s functions.php File

Navigate to your child theme’s folder via FTP or your hosting file manager, and locate the functions.php file.

Step 3: Add the GTM Container Code

Inside your child theme’s functions.php file, you’ll add the GTM container code. First, you should declare your function to inject the GTM container code into the <head> section of your website. Next, you’ll hook the add_google_tag_manager function to the wp_head action. This ensures that the GTM container code is added to the <head> section of your WordPress site. Here’s an example:

<?php
/* Function to add GTM container code to the <head> section */
function add_google_tag_manager() {
?>

// Output the GTM container code
// Replace 'GTM-XXXXXXX' with your actual GTM container ID

<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-XXXXXXX');</script>

 <?php
}

// Hook the function to wp_head
add_action('wp_head', 'add_google_tag_manager');

Step 5: Add a NoScript Tag

To ensure your site remains functional for users who have JavaScript disabled, you should also add a <noscript> tag. This tag typically appears right after the opening <body> tag in the HTML document. We can hook the add_google_tag_manager_noscript function to the wp_body_open action, which ensures that the GTM noscript tag is placed just after the opening <body> tagHere’s how to do it:// Function to add the GTM noscript tag

<?php
 function add_google_tag_manager_noscript() {
// Replace 'GTM-XXXXXXX' with your actual GTM container ID

?>
// Output the GTM noscript tag

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe></noscript>

 <?php 
} 
// Hook the noscript function to wp_body_open 
add_action('wp_body_open', 'add_google_tag_manager_noscript');

Step 7: Save and Verify

Save your child theme’s functions.php file after adding the code. You should now have the GTM container code injected into the <head> section and the <noscript> tag placed immediately after the opening <body> tag.

This approach is preferred because:

It keeps your GTM implementation safe from theme updates or changes.
It ensures that the container code and <noscript> tag are correctly placed in the HTML structure.
It allows you to easily manage the GTM implementation within your child theme.
It retains functionality for users with JavaScript disabled by including the <noscript> tag.
Remember to clear any caching mechanisms on your website to see the changes take effect immediately. Additionally, you can use the GTM Preview mode to verify that your tags are firing as expected.

2. Install a Plugin (Not recommended):

If you are reading our blog you have realized by now that we avoid plugins that do work we can do otherwise. However if you prefer a plugin-based approach for adding code snippets, you can install a plugin like “Insert Headers and Footers.” This plugin allows you to insert code into your site’s header or footer without modifying theme files directly. Simply install and activate the plugin from the WordPress Plugin Directory.

Verify Your Installation:

After adding the GTM code, it’s essential to verify that it’s working correctly. You can use the GTM Preview mode or browser extensions like Google Tag Assistant to check if your tags are firing as expected. This step is crucial for ensuring that your tracking and tags are functioning correctly before you publish your container.

Step 4: Configure Basic Tags

With GTM installed on your WordPress site, you can now configure and deploy various tags to track user interactions, conversions, and other important data. In the previous example we barely installed a GA4 event. Here are some common tags you might want to set up:

  • Google Analytics: Track user behavior, traffic sources, and conversions on your website.
  • Facebook Pixel: Measure ad campaign performance and retarget users on Facebook.
  • AdWords Conversion Tracking: Monitor the success of your Google Ads campaigns.
  • Scroll Tracking: Track how far users scroll down your pages.
  • Form Submission Tracking: Measure the number of form submissions on your site.

Each tag type has its own configuration settings and requirements. Consult the documentation for the specific tools you’re using to ensure proper setup.

Step 5: Test and Publish Your Container

Before deploying your tags to your live website, it’s crucial to test your container to ensure that everything is working correctly. Google Tag Manager provides a Preview mode that allows you to test your tags in a controlled environment.

  1. Enter Preview Mode: In your GTM container, click the “Preview” button located in the top-right corner of the workspace.
  2. Open Your Website: A new browser tab will open with a GTM Debug Console on the bottom. This tab represents your website in Preview mode.
  3. Test Tags: Navigate through your website, interact with various elements, and trigger the events associated with your tags. In the Debug Console, you can see which tags are firing and any errors or warnings related to your configurations.
  4. Debug and Adjust: If you encounter any issues during testing, return to the GTM workspace, make necessary adjustments to your tags, triggers, or variables, and then re-enter Preview mode to retest.
  5. Publish Your Container: Once you are satisfied that everything is functioning correctly, exit Preview mode and click the “Submit” button to publish your container changes to your live website.

Harness the power of GTM in WordPress!

Congratulations! You’ve successfully set up Google Tag Manager in your WordPress website, allowing you to manage and deploy tracking codes with ease. GTM empowers you to track user interactions, gather valuable data, and make data-driven decisions to improve your website’s performance and user experience.

Remember that Google Tag Manager offers limitless possibilities for tracking and customization. As your website and marketing strategies evolve, you can continue to expand and refine your tracking implementations using GTM. Always test and validate your configurations to ensure accurate data collection, and stay up-to-date with the latest features and best practices offered by Google Tag Manager.

WPReveal