Blocks close up

Collect Mobile Orientation via prop or eVar

By fraser, September 25, 2013

Below is a very simple plugin I wrote so I can understand on page-load, which screen orientation the page has been viewed. Landscape or Portrait? for any mobile device. (This code does not track orientation change, just when the page is loaded and the Omniture s.t() call is made.)

  • Add s.mobileOrientation to a prop or eVar of your choosing in the do_plugins() area
  • Add plugins in the plugin section


/* -- Mobile device orientation on page load - Fraser Kemp [targetier.com] -- */

s.prop39 = s.mobileOrientation; // add this anywhere in do_plugin code area

/************************** PLUGINS SECTION *************************/
s.checkMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
s.mobileOrientation = (s.checkMobile) ? (window.innerHeight > window.innerWidth) ? "Portrait" : "Landscape" : "";

I also extended to cover all devices I could think of, but I was really more interested in the more common devices.

If you want to cover things like PSP handsets and a multitude of less common devices then you could use the s.checkmobile code below. I decided to go with the code above due to there being too many mobile devices to worry about the stragglers.


s.checkMobile = (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent.toLowerCase()));

What will the reports look like if you add the values to a prop?

Mobile Device Orientation

You can check that it is just mobile devices being recorded. My above snippet will get most core devices including Kindle etc

Mobile Devices

Screen Resolutions

Thoughts & Summary

So this is a simple way to understand the Orientation view of your website on mobile devices in two lines of code.

Please feel free to use the code. It would be great if you kept a reference to targetier.com if you do 😉

Also if you find it useful please leave a comment, would be great to hear if it helped anyone.

targetier has specialised in Adobe Omniture implementation for the past 8 years. Please feel free to get in touch if you are in need of consultancy services

2 Comments

  1. Pooch says:

    Nice, but I think capturing orientation CHANGE (which you mention in your opening paragraph) and also CHANGE BACK AGAIN might be more useful. Changing tells the UX guys that somewhere on the page, the user found it necessary to swap orientation – is that expected and ok? Changing back again tells the UX guys that the change didn’t help – so wasn’t ok. We have this lined up to add to our scode; awaiting publishing. Thoughts?

  2. fraser says:

    The above code is just for initial orientation on page load. This is sent with the the s.t() method (so no increase in server calls). The specific client the code was written for didn’t need to record orientation change.

    To record the change state, you will have to execute the call again on orientationchange which will have to call a custom action (s.tl method). You ‘could’ record another page view but this could artificially inflate PVs across mobile devices.

    Depending on your traffic volume through mobile devices, be aware that you will be increasing your server calls by a certain percentage. If you have plenty of margin in your Adobe contracts this is not a problem, but you will have to weigh up cost vs benefit.

    A simple jQuery example // use bind() if your jQuery version is pre 1.6

    if (s.checkMobile) {
    $(window).on('orientationchange resize', function(event){
    if(event.orientation && s.mobileOrientation) {
    s.linkTrackVars = "channel,prop25,prop39";
    s.channel = "mobile";
    s.prop25 = s.pageName;
    s.prop39 = s.mobileOrientation;
    s.tl(this, 'o', "Mobile Orientation Change")
    }
    });
    }

    event.orientation && s.mobileOrientation could be either or, but for this example I have added both just for example (they will both contain the same string values). You of course can use any props, evars or events in this call.

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *