Mobile & Tablet Orientation Tracking With Google Analytics

Do you have a responsive website or do you serve different user experiences depending on what orientation a visitor is viewing your site in? Maybe you are just curious if users who have a specific device orientation on a specific page perform better?

I had this question too, so I sought out to solve it. I am of the opinion that just looking at device categories versus one another is not good enough these days. The approach I took for device identification does not match Google Analytics device categories perfectly, however it comes darn close.

Things you will need for this:

  • Google Analytics
  • Google Tag Manager (or any tag manager) *optional*
  • Some Javascript understanding

Method #1: Using DetectMobileBrowsers.com (Open source)

I am a big fan of open source technology. It is a community effort to generally make things better, and DetectMobileBrowsers.com has been a pretty popular option on the device detection front. They are compatible with many programming languages as well!

It is important that you understand DetectMobileBrowsers.com specifically focuses on Mobile by default. If you want to also monitor tablet, then add |android|ipad|playbook|silk to the first regex.

Step 1) Select your choice language and download the TXT containing the necessary regex.

Step 2) Use this to detect the device of a session.

Step 3) If device matches mobile and/or tablet (if you care about tablet orientation), then you want to check for the orientation. You can use the following:

//If sessions device meets criteria
if(<step3>) {
     //On window orientation change
     $(window).on('orientationchange',function() {

          //What is the new orientation?
            var newOrientation = window.innerHeight > window.innerWidth ? 'Portrait' : 'Landscape';

            //What was previous orientation?
            var oldOrientation = newOrientation == 'Portrait' ? 'Landscape' : 'Portrait';

            //Push orientation change data to Google Tag Manager dataLayer
            dataLayer.push({
                'event': 'Event',
                'eventCategory': 'Device Orientation Change',
                'eventAction': 'Was: ' + oldOrientation + ', Changed To: ' + newOrientation,
                'eventLabel': window.location.href
            });
     })
}

The above code first checks to see if the browsing device meets the criteria for mobile (or tablet if setup to do so). Then it detects on orientation change what the orientation was previously, and what it is now.

A Google Tag Manager dataLayer push is conducted to log the data as a Google Analytics event with:

Event Category: Device Orientation Change

Event Action: Was Landscape, Changed To: Portrait

Event Label: http://growthAddict.com

The event label allows us to tell what URL the orientation change happened on without having to build a custom report or anything like that. You can also setup Javascript logic to do this entirely in your Google Tag Manager setup as well, rather than just pushing up an event into the data layer.

Method #2: Using the real time API (in theory)

I actually have not used this way, but I imagine it could be possible (but probably not advisable). You would need to make the following assumptions:

  1. A single session can only use one device

In theory, how this would work is on session initiation you fire an event that logs a session identifier. You then query the Google Analytics realtime API to retrieve the device category dimension for that event label. For the rest of the session in theory you should now know the device category of that user. If device category returns as mobile or tablet, you can initiate javascript which detects an orientation change, and when it does you fire another event to log the orientation that was used, and then what it was changed to. You can use a custom report to find which pages have the most device orientation changes, so that is optional to pass up in the event.

Again, this method is in theory and really requires that your event hits show up immediately in your GA dataset, that your session exist long enough for your event to trigger + api call to return device category + javascript to detect orientation change if device category matches tablet or mobile.

austin

Passionate about growth, analytics, and E-commerce. Life is about pushing the envelope.