Tracking iOS Web App Usage

Via a handful of meta tags and link tags, web apps on iOS can be launched from the home screen and run in fullscreen mode to enable a more native-like experience for the user. Turning your website or app into a “home screen web app” is not difficult but it does require a chunk of work including designing a home screen icon, designing a startup screen image, preventing links from opening in Mobile Safari (and exiting the app), and prompting the user to add the app to their home screen. If we’re going to go through the trouble wouldn’t it be nice to have some data on how many people are actually using the thing?

Fortunately this is easy to do. Of course you can track visits and pageviews with the standard Google Analytics implementation, but there are some app-specific behaviors we can track with just a little bit of JavaScript.

So I’m going to show some examples of how to track home screen web app activity using Google Analytics custom variables. Depending on what exactly you want to track you may consider using Google Analytics events instead, but for data directly tied to pageviews or visits I think custom variables is the cleaner choice.

Remember that custom variables definitions must be followed by a _trackPageview() or _trackEvent() request. So as far as code placement is concerned you would place the following examples after the initial Google Analytics set up snippet and before the _trackPageview() function call. Also note that each of the examples uses the same custom variable slot. You’ll want to replace these with your own slot values.

Track home screen launches

This sets a custom variable every time we detect a visit that occurs in the web app mode. This will allow you to segment the home screen web app traffic and compare it against traffic arriving through the browser.

if (navigator.standalone) {
 
  _gaq.push(['_setCustomVar',
    1,                       // Which custom variable slot to use
    'Mobile Web App',        // Custom variable name
    'Home Screen Launch',    // Custom variable value
    2                        // Sets the scope to session-level
  ]);
 
}
Track device orientation

This keeps track of whether the app is being viewed in portrait or landscape mode. Note that in this example the custom variable is defined at the page level, not the session level as in the previous example.

if (navigator.standalone) {
 
  var currentOrientation = (window.innerHeight > window.innerWidth) ? 'Portrait' : 'Landscape';
 
  _gaq.push(['_setCustomVar',
    1,                              // Which custom variable slot to use
    'Mobile Web App Orientation',   // Custom variable name
    currentOrientation,             // 'Portrait' or 'Landscape'
    3                               // Sets the scope to page-level
  ]);
 
}
Track time since last launch

This keeps track of how many days have passed since the last time the app was opened by logging a timestamp in local storage and comparing the dates whenever the app is launched. There might be a way to get at this same data just by looking at returning visitor stats in the standard Google Analytics view. Not sure though. And doing it with JavaScript is more fun.

if (navigator.standalone) {
 
  // Local storage detection
  var storage = (function() {
    var uid = new Date,
      storage,
      result;
    try {
      (storage = window.localStorage).setItem(uid, uid);
      result = storage.getItem(uid) == uid;
      storage.removeItem(uid);
      return result && storage;
    } catch(e) {}
  }());
 
  // If device has support for local storage
  if (storage) {
 
    var lastLaunch; 
 
    if (!storage.webAppLastLaunch) {
      // If app is launched for the first time    
      lastLaunch = 'First Launch';      
 
    } else {
      // Calculate days since last recorded launch
      lastLaunch =  Math.floor( ( +new Date - storage.webAppLastLaunch ) / 86400000 );
    }
 
    storage.setItem('webAppLastLaunch', +new Date);
 
    _gaq.push(['_setCustomVar',
      1,                // Which custom variable slot to use
      'Last launch',    // Custom variable name
      lastLaunch,       // "First Launch" or the number of days since last launch
      2                 // Sets the scope to session-level
    ]);
 
  }
 
}
What else?

These are just the first few ideas that popped into my head. Is there anything else that would be interesting to track?

Both comments and pings are currently closed.

Discussion

Julian

Hey good job ! Did you know how it’s possible to tracking how many people add the WebApp in the home screen ?