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.
Updated about 2 months ago