How to Track Almost Anything with Google Tag Manager and WordPress

by | Sep 1, 2016

One of the advantages for businesses operating in the digital space is the sheer amount of data available, from search data to help you identify the types of keywords your target market is using or the topics and news your users are sharing on social media.

While you can collect this type of data from third parties, there is also a wealth of data that you can collect yourselves.

For many years now, Google Analytics (GA) has been the standard platform for on-site data collection and tracking. By default, it collects a significant amount of information, such as where visitors come from, the countries they are in, how long they spend on a web page, etc. However, if you want to get more specific information, such as individual links users are clicking or how long they view a video, then this would often require the assistance of a developer to add some JavaScript to the page. This would often slow down or completely prevent the tracking of some very useful data due to a lack of development resources.

With the advent of Google Tag Manager (GTM), this is no longer the case. This is an incredibly simple platform to set up on your site and from the admin interface you can track a significant amount of on-site user actions. For example, you can track all clicks on external links, mailto: links and clicks on downloadable files such as PDFs. You can even get as granular as to track the number of times visitors play, pause and watch your YouTube video embeds to the end.

Once the Google Tag Manager script is setup on your site you will very rarely, if ever, have to change the code on your site to set up tracking.

Here’s how to set it up.

Signing up to Google Analytics and Google Tag Manager

Firstly, if you don’t have a Google Analytics account set up you’ll need to sign up for that (it’s free). It’s fairly straightforward so I won’t guide you through that. Once that is set up, visit Google Tag Manager.

Create a Google Tag Manager Account & Container

In Google Tag Manager, you will need to create an account before you do anything else. If this is the first time you are using GTM, then you should already be presented with an Add a New Account screen.

  1. Add your account name, such as your business name
  2. Type your business website address for the container name
  3. Select Web for Where to use container
  4. Accept the terms and conditions (if you agree, of course!)

Installing Google Tag Manager in a WordPress Theme

Once you have created you Google Tag Manager account, you will be presented with a snippet of code.

Installing Google Tag Manager into a WordPress theme is really easy. You can use a plugin; however, I still think it is best to paste the code snippet into your theme. Please note that if you are using a theme created by somebody else, then it is recommended to create a child theme to make edits such as this. If you don’t, then you risk losing any changes you have made if the theme gets updated.

Open up your header.php file and copy and paste the code snippet from Google Tag Manager just after the opening <body> tag as shown below:

https://gist.github.com/raewrites/b8702d8b021d9085adf5284a4f551ae3

The code above is an example of a Google Tag Manager snippet. Replace GTM-XXXXXX with your tracking ID.

Easy done! You now have Google Tag Manager Installed on your WordPress site.

Google Tag Manager Interface

The Google Tag Manager interface can be a little confusing if you haven’t used it before. Here is a breakdown of each of the sections.

The accounts interface in Google Tags Manager.
The accounts interface in Google Tags Manager.

Accounts

This is where you just set up your account and container. Here you can add more accounts if you manage multiple websites and you can also create new containers. For example, if you also have a mobile app.

Check out your Google tag activity.
Check out your Google tag activity.

Container

This is where all of the fun stuff happens. Here you can see a dashboard with an overview of your tag manager activity and you can also navigate to tags, triggers, variables and folders.

Tracking tags in Google Tag Manager.
Tracking tags in Google Tag Manager.

Tags

These are snippets of code that execute on a page, often to send data to a third party application like Google Analytics. Generally, tags will fire when a page loads, however, this can be changed within each tag’s settings.

Setting triggers with Google Tag Manager.
Setting triggers with Google Tag Manager.

Triggers

These are conditions that are either true or false depending on how variables compare with values you set when defining the trigger. Triggers are then used to fire tags.

Setting variables in Google Tag Manager.
Setting variables in Google Tag Manager.

Variables

Variables can be virtually any value and some are predefined. For example, the “url” variable always contains the URL of the page that is currently loaded.

Managing your folders in Google Tag Manager.
Managing your folders in Google Tag Manager.

Folders

These are simply a way for you to organise your tags, triggers and variables. You can create whichever folders you like and organise them how you see fit.

Keep an eye on which versions you're using.
Keep an eye on which versions you’re using.

Versions

For those that have used any service like Git, this is essentially GTM’s version control. Imagine you make some changes to Google Tag Manager and you end up breaking something, but you aren’t sure what. Here you can re-publish one of the prior, working versions of GTM.

The admin screen, as you would expect.
The admin screen, as you would expect.

Admin

This section is what you would expect it to be. Here you can manage which users have access to your account, import containers, export containers as well as find your Google Tag Manager code snippet.

Your changes will go live when you hit the "Publish" button.
Your changes will go live when you hit the “Publish” button.

The Publish Button

One of the most important parts of the interface. None of the changes you make to your tags will be live until you press the “Publish” button.

Set up Google Analytics with Google Tag Manager

Now you know what each of the interface elements are, let’s set up Google Tag Manager so Google Analytics will track visits to your site.

Setting up Google Analytics with Google Tag Manager to track standard pageviews is easy:

  1. Open up your GTM dashboard
  2. Click on Create Tag and select the Google Analytics template
  3. Name your tag something like “GA Pageview” as this will be tracking pageviews and you can set up other tags for GA. Don’t call it just “GA.”
  4. Add your Google Analytics property ID, e.g. UA-XXXXXXXX-X
  5. Select the track type Page Views
  6. Choose your firing triggers, which generally will be “All Pages” for this tag, but feel free to select something else if you don’t want to track pageviews with GA on every page
Setting up analytics.
Setting up analytics.

Now onto the fun stuff!

Event Tracking with Google Tag Manager

Event tracking in GA is a really useful feature for tracking user actions on your site. It can provide insights that will help you to make UX, UI and marketing decisions. You can track all manner of events, including external link clicks, video play button clicks and form submissions.

Events are made up of four fields: eventCategory, eventAction, eventLabel and eventValue. The first three fields are text and the eventValue field is an integer.

  • eventCategory – this is required and is generally the object that has been interacted with, i.e. a video
  • eventAction – this is required and should be how the user interacted, i.e. a click
  • eventLabel – this is optional and can be used as a form of categorising, i.e. the name of a video
  • eventValue – this is optional and is an integer used to represent some form of value, i.e. each lead gen enquiry on average is worth £50

Tracking mailto: Link Clicks

Let’s get into our first event to track.

We’ll track clicks on all email links, i.e. all links that contain “mailto:” within the “href” attribute. Why would we want to track email clicks? Well, we can’t be certain an email is actually sent, but we can at least track which users have made an intention to send an email.

Setting this up is pretty easy and allows us to get some practice creating triggers and tags:

Create the VariableNavigate to “Variables” within your container

  1. Navigate to Variables within your container
  2. Ensure that Click URL (within Clicks) is checked
Creating a new variable.
Creating a new variable.

Create the Trigger

  1. Navigate to Triggers
  2. Click New
  3. Name your trigger, i.e. Email Click Trigger
  4. Under Choose event, select Click
  5. Under Configure Trigger select Just Links
  6. Leave Wait for tags checked and with a value of 2000 milliseconds
  7. Leave Check Validation checked
  8. Under Enable When select “Page URL” “matches RegEx” “.*”
  9. Under Fire On select ‘Click URL” contains “mailto:”
  10. Click Save Trigger
Creating a trigger.
Creating a trigger.
  1. Create the Tag
  2. Navigate to Tags
  3. Click New
  4. Name this new tag, i.e. Email Click Tag
  5. Under Choose Product select Google Analytics
  6. Under Choose Tag Type select Universal Analytics if that is how you have set up your GA
    1. Under Configure Tag choose/type the following:
    2. Tracking ID is your GA tracking ID
    3. Track Type select Event
    4. Category can be anything you like but I would recommend something like “Email”
    5. Action can be anything but I would recommend “Click”
    6. Label should be {{Click URL}} but can be anything you like
    7. Value – If you have an idea of how much value you would attribute to each email enquiry that you receive, then you can add that here
    8. Leave the other settings as they are
  7. Click Continue and under Fire On select the trigger that we have just created for mailto: links
  8. Click Create Tag
