How to track the device screen orientation in Google Analytics

Mobile traffic, as we all know, is constantly rising and we are seeing it inside our Google Analytics’ accounts. Google Analytics is able to provide us with a bunch of information about the different mobile devices (tablets included):
- Type
- OS version
- Screen
- …
Thus we are able to understand a lot of details about our user behaviour. However something is still missing. How do users hold the phone/tablet to browse our site? Vertically, that is in portrait mode? Or horizontally, in landscape mode? Do they “rotate” the screen switching the device orientation while browsing?
At the moment this kind of data are not directly provided by Google Analytics, but we can grab it through the set up of a simple custom tracking code via Google Tag Manager.
Tracking the device orientation via Google Tag Manager
In order to grab the information about the device orientation, and possibly the screen rotation (switching from vertical to horizontal mode and viceversa), you need three tags:
- A Custom HTML Tag to create the tracking code and grab the information to be passed to the dataLayer
- Two Universal Analytics Tags to fire the – non-interaction! – custom event.
First things first.
Set up of the Custom HTML in GTM
Inside the Custom HTML Tag the following tracking code must be included:
<script> var mql = window.matchMedia("(orientation: portrait)"); // If = portrait if(mql.matches) { dataLayer.push({'event':'orientation','pos':'Portrait'}) } else { dataLayer.push({'event':'orientation','pos':'Landscape'}) } // Change view mql.addListener(function(m) { if(m.matches) { dataLayer.push({'event':'changeori','oldpos':'Landscape','newpos':'Portrait'}) } else { dataLayer.push({'event':'changeori','oldpos':'Portrait','newpos':'Landscape'}) } }); </script>
Inside the first IF Statement you define the orientation settings by which users access our website.
In the second IF Statement the information regarding the switching in the screen orientation is grabbed.
Surely this Custom HTML is an “All pages” trigger and it must be set to be fired in any page of the site.
Set up of the variables
Before creating the Universal Analytics tags to send information you need to create three dataLayer Variables:
- The first {{Pos} is useful to grab the information about the screen orientation while accessing the site
- The second {{Old Pos}} allows to grab the information about the screen orientation before the switch
- The third {{New Pos}} grabs the information regarding the new screen orientation mode after the switch
Such variables help to “enrich” our data set inside the Universal Analytics tags.
Set up of the Universal Analytics tags


The first tag to create is intended to grab the information regarding which mode our user access the site: Portrait or Landscape. It will be a“non-interaction”event, so that it will not impact on the bounce rate and as a label we set the value {{Pos}}. The event should be fired only one time for each session. Tips: you can consider the opportunity to combine a custom dimension – session scope – which could be helpful when performing an analysis.

The trigger dedicated to this specific event will be a Custom Event to be set in the first IF Statement inside the Custom HTML, that is “orientation”.

The second tag, a Universal Analytics tag as well, will be an event which grabs the information regarding the device orientation switch. In this case we use the two variables {{Old Pos}} and {{New Pos}} inside the event label.

The trigger will be a Custom Event including the event fired on the second IF, “changeori“.
Final Outcome


The tables above show the events and the custom dimensions we set up as well.
In the example, the most users visualize the site in Landscape mode and come from search engine. It is interesting to see how it possible to segment traffic channels according users device orientation.
Keyfindings
Figuring out how users visualize the site and which is the most frequent mode they adopt could be useful in case of a website redesign or when planning to develop new landing pages. The tracking allows to better understand the users’ browsing behaviour.
If we match the data coming from the tracking implementation and the screen resolution as well as the browser dimension we are able to punctually define how to create pages or contents fully available and visible by users, with a huge gain in terms of accessing the conversion funnel.
For the most sticklers 🙂 : of course browser resolution/resize testing will be tracked, even if performed by JS console, but I believe they will be a negligible share.
Leave a Reply
-
Analytics Boosters
ItalyVicolo Buranelli, 2
31100 Treviso
Italy
-
Analytics Boosters
United Kingdom41 Devonshire Street
London
W1G 7AJ
United Kingdom
-
Analytics Boosters
United States80 S.W. 8th Street
33130 - Miami
Florida
United States of America
Hi,
thank’s for your article, so far it works well, except for the fact that my session scoped event with the start position fires every time a user accesses a new page. How do you set the trigger for the session scoped start position tag to only fire once per session?
Thank you for your help!
Hi Maike,
in the GTM tag > Advanced settings > tag firing option > once per page or set a new event to detect if it is mobile or desktop and fire the position tracking event only if it is mobile and after that event
The one thing we can’t track natively in Google Analytics is how people hold their tablet device (or if they switch orientations on particular pages).
Custom dimensions can be used to record this information. The following screen shows a “ViewType” custom dimension being added, with a scope of “Hit.”
Hi these images are really difficult to read can you put bigger more readable ones
I’ll send you the code
Thank
Hi, do you have a version of this article where you actually can see the screenshots and posibility to copy/paste?
Hi, you could find the code in our italian website: https://www.enricopavan.com/conversion-rate-optimization-tracciare-google-analytics-lorientamento-dello-schermo-mobile/
Thanks