Fienen’s Totally Topical, Terrific Tutorial to Tag Manager Guide

Recently, I’ve talked at events on the subject of how higher education institutions can begin to think about Tag Manager as a strategic asset in their digital strategy plans. Below you’ll find a number of things, including audio/video of my talk (once it’s available), presentation slides, and links to many of the resources I mentioned.

Resources

Google Analytics Academy

Google offers an extremely good tutorial series that will guide you through the initial setup and creation of your first tags. It doesn’t take long to go through the lessons, and they give you a good handle of the basics that will lead you into doing more complex things.

https://analyticsacademy.withgoogle.com/course/5

LunaMetrics

LunaMetrics is a Google Analytics consulting firm that maintains a pretty up to date and comprehensive series of posts that include tutorials on Google Tag Manager, with an emphasis on how it integrates with Google Analytics. They also offer a library of preconstructed tags that you can download and import into an existing container (notwithstanding tweaks you need to make to have it be correct for you specific use case).

http://www.lunametrics.com/blog/category/google-tag-manager/

Simo Ahava’s Blog

Simo is a Google Developer Expert and senior data advocate at Reaktor. Dude’s crazy smart. And while he blogs about many topics surrounding data, he’s also one of the foremost bloggers on Google Tag Manager. His blog has a wealth of posts and tutorials explaining how to accomplish all kinds of different tasks using Google Tag Manager.

http://www.simoahava.com/tag/google-tag-manager/

Ultimate List of 90+ Google Tag Manager Resources

Like the title states, this is just a crap ton of GTM stuff of all varieties, sorted and linked for whatever you need. This should keep you busy for quite a while.

https://www.analyticsmania.com/post/google-tag-manager-resources/

My Articles

Examples

OUTC17 Container Examples

You can find the JSON file for the examples shown at my talk at OUTC17 that you can import into your own container in this Gist: https://gist.github.com/thequicksilver/9a3ea1d6af944c04e399a4613062840c. This export file contains the pageview tags with audience custom dimensions and variables, form abandonment, and menu tracking cases. If you need help importing a container, follow these instructions.

Slideshow Usage Tracking

This setup will allow you to track the previous and next clicks on a page’s slideshow. Setup with your slideshow will vary somewhat depending on the library or code you use to employ the slideshow, but the basic principle should be the same regardless. This functionality requires a tag and trigger (obviously), a variable for the slide name, and a dataLayer event.

The JavaScript

First, this is the basic JavaScript you need to push the event to the dataLayer. This will go in your actual JavaScript code for your site (depending on your configuration, it is possible that you could do this in a JavaScript Variable in Tag Manager instead, it just depends on your setup). In our case, this is done using one of the callbacks available as part of the slideshow library we are using. Basically, whenever a new slide loads, it pushes an event to the dataLayer to tell Tag Manager the slide has changed. The important bit is the dataLayer.push() which is sending an event called slideNavClick to Tag Manager, and including the plaintext name of the panel as well, which we use in the tracking, with the key name slideName.

/* All the stuff dealing with the slideshow config prior to this callback... */
onSlideAfter: function (slide, oldIndex, newIndex) {
  dataLayer.push({
    'event':     'slideNavClick',
    'slideName': $(slide).find('h2').text()
  });
  return this;
}
/* ...closing out slideshow code after this */

The Variable

This is pretty flexible depending on your setup. Alternatively, you could use something like an index number rather than a panel name, depending on your use case. For me, I like the name as it makes it easy to read in a report. This process creates a dataLayer variable called slideName which you’ll see used below in the tag. As you can see, the Data Layer Variable Name matches what we used above in the JavaScript code in the dataLayer.push(), so the value will end up matching whatever
$(slide).find('h2').text() returned.

Creating the slideName dataLayer variable

Creating the slideName dataLayer variable

The Trigger

The trigger is based on the Custom Event type. This is where you can tell Tag Manager that you are providing a value in the dataLayer‘s event key that is defined by you. For our purposes, we will call this slideNavClick (in this case, I’m not distinguishing between previous/next clicks, just that navigation of some kind happened). When Tag Manager sees this custom event name come through the dataLayer, it will check it against tag firing conditions. As with the variable name, you’ll see this referenced in the JavaScript above.

Creating the slideNavClick custom event

Creating the slideNavClick custom event

The Tag

The tag is based on the integrated Google Analytics type, which gives us access to it’s configuration options without any extra work. We use a previously defined variable (a lookup table) called gaProfileId that gives the tag the GA profile to route the data to. We then tell it we want this Track Type to be an event (rather than a pageview or other option). We then set the Category and Action of the analytics event to a plaintext string that will be consistent. The Label brings back our slideName variable from earlier, which you can see being concatenated with the prefix “Slide: “, which will result in labels like “Slide: Your Slide’s Title”. We also allow the tag to fire an unlimited number of times, since we know there’s no limit to how many times people can click through slides.

Tag configuration

Tag configuration

Slides

OUTC17

HighEdWeb 2016

  • Matt Carter

    My favorite presentation of the conference. I have already setup a few new events to track since I got back in the office. You mentioned some tracking of carousels that you did, do you have any sample code you can share on that?

    • Michael Fienen

      Absolutely. I’ll update the post with some examples in the morning.