How To Add Google Tag Manager To Your Website

In this tutorial, we'll show you how to add Google Tag Manager to your website and take advantage of its many tracking features to track affiliate links, buy button, subscribe button, download, link shorteners and more.

We will also go over how to set up triggers and events for link tracking.

What is Google Tag Manager?

Google Tag Manager is a free tool that allows website owners to manage all of their website's tracking tags in one place without having to edit the website's code. With Google Tag Manager, you can easily add, update, or remove tags from your website, such as Google Analytics, Google Ads, Facebook Ads, Floodlight, and other third-party tags.

By using Google Tag Manager, you can gain valuable insights into your website's performance, track conversions, and analyze website traffic.

Creating a Google Tag Manager Account

The first step to adding Google Tag Manager to your website is to create an account. To do this, go to the Google Tag Manager website and click on the "Start for Free" button. If you have a Google account, you can sign in with that, otherwise, you will need to create a new account.

Once you have created your account, you will need to create a container for your website. The container is where all of your website's tags will be managed. To create a container, enter your container name, which could be your domain name, select the platform you are targeting, and agree to the terms of service.

Inserting Google Tag Manager Code - Manual Method

After you have created your account and container, you will need to insert the provided code onto every page of your website. To do this, you can either use a plugin or manually add the code to your website's header.php file.

If you choose to manually add the code, go to your WordPress dashboard, click on "Appearance," then "Theme Editor." Locate the header.php file on the right sidebar, and add the codes from the Google Tag Manager into the head and body sections accordingly. Click on the "Update File" button, and you're done!

Here are the detailed steps:

  1. Copy the header Google Tag snippet from your Google Tag Manager account.
  2. Log in to your WordPress website and navigate to Plugins > Add New.
  3. Search for "hfcm" (Header Footer Code Manager by 99 Robots) and install and activate the plugin. It's recommended to back up your WordPress website before installing new plugins.
  4. Click on "Add New" under "hfcm" and provide the following details:
    • Snippet Name: Google Tag Manager Header
    • Site Display: Site Wide
    • Location: Header
    • Snippet Code: Paste the header code you copied earlier
  5. Click "Save" and repeat the process for the body snippet by selecting "Footer" as the location.
  6. To double-check that Google Tag Manager is functioning correctly on your website, install the Google Tag Assistant Chrome extension and enable it on your website. You should see a smiley face next to "Google Tag Manager," indicating successful activation.

Installing Google Tag Manager - Plugin Method

The plugin method is so much easier without having to mess around with php file. 

  1. Install the Google Tag Manager for WordPress plugin from the WordPress Plugin Directory.
  2. Go to the Google Tag Manager website and create a new container for your website if you haven't already.
  3. In the Google Tag Manager dashboard, create a new tag for the event you want to track (e.g., button click).
  4. Set up the trigger for the tag, which determines when the tag fires (e.g., when a specific button is clicked).
  5. In the Google Tag Manager dashboard, publish the changes to the container.
  6. Go to the Google Tag Manager for WordPress settings in your WordPress dashboard and enter your Google Tag Manager ID.
  7. Enable the "Click" tracking feature in the plugin settings to track button clicks automatically.
  8. Optionally, set up custom event tracking or data layer variables in the plugin settings.
  9. Save the plugin settings and test your event tracking to make sure that it is working correctly

Verify With Google Tag Assistant Chrome Extension

Google Tag Assistant is a Google Chrome extension that helps you verify if Google Tag Manager is properly installed on your website and if clicks or other events are being tracked correctly. 

Tag Verification

After installing the Google Tag Assistant extension on your Chrome browser, it checks your website for the presence of Google Tag Manager code snippets in the header and body sections. If Google Tag Manager is installed correctly, you will see a smiley face icon next to the "Google Tag Manager" label in the extension panel, indicating successful installation.

Tag Status

Google Tag Assistant provides real-time information on the status of your tags, whether they are firing correctly or encountering any issues. This helps you identify potential problems and fix them promptly to ensure your tracking is accurate.

Tag Details

The extension displays detailed information about each tag, such as tag type, ID, firing status, and any associated triggers and variables. This allows you to verify if the tags are configured correctly and if they are tracking the desired events.

Event Tracking

Google Tag Assistant also enables you to monitor real-time events, such as clicks, as they occur on your website. By navigating through the extension's panel, you can view a list of events being tracked and their corresponding tags. This helps ensure that you're capturing essential user interactions.

Set Up Click Tracking

The user can use Google Tag Manager (GTM) to track clicks on shortened links created using link shorteners like Bitly, Pretty Links or TinyURL. The process is similar to tracking affiliate links

Here's how to set it and just follow it to rinse and repeat.

Create a Trigger

First, you need to create a trigger that will fire when a user clicks on an affiliate link. To do this:

  1. Log in to your Google Tag Manager account and navigate to your container.
  2. Click on "Triggers" in the left sidebar, and then click on "New."
  3. Name the trigger (e.g., "Affiliate Link Click") and choose "Click - Just Links" as the trigger type.
  4. In the "Trigger Configuration" section, select "Some Link Clicks" under "This trigger fires on."
  5. Set the conditions for firing the trigger. For example, you can use the "Click URL" variable and set the condition to "contains" and enter a part of the affiliate link URL (e.g., "amazon.com" for Amazon links).
  6. Click "Save" to create the trigger.

Create a Google Analytics Event Tag

Next, create a Google Analytics tag to track the affiliate link clicks as events.

  1. Click on "Tags" in the left sidebar, and then click on "New."
  2. Name the tag (e.g., "GA - Affiliate Link Click Event") and choose "Google Analytics: Universal Analytics" as the tag type.
  3. In the "Tag Configuration" section, select "Event" as the track type.
  4. Set the event tracking parameters, such as "Category," "Action," and "Label." For example, you can use "Affiliate Link" as the category, "Click" as the action, and "{{Click URL}}" as the label to capture the clicked affiliate link URL.
  5. Under "Google Analytics Settings," choose your Google Analytics variable or enter your tracking ID manually.
  6. In the "Triggering" section, select the trigger you created earlier (e.g., "Affiliate Link Click").
  7. Click "Save" to create the tag.

Preview and Publish

Test your configuration by using GTM's preview mode:

  1. Click on "Preview" in the top right corner of your GTM container.
  2. Open your website in a new browser tab. You should see the GTM preview pane at the bottom of the page.
  3. Click on your affiliate links to verify that the tag is firing correctly. You should see the tag listed under the "Tags Fired On This Event" section in the preview pane when clicking on an affiliate link.
  4. Once you're satisfied with your configuration, go back to your GTM container and click "Submit" to publish your changes.

Verify in Google Analytics

To ensure that your affiliate link tracking is working correctly, check the event data in your Google Analytics account:

  1. Log in to your Google Analytics account and navigate to the appropriate property and view. 
  2. Go to "Behavior" > "Events" > "Top Events" in the left sidebar. 
  3. Check for your affiliate link event category (e.g., "Affiliate Link") and verify that the events are being tracked correctly.

FAQ

Does Google Tag Manager Needs To Integrate With Google Analytics

Yes, integrating Google Tag Manager with Google Analytics is a common and recommended practice. Google Tag Manager (GTM) is a powerful tool that simplifies the process of adding and managing various tags, including Google Analytics, on your website.

Since both products are Google, so they already talk to each other by streamlining the process to reduce error.