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.