HTML5 offers some features that are usefull in tracking user behavior. One of those features is device orientation. Using some very basic code, we can use this feature to track:

• how users land on your website
• if users change orientation on a page

To track these events you can use the following javascript code:

    switch(window.orientation) {
        case -90:
        case 90:
          //track event for landscape
          break;
        default:
          //track event for portrait
          break;
      };
      window.addEventListener("orientationchange", function() {
        switch(window.orientation) {
          case -90:
          case 90:
            //track event for change to landscape
            break;
          default:
            //track event for change to portrait
            break;
        }
      }, false);
  

The code above tracks two types of landing: one for landscape (with a 90° turn) and portrait (default). Theres room here to add your favourite tracking scripts.

Now ofcourse, this is only relevant for mobile and tablet devices (desktops don’t tend to switch orientation all that often). Therefore, I advice you to use a function to check if a visit is also a mobile visit. This way you don’t fire an event for each desktop visit.

Personally, I recommend the isMobile() function: https://github.com/kaimallea/isMobile. An example with isMobile() available:

 if(isMobile.any){
     switch(window.orientation) {
       case -90:
       case 90:
       //track event for landscape
       break;
     default:
       //track event for portrait
       break;
    };
    window.addEventListener("orientationchange",       function() {
      switch(window.orientation) {
        case -90:
        case 90:
        //track event for change to landscape
        break;
      default:
        //track event for change to portrait
        break;
      }
    }, false);
  };
  

If you’re using Google Analytics (Universal), here’s a full example:

if(isMobile.any){
     switch(window.orientation) {
       case -90:
       case 90:
       ga('send', 'event', 'Device Orientation', 'Landing', 'Landscape', {'nonInteraction': 1})
       break;
     default:
       ga('send', 'event', 'Device Orientation', 'Landing', 'Portrait', {'nonInteraction': 1})
       break;
    };
    window.addEventListener("orientationchange",       function() {
      switch(window.orientation) {
        case -90:
        case 90:
        ga('send', 'event', 'Device Orientation', 'Change', 'Landscape', {'nonInteraction': 1})
        break;
      default:
        ga('send', 'event', 'Device Orientation', 'Change', 'Portrait', {'nonInteraction': 1})
        break;
      }
    }, false);
  };
  

Now you can view your event report to see how people land on your website and if they tend to switch orientation:

Look at the event labels for details about the actual orientation:

Any questions? Feel free to ask.