Creating a new tag.
Creating a new tag.

That’s it! It seems like a lot of steps but it’s actually really quick.

Quick tip: You can track telephone number clicks the same way. Simply set up a new trigger for clicks on links that contain tel: and then create a tag to track the event in Google Analytics.

SITE MANAGEMENT

Manage multiple WordPress websites with The Hub

The Hub is your mission control for monitoring the vital stats of all your sites, including uptime, performance and security. Add as many sites as you want – including Multisite networks – and receive instant security alerts, run performance scans, and get notifications when any of your plugins or themes need to be updated.

FIND OUT MORE

Tracking Internal Link Clicks

We can track whether people are clicking on mailto: or tel: links, but what if we want to know whether people are clicking on a banner or whether they are clicking on a text link within an article? We can do that really easy within WordPress, GA and GTM.

There are actually a number of ways that we can set this up, but a really easy way is to make use of either class or id attributes. Before we set up anything in GTM, we need to make sure that the link we want to track either has a unique ID attribute or if it is multiple links of the same type, e.g. all footer links, then they should all have a class that is specific to them as a group (recommended) or each one would require a unique ID.

Depending on how your theme is built will determine the next step. If you can edit the links you want to track with the WordPress text editor, then it is an easy process to add an id attribute or class to your links. If you can’t edit the link in the WordPress text editor then you may need to edit your actual template files to add the id or class attributes. Remember to create a child theme when editing your theme template files.

Create the Variable

  1. In your GTM container dashboard, navigate to Variables
  2. Make sure that you have Click Classes and/or Click ID checked
Creating a variable for internal link clicks.
Creating a variable for internal link clicks.

Create the Trigger

  1. Navigate to Triggers
  2. Click New
  3. Type in a name for this trigger, i.e Banner Click Trigger
  4. Under Choose Event select Click
  5. Under Configure Trigger select Just Links and leave Wait for tags and Check Validation checked
  6. Under Enable When select “Page URL” “matches RegEx” “.*”
  7. Under Fire On click Some Links
  8. Select either Click ID or Click Classes (depending on whether you used ID or class attributes)
  9. Select equals if using IDs or contains if using classes (sometimes you may want contains or matches RegEx for IDs as well)
  10. Add either the ID or class of the link that you want to track into the text box
  11. Click Create Trigger
Creating a trigger for internal link clicks.
Creating a trigger for internal link clicks.

Create the Tag

  1. Navigate to Tags
  2. Click New
  3. Name this new tag, i.e. Banner Click Tag
  4. Under Choose Product select Google Analytics
  5. Under Choose Tag Type select Universal Analytics if that is how you have set up your GA
  6. Under Configure Tag choose/type the following:
    1. Tracking ID is your GA tracking ID
    2. Track Type select Event
    3. Category can be anything you like but I would recommend something like “Banner”
    4. Action can be anything but I would recommend “Click”
    5. Label should be {{Click URL}} but can be anything you like
    6. Value – If you have an idea of how much value you would attribute to each banner click, then you can add that here
    7. Leave the other setting as they are
  7. Click Continue and under Fire On select the trigger that we have just created for clicks with the specified ID attribute
  8. Click Create Tag
Finally, creating a tag for internal link clicks.
Finally, creating a tag for internal link clicks.

Easy. We now have events being fired whenever our specified banner is being clicked.

Quick tip: Click events can be tracked on any element, not just links. When choosing the options for Configure Trigger, select All Elements instead of Just Links.

Tracking External Link Clicks

What if we want to track all clicks on external links? Well, this requires a slightly different approach as we will need to create a new variable, but it’s still very simple to set up.

Create the Variable

  1. Go to your GTM container dashboard
  2. Navigate to Variables
  3. Within User-Defined Variables, click New
  4. Name your variable, i.e. Click URL Host Name
  5. Select Auto-Event Variable
  6. Within Configure Variable select Element URL
  7. Select Host Name from Component Type
  8. Click Create Variable
