Track Device Orientation changes in Google Analytics
Did you know you can detect and track device orientation changes in Google Analytics? That is, if a mobile or tablet user switches between portrait and landscape mode? Well, of course it’s possible (basically anything that happens inside a browser can be detected and tracked in Google Analytics). In a previous post, I wrote about how to detect and track the browser’s viewport (which was made almost obsolete by the new native Browser Size dimension). This tells us how users as a whole view our website, and provide valuable information about how to layout our pages. If users on a specific site or page have very large viewports, then we can make use of a lot of screen real estate. In this post, I’ll take it a step further. Because sometimes, I really need to know if users are literally turning their devices (mobiles or tablets). Perhaps our responsive website has been designed for browsing in landscape mode. But in reality our users might prefer to browse in portrait mode. In any case, we need to know, so we can go tell our designers to optimise the experience for one or the other (or both!).
Detecting device orientation
With so many smartphones and devices out there you’d think there is a sure-fire approach to detecting the device orientation. You’d think there would be some sort of default javascript object or variable in mobile browsers. Guess what? There’s not. Something’s cooking though and Mozilla describes an actual DeviceOrientationEvent, but browser compatibility is spotty at the moment. But in the name of practicality and data collection, we’ll stick to some good old browser event listeners. Some data or javascript purist will yell at me, but I really just want to track device orientation changes in general. And what better than the resize event? We can simply put in an event listener which will fire every time the user changes the orientation of the browser. If the new orientation is different than the initial orientation we push that information to Google Tag Manager’s dataLayer which will relay that information to Google Analytics. Check out this script:
(function(){
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var i = w > h ? "Landscape" : "Portrait";
window.addEventListener("resize", function() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var o = w > h ? "Landscape" : "Portrait";
if(o != i) {
dataLayer.push({
"event" : "orientation",
"eventCategory" : "Device Orientation",
"eventAction" : "Orientation Change",
"eventLabel" : "Switch to " + o
});
i = o;
}
}, false);
})();
Let’s break it down. Lines 2-4 take care of finding the initial device orientation. Basically, we’re determining the width (w) and height (h) of the viewport. If the width is larger than the height, we’re in landscape mode. If not, we’re in portrait mode. We then store that information (Landscape or Portrait) as the initial device orientation (i). Next, we define our event listener for the resize event. This will fire every time the browser is resized. When fired, we check for the new width and height and then store the new orientation (o). If the new orientation is different than the initial orientation, we go ahead and push an event to Google Tag Manager. Google Tag Manager uses an event trigger that listens for the orientation event. And when that happens we fire a GTM tag to log an event in Google Analytics. Now, there are some drawbacks to this approach: The resize event will fire on all devices. Not just mobile phones and tablets. Depending on your users this might be a problem or not. How many of your users resize their desktop browser adequately to also change the de facto orientation? Not many, would be my guess. Secondly, some users might change orientation several times on one page. That would inflate our total events, but we could then just look at the number of unique events. What I’m after here is a general picture. I don’t need this to be perfect. Yet. If I discover specific patterns or metrics that point in a certain direction, I’d definitely go ahead and get more precise data.
Setting it up in Google Tag Manager
We need to take care of a few things in Google Tag Manager before this will work:
Make sure that the Event utility is enabled. And then make sure to have three variables that capture the event category, action and label:
All three of those are variables of the type Data Layer Variable. The Data Layer Variable Names in each should be set to eventAction, eventCategory and eventLabel respectively. Next, we need a trigger for our event tag. So create a new trigger of the type Event, name it Device Orientation, and set the Event name to orientation:
To log an event in Google Analytics, we obviously also need an Universal Analytics event tag. So go ahead and add one:
Remember to replace the Google Analytics ID with your own Tracking ID. Also note, that I’m setting the Non-interaction hit flag to True. The reason is that I don’t want to track orientation changes as actual interactions. That would affect bounce rate, time on page and so on. The trigger should be set to the Device Orientation trigger that we configured previously.
Adding device orientation change detection to GTM
Now, you can just take the detection script and add it directly to your website. Either as inline javascript code or in an external javascript file. Both will work. But if you’re in a real hurry or don’t have the technical skillz, you can set it up directly in Google Tag Manager: Create a new GTM tag of the type Custom HTML Tag:
If copy-pasting my script, remember to add <script> before the snippet and </script> after the snippet. And then set the tag to fire on all pages (or create a separate trigger if you only want to track orientation changes on specific pages). And that should do it. You’ll now be logging events each time a user changes the orientation of the browser. Which can be translated into changing the orientation of his or hers device.
Track Device Orientation Changes: The Result
From now on, you can open up the Top Events report and drill down in the new Device Orientation event category. The labels will show changes to the different orientations. This will let you do reports such as this one:
In this example, I’ve combined the Event Label with the Secondary Page dimension. This clearly tells me that users on the frontpage most often switch orientation to landscape mode. So, this could indicate that our frontpage is difficult to use in portrait mode. Next, we’d have to look at conversion rate specifically for portrait vs. landscape mode via the frontpage. And the end result might be to recommend some changes to the portrait layout. In any case, this information suddenly makes it possible for us to make even better decisions for our mobile website. I think there is a tendency among many web design agencies that “As long as we make it responsive, it’s all good”. But very rarely have I seen mobile versions of a website where enough thought has been put into the user research. But that’s another story for another post :-)