Overview

Understanding when your website or web application is being displayed within a native mobile app (iOS or Android) versus a standard desktop or mobile browser is critical for providing a tailored user experience. This process enables several use cases such as integrating JavaScript Bridge commands, tracking analytics events, and customizing content based on the platform.

Key Use Cases

• 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

Detection Strategies

1 - Detect the user agent sent by your app

When your app makes an HTTP request, it appends a custom string to the default device user-agent. By default, the string is median, but you can customize this on the Website Overrides tab.

Default User-Agent Strings:

iOS app: MedianIOS/1.0 median
Android app: MedianAndroid/1.0 median

👍

GoNative → Median Transition

For apps initially created on GoNative.io, the default user-agent string 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.

Detect User-Agent in Your Code:

You can detect the user-agent either:

1. In the Frontend (JavaScript): Using navigator.userAgent
2. On the Backend (Server-side): By reading the User-Agent header in HTTP requests

// Frontend (JavaScript)
if (navigator.userAgent.indexOf('median') > -1) {
    // Execute JavaScript Bridge commands only within the app
    median.module.command({'parameter':'value'});
  
    // Hide/show elements within the app
    $('.mobileNav').hide();
    $('.appOnly').show();
}

// Backend (Node.js - Express)
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 for App-Specific Requests

You can configure custom HTTP headers in the Website Overrides tab, which will be sent with each HTTP request made by your app. This allows you to pass additional parameters or flags, helping to identify requests originating from the app versus a web browser.

📖 Learn more: Custom HTTP Headers

3 - Use a different URL for your app

Alternatively, you can serve a completely different version of your website through a unique URL tailored for the app, such as:

https://app.yoursite.com

This approach enables greater flexibility in how you serve content to mobile users versus desktop users.