Tracking external links needs to be set up slightly differently.
Tracking external links needs to be set up slightly differently.

Create the Trigger

  1. Navigate to Triggers
  2. Click New
  3. Name your variable, i.e. External Link Click Trigger
  4. Under Choose Event select Click
  5. Under Configure Trigger and Targets select Just Links
  6. Leave Wait for Tags and Check Validation checked
  7. Click Continue
  8. Under Enable When select “Page URL” “matches RegEx” “.*”
  9. Under Fires On select the Click URL Host Name variable that you had created previously
  10. Select does not contain and then enter your website’s domain name, i.e. example.com
  11. Click Save Trigger
Next, you need to create a trigger...
Next, you need to create a trigger…

Create the Tag

  1. Navigate to Tags
  2. Click New
  3. Name your tag, i.e. External Link Click Tag
  4. Under Choose Product select Google Analytics
  5. Under Choose Tag Type select whether you set up GA with Universal Analytics or Classic Google Analytics
  6. Under Configure Tag choose/type the following:
    1. Tracking ID is your GA tracking ID
    2. Track Type select Event
    3. Category can be anything you like but I would recommend something like ‘External Link’’
    4. Action can be anything but I would recommend ‘Click’
    5. Label should be {{Click URL}} but can be anything you like
    6. Value – If you have an idea of how much value you would attribute to each click (if any), then you can add that here
    7. Leave the other setting as they are
  7. Click Continue and under Fire On select the trigger that you have just created
  8. Click Save Tag
And – you guessed it – you next to create a tag, too.
And – you guessed it – you next to create a tag, too.

Easy. Google Analytics will now track every time someone clicks on an external link as an event.

Tracking YouTube Video Events

Tracking embedded YouTube events can provide useful information regarding which videos are actually engaging your visitors. Setting up YouTube embed event tracking is a little more complex than any of the GTM examples so far, but luckily there is a great repository on GitHub which solves many of our problems.

There are actually two ways to get event tracking working with YouTube video embeds using this repo. We will set this up using the more manual approach so that we can understand each of the steps involved. If you would like to use the other method, which involves importing a container into GTM, then please follow the guidelines in this repository’s readme.

Create the Custom HTML Tag

  1. Navigate to Tags
  2. Click New and name your tag, i.e. YouTube Embed API Tag
  3. Under Choose Product click Custom HTML Tag
  4. Under Configure Tag copy and paste everything from this GitHub file into the HTML text input box (make sure you wrap this code with <script></script> tags)
  5. Click Continue
  6. Under Fire On select All Pages
  7. Click Create Tag
Creating a custom YouTube embed API tag.
Creating a custom YouTube embed API tag.

Create the videoUrl Variable

  1. Navigate to Variables
  2. Click New and give this variable the name “videoUrl”
  3. Under Choose Type select Data Layer Variable and click Continue
  4. Under Configure Variable in the Data Layer Variable Name text input, type “attributes.videoUrl”
  5. Click Create Variable
Creating a videoURL variable.
Creating a videoURL variable.

Create the videoAction Variable

  1. Navigate to Variables again, unless you are already there
  2. Click New and give this variable the name “videoAction”
  3. Under Choose Type select Data Layer Variable and click Continue
  4. Under Configure Variable in the Data Layer Variable Name text input, type “attributes.videoAction”
  5. Click Create Variable
Creating a videoAction variable.
Creating a videoAction variable.

Create the Trigger

  1. Navigate to Triggers
  2. Click New and name the trigger “YouTube Video Event”
  3. Under Choose Event click Custom Event and click Continue
  4. Under Fire On in the Event Name text input type “youTubeTrack”
  5. Click Add Filters
  6. Enter “videoAction” “matches RegEx” “Play|Pause|Watch to End|25%|50%|75%”
  7. Click Create Trigger
Creating a YouTube video event trigger.
Creating a YouTube video event trigger.

