Device-Specific Tags with Google Tag Manager

Here’s a quick Google Tag Manager tip for you. Let’s just pretend that we’ve already talked about how “20XX is the Year of Mobile” and that I’ve made a few references to Google’s mobile-first index. Great. Now that we have that out of the way, let’s get right into what you came for!

Why You Might Need Device-Specific Analytics Tags

With most organizations these days either having a responsive or adaptive design for their website(s), it’s safe to say that your user experience probably differs across devices types, i.e., desktop vs. tablet vs. mobile experiences. This means that all the analytics data you want to collect for your desktop experience might not translate to your mobile experience. One way to address this disconnect would be to have your analytics tags tailored to each device type – but only when needed.

* You might not need device-specific tagging

Desktop Analytics

Consider UpBuild.io — the site you’re on right now. We’re tracking clicks on our navigation as ‘Event’ hits in Google Analytics to tell us what pages people like you are most interested in and to better understand how you use our site. Using Google Tag Manager, we’re attaching a trigger to each navigation link and sending an ‘event’ to Google Analytics any time one is clicked.

Mobile Analytics

But what about the mobile experience? Our site’s responsive, so you could change the width of your browser window to see what happens, but I’ll save you the trouble: below is a screenshot of how our site looks on mobile phones and tablets. The major difference is that the navigation gets rejiggered and everything collapses into a “Menu” button in order to conserve screen real estate.

So what happens to our navigation tracking?

Nothing is lost, and that’s wonderful! After all, it’s the same HTML underneath (just reformatted) so the GTM triggers will continue to work. However, what we need to account for is that this new “MENU” button showed up! Users on mobile need to tap that before they’ll ever see the navigation, so we want to be sure to track that in analytics as well.

I should probably note that this is a very simple example. Websites with more pronounced desktop <-> mobile differences will have even greater incentives to track some interactions differently depending on the device being used to access the site.

Determining & Using Device-Width in GTM

What we’ll want to do is set up an analytics tag in Google Tag Manager that only fires when the interaction we’re interested in occurs on a mobile or tablet device. We can do that by configuring a new variable in GTM that gets the current pixel-width of the website and then returns either “desktop”, “tablet”, or “mobile”. We can then use that variable’s response as a condition for a tag’s trigger.

Our mobile-specific analytics tag fires when it sees a click that:

  1. matches the CSS selector of the specific button in question, and
  2. occurs when our variable returns “mobile” or “tablet”, i.e., not “desktop”.

If someone managed to click that button while on a desktop, we’d want to ignore it because we don’t care about that scenario. It’s honestly unlikely to happen, but again, this is a simplified example intended to spark ideas within your own situation!

Screen-Width Variable

The first step will be to create a new “Custom JavaScript” variable in GTM called “Screen Width”. The code snippet below will be the contents of that variable.

See the Pen Basic Screen Types by Mike Arnesen (@mike_arnesen) on CodePen.

This function uses JavaScript to get the current width of your browser (in pixels) and translate that into an easy-to-read text string. If you want to apply this to your own website, make sure to put in the responsive break points that your site uses. For example, while we’re using 520 pixels or less to signify “mobile”, your website might break for mobile at 450px, 600px, or anything in between.

The exact same code executes when you click the button below and will show you your device classification right here on the page.

Your current width:

unknown

When you pop this code into GTM, the contents of your “Screen Width” variable should look like this.

Device-Specific Analytics Tag

Once you have that powerful variable available in GTM, you can go ahead and set up a device-specific analytics tag. Notice how the event action is a “touch” as opposed to a “click” since we know that this will only be tracking non-desktop interactions.

Device-Specific Trigger

The trigger comes last and this is where it all comes together. We’re going to tell the analytics tag above to fire only when two conditions are true:

  1. The element that’s clicked matches the CSS selector, #genesis-mobile-nav-primary (the unique ID of that button)
  2. The screen width is either “mobile” or “tablet”.

The end result is that we can collect this click data for mobile and tablet users only. Pretty neat, huh?

Bonus Idea: Clicks vs. Touches

I had an interesting idea as I was writing this up and I wanted to share it. Keep in mind that I’m showing you something you could do, not necessarily something you should do; this is more fun than useful.

At UpBuild, our event action naming convention is to end those values in “click”, e.g., “primary nav click”, “call to action click”, “read more click”. What if we wanted to have those suffixes be dynamic based on screen width?

Easy! Just create a new Lookup Table variable called “Click or Touch”. As the input variable, we’ll feed in “Screen Width”. This means that the screen width will be used to look up whether we want to use “click” or “touch” terminology.

Once we have that, we could use {{Click or Touch}} in any other tag to dynamically populate one of those options. Here’s an example used in the event action field.

 

What Will You Do?

This post is for everyone who didn’t know that it was possible to fire (or modify) analytics tags based on device-type. If that’s you, congratulations! You learned something new and I hope it was enjoyable. With any luck, the gears are already turning in your head about how you can use this basic concept for something new. Good luck and happy optimizing!

 
Why you might not need device-specific tagging
There are times when device-specific tagging doesn’t apply. A prime example would be when you have a completely different code base for your mobile site. If you have a good old-fashioned “M Dot” site or if you have a shiny new AMP site, that’s a different code base than that of your primary desktop site. You should really be managing all of that with a dedicated Google Tag Manager container anyway (and with AMP, you have to use a dedicated GTM container). (Back to Top)

Written by
Mike founded UpBuild in 2015 and served as its CEO for seven years, before passing the torch to Ruth Burr Reedy. Mike remains with the company today as Head of Business Operations.

Related Posts

Comments

Leave a Reply

Your email address will not be published.