Detecting App Usage

It is often a requirement to determine when your website or web application is being displayed within your native iOS or Android app, versus being displayed in a standard desktop or mobile web browser.

• You may need to determine when the JavaScript Bridge commands are available to interact with the user's device and any native plugins.
• You may wish to use track analytics events based on app versus browser, and device type
• You may want your website to display differently within the app versus the browser, e.g.
  • limit the pages that are linked and accessible within the app
  • hide your website navigation menus in favor of a native navigation menu
  • hide a website footer to improve the app user interface

1 - Detect the user agent sent by your app

Each time your app makes an HTTP request the app will append a string to the end of the device default user agent. By default, the string is median though it can be customized on the Website Overrides tab.
iOS app: MedianIOS/1.0 median
Android app: MedianAndroid/1.0 median

👍

GoNative → Median Transition

For apps that were initially created on GoNative.io the default useragent is

iOS app: GoNativeIOS/1.0 gonative
Android app: GoNativeAndroid/1.0 gonative

For certainty check the Website Overrides tab and also view https://median.dev/device-info/ within your app.

You can detect the user agent either:
1a. within your frontend website code using JavaScript navigator.userAgent
1b. on your backend server / web application by using the User-Agent header

//JavaScript on your website:
if (navigator.userAgent.indexOf('median') > -1) {
  
  //run a JavaScript Bridge command only when in the app
  median.module.command({'parameter':'value'});
  
  //hide/show elements within the app
  $('.mobileNav').hide();
  $('.appOnly').show();
  
}

// Node.JS Express App
app.get('/', (req, res) => {
  if(req.header('User-Agent').indexOf('median') > -1)
    res.send('App version of website');
  else
    res.send('Browser version of website');
});

JavaScript Helper Functions

We recommend creating helper functions to simplify complex integrations and to reduce the code that needs to be added throughout your web environment. In the examples below you would simply need to call logAnalyticsEvent() and the event would be transmitted as either a web analytics event or app analytics event by way of the helper function.

Analytics using Google Firebase Analytics Native Plugin for true native app analytics

function logAnalyticsEvent(eventName, eventProperties){
  if (navigator.userAgent.indexOf('median') > -1) { // web content is being displayed in app
      // send event using Firebase Google Analytics Native Plugin
      median.firebaseAnalytics.event.logEvent({
        'event':eventName, 
        'data': eventProperties
       });
   }
   else { // web content is being displayed in a standard browser
      // send event using gtag.js
      gtag('event', eventName, eventProperties);
   }
}

Analytics using only web-based Google Analytics with additional parameter added to filter web versus app events

function logAnalyticsEvent(eventName, eventProperties){
  if (navigator.userAgent.indexOf('MedianIOS') > -1) { // iOS app
      eventProperties.analyticsSource = 'ios';
   }
  else if (navigator.userAgent.indexOf('MedianAndroid') > -1) { // Android app
      eventProperties.analyticsSource = 'android';
   }
   else { // standard browser
      eventProperties.analyticsSource = 'web';
   }
   // send event using gtag.js
   gtag('event', eventName, eventProperties);
}

2 - Set custom HTTP headers within your app

You may configure Custom Headers on the Website Overrides tab with parameters and values. These headers will be sent with each HTTP request made by your app.

3 - Use a different URL for your app

You may choose to serve a completely different version of your website through your app via a different URL.

e.g. https://app.yoursite.com