Create the Event Tag

  1. Navigate to Tags
  2. Click New and name your tag, i.e. YouTube Embed Event Tag
  3. Under Choose Product select Google Analytics
  4. Under Choose a Tag Type select whichever yours is
  5. Under Configure Tag choose/type the following:
    1. Tracking ID is your GA tracking ID
    2. Track Type select Event
    3. Category can be anything you like but I would recommend something like ‘Video’’
    4. Action must be {{videoAction}}
    5. Label must be {{videoUrl}}
    6. Value – If you have an idea of how much value you would attribute to each video event (if any), then you can add that here
  6. Click Continue
  7. Under Fire On select All Pages
  8. Click Create Tag
Creating a YouTube embed event tag.
Creating a YouTube embed event tag.

That’s it! Publish your changes and then go to any page on your website that has a YouTube video embed. Play the video, pause and watch it to the end, then check your Google Analytics Real-Time events and you should see those events being recorded straight away.

Virtual Pageviews and Goal Tracking

Did you know that you can track virtual pageviews with GA? What are virtual pageviews? Well, the “standard” GA pageview is generally triggered when a web page initially loads; however, it is possible to create a virtual pageview in Google Analytics. This is tracked in GA as a pageview and you can set the URL path as whatever you would like.

You may be wondering why you would want to create virtual pageviews. Imagine you have a single page application (SPA) and a lot of the content is loaded dynamically via AJAX, then you are unlikely to be able to track this with a standard GA pageview. Virtual pageviews could be used to track AJAX content generation in this instance.

Virtual pageviews are also great for tracking GA goals that are set up for destination URLs. It is possible to set up GA goals for events, but you cannot set up funnels for them. Funnels can only be used with destination goals and sometimes a goal may not result in the visitor loading a new page.

A great example would be PDF files that visitors can download. In this instance you would have to set up virtual pageviews to track this download as a goal if you wanted to use a funnel. Let’s take a look at how we would set that up.

Create Click URL Path Variable

  1. Navigate to Variables
  2. Click New and name this variable Click URL Path
  3. Select Auto-Event Variable
  4. Within Configure Variable’ select Element URL
  5. Select Path from Component Type
  6. Click Create Variable
Creating a click URL path variable.
Creating a click URL path variable.

Create PDF Download Trigger

  1. Navigate to Triggers
  2. Click New and name this trigger, i.e. PDF Download Trigger
  3. Under Configure Trigger choose Just Links for Target
  4. Click Continue
  5. Under Enable When select “Page URL” “matches RegEx” and type “.*”
  6. Click Continue
  7. Under Fire On click Some Clicks
  8. Select “Click URL” “matches RegEx” and type “\.pdf$”
  9. Click Create Trigger
Creating a PDF download trigger.
Creating a PDF download trigger.

Create PDF Download Tag

  1. Navigate to Tags
  2. Click New and name your tag, i.e. PDF Download Tag
  3. Under Choose Product select Google Analytics and click Continue
  4. Under Choose a Tag Type select the type of GA tag you are using and click Continue
  5. Under Configure Tag, “Tracking ID” is your GA tracking ID
    1. Track Type select Page View
    2. Click More Settings
    3. Click Fields to Set
    4. Select “Page” as the Field Name and {{Click URL Path}} as the Value
    5. You can optionally set campaignMedium; however, if you don’t set this, “medium” will display as “none” in GA
    6. You can optionally set campaignSource; however, if you don’t set this “source” will display as “direct” in GA
    7. You can optionally set title; however, if you don’t set this the title in GA will be set to the title of the page the PDF download link is on
    8. Value – If you have an idea of how much value you would attribute to each PDF download (if any), then you can add that here
  6. Under Fire On click More and select the trigger we have just created
  7. Click Create Tag
Finally, creating a PDF download tag.
Finally, creating a PDF download tag.

Publish your changes and you’re finished.

If you click on any links to PDF files on your site, then these will trigger virtual page views that you can use to set up GA goals with funnels.

Original Article

Help-Desk
Tickets