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
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:
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
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
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 :-)