Advanced Web Performance Tracking with GTM - Google Tag Manager

Advanced Web Performance Tracking with GTM - Google Tag Manager

·

3 min read

GTM is a powerful free tool and most organizations are not using GTM to its fullest potential. Below are a few brief examples of how I've implemented advanced custom tracking. These tags, variables and triggers have contributed to a better analytical understanding of a website's performance.


Custom Dimensions - Page Metadata with Custom JavaScript

Large websites have categories or groupings of pages and sometimes they don't always follow the same ULR pattern, otherwise analyzing by /blog/content-group1/mypost123 would be easy.

There is often a ton of metadata contained within a CMS and little of is exposed directly on the webpage, either visibly to the end-user or in the URL pattern but this data is still useful for analysis!

In GTM, I've implemented custom JavaScript to pickup meta tags in the page's HTML. This Custom JavaScript variable can then be used to add as a custom dimension in the page view tag.

function getPageSubType() {

  return document.querySelector('meta[name="analytics-subtype"]').content;
}

This is another example that is a little more complex but my client wanted to analyze blog post author performance within Google Analytics. This variable grabs onto an element that contains the author's information. There is some logic in this to account for multiple and single-authored blog posts.


function getMeta() {

  authors = document.getElementsByName('cludo:authors');

  if (authors.length == 1) 
      {
      return authors[0].getAttribute('content');
      }

  else 
  {
  authors_string= ''; 
          for (var i =0; i < authors.length; i++)
            {
                if (i != authors.length -1) //if doesn't equals last iteration, add spacer bt authors
                {
                  authors_string += authors[i].getAttribute('content') + ", ";
                }
                  else 
                {
                 authors_string += authors[i].getAttribute('content');
                }

              }
   return authors_string;
  }
}

Lookup Tables & Custom Triggers - Analyze Hotspots

GTM lookup tables take an input and output a result based on what the input matches. It's a fairly simple logic table that could be accomplished in a Custom JavaScript variable but this built-in variable type is much cleaner and easier to read for most folks.

This specific variable takes in a click class upon the user clicking, depending on where they click on the homepage, those specific links are recorded and segmented by 3 different types.

This allowed my client to analyze which featured links on the homepage were the most popular.

This is another example that utilizes a trigger to specifically track clicks on the favorite button of articles. This trigger then fires the favorite_this tag that funnels a custom event to GA4.

Timers - Analyze Time on Page

With the release of GA4, it's trickier to analyze time on page performance as we were all used to having as a default metric in UA.

GTM timer trigger types allow events to fire at certain intervals. For instance, the example below fires on all pages (Regex matches all) every 15 seconds.

You can also couple these triggers types with form fills, purchase funnels and any other interaction where it's insightful to see how long users take to perform an action.


This is just scratching the surface of what GTM can do! Some might question why GTM is needed when web developers could accomplish all of this by sending custom dataLayer events. That is true however, the power in GTM allows fast iteration and deployment of purely analytical initiatives that are decoupled from the main site's deployment. If you want to learn more about GTM let me know!