Hybrid Apps: Making Whole Two Halves

Whether you know it or not, you likely have used a hybrid app on a smart­phone or tablet.  Hybrid apps often appear like “reg­u­lar” apps, how­ever some of the con­tent dis­played within the app is HTML web con­tent.   So in essence it’s like hav­ing a ded­i­cated mobile web browser “live” within the app.   These types of apps are pop­u­lar espe­cially for retail, trans­porta­tion, and bank­ing indus­try ver­ti­cals.  For exam­ple, the mobile app for a pop­u­lar big box retailer leads cus­tomers through a native app expe­ri­ence ini­tially when dis­cov­er­ing and select­ing prod­ucts to pur­chase; how­ever, when check­ing out, the con­tent dis­played within the app is web gen­er­ated.  From an ana­lytic per­spec­tive there are track­ing solu­tions to mea­sure both mobile app and mobile web, each with its own means of uniquely iden­ti­fy­ing users.  There­fore, if unad­dressed, a sin­gle cus­tomer visit within a hybrid app will appear as two vis­its, two vis­i­tors, and the poten­tial of crazy worm­hole pathing behav­ior.  Within this blog post I describe how to syn­chro­nize vis­i­tor IDs within a hybrid app which yields more accu­rate mobile metrics.

Vis­i­tor IDs within Apps
Adobe’s Mobile App Libraries (avail­able for iOS, Android, WP8) gen­er­ate their own ran­dom unique vis­i­tor ID when an app is installed.  This vis­i­tor ID is stored within per­sis­tent mem­ory on the mobile device and is sub­mit­ted as a “vid” value on every hit.  Unlike cook­ies this vis­i­tor ID will always be set and can’t be erased unless the user unin­stalls the app (app vis­i­tor IDs will per­sist through upgrades).

Vis­i­tor IDs within Mobile Web
Cur­rently, most mobile web imple­men­ta­tions use the same stan­dard s_code that is used within desk­top sites.  As such, Adobe Ana­lyt­ics cre­ates an s_vi cookie that uniquely iden­ti­fies vis­i­tors on a given site.  Adobe’s servers will use the s_vi cookie value that is passed within the header unless the s.visitorID (vid) name and value is passed along with the other props, eVars or events that are nor­mally submitted.

Bring­ing the two together
In order to have both halves of the hybrid app expe­ri­ence be con­sid­ered one vis­i­tor and one visit, the vis­i­tor ID used within the app must also be used within mobile web.   To do this we must place the fol­low­ing code within the app code and mobile web s_code.

 

App Vis­i­tor ID Hand-off Code

ADMS_Measurement *mea­sure = [ADMS_Measurement sharedIn­stance];
[mea­sure configureMeasurementWithReportSuiteIDs:@“your_report_suite_id” trackingServer:@“your_tracking_server.112.2o7.net”];

NSString *vis­i­torId = measure.visitorID;

NSString * url­String = [NSString stringWithFormat:@“http://www.mydomain.com/index.php?appvi=%@”, visitorId];

NSURL *url = [NSURL URLWithString:urlString];
[[UIAp­pli­ca­tion sharedAp­pli­ca­tion] openURL:url];

The Objective-C (iOS) code above reads the app vis­i­tor ID and places it within the “appvi” query para­me­ter within the URL.  For sim­plic­ity and brevity the code then opens the URL within the Safari mobile browser and does not lever­age the UIWe­b­View as would nor­mally be done.  Please adapt accordingly.

NOTE:  The vis­i­torId shown above is pop­u­lated using measure.visitorID found with the iOS App­Mea­sure­ment Library that will be released on March 22, 2013.  If you need the alter­na­tive method to pop­u­late the vis­i­torId with older 3.x libraries, please let me know in the com­ment sec­tion below.

 

Mobile Web Vis­i­tor ID Pick-Up Code

 if (s.getQueryParam(‘appvi’)) {
s.new_vi_date=new Date;
s.new_vi_date.setFullYear(s.new_vi_date.getFullYear() + 5);
s.c_w(‘app_vi’,s.getQueryParam(‘appvi’),s.new_vi_date);
s.visitorID=s.c_r(‘app_vi’);
}

else if (s.c_r(‘app_vi’)) {
s.visitorID=s.c_r(‘app_vi’);
}

Within the s_code javascript, place the above code  within s_doPlugins().  Ini­tially this grabs the app vis­i­torID handed over from the app, stores that value into a five-year cookie, and will use that value mov­ing for­ward within the app whether the app vis­i­torID is present within the URL or not.  This code also relies on the get­Query­Param plug-in.  If you don’t have the plug-in, ask your Adobe Con­sul­tant to pro­vide it to you.  Or, you can eas­ily find on the web an equiv­a­lent javascript func­tion that retrieves query para­me­ters from a URL.

 

Finally, to val­i­date be sure your app vis­i­torID (again, shown as “vid”) is also present within mobile web.  It should be included on every mobile web hit.  Once you have ver­i­fied that the same vis­i­tor ID is being shared between app and mobile web, you can rest assured that you can now cap­ture the whole jour­ney of your hybrid app visitors.