Better Detection and Analytics for Opera Browsers

22 March 2016

In my article, WTF Opera Mini?!, I wrote about the lack of support that the Opera Mini browser has for what I considered basic development features (e.g., font properties and 2d transforms).

If you didn't already know, in the Opera Mini browser, the user has the option between two modes - High/Normal Savings Mode and Extreme Savings Mode. A lot of the complaints I had with Opera Mini are actually constrained to the Extreme Savings Mode in the browser. However, because there was no way to determine which mode was being used, I had to assume that all Opera Mini users were on the Extreme Savings Mode, especially as it is enabled by default.

However, through a bit of research, I managed to find a way to detect which savings mode a user is currently on, as well some other useful information.

Better Detection #

The method I used to detect the various Opera Browsers and savings modes is through looking at the navigator.userAgent string returned by the browser. Here is an example user agent string returned from the Opera Mini Browser on a Nexus 5 running Android Marshmallow -

Mozilla/5.0 (Linux; U; Android 6.0.1; en-GB; Nexus 5 Build/MMB29V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 OPR/15.0.2125.101257 Mobile Safari/537.36

The user agent string differs across browsers, devices, and operating systems, but there are some commonalities between all Opera browsers we can use for detection. For example, we can detect if the browser is an Opera browser by checking for the following -

var isOpera = window.opera |
              window.opr |
              navigator.userAgent.indexOf(' OPR/') > -1 |
              navigator.userAgent.indexOf(' Coast/') > -1 |
              navigator.userAgent.indexOf(' OPiOS/') > -1;

Detecting Savings Mode #

When Opera Mini is in Extreme Savings Mode, a completely different engine is used and this is reflected in the user agent string. For example, this is the user agent string for Opera Mini on the Nexus 5 in High versus Extreme Savings Mode -

// High Savings Mode (Normal)
Mozilla/5.0 (Linux; U; Android 6.0.1; en-GB; Nexus 5 Build/MMB29V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 OPR/15.0.2125.101257 Mobile Safari/537.36

// Extreme Savings Mode
Opera/9.80 (Android; Opera Mini/15.0.2125/37.8025; U; en) Presto/2.12.423 Version/12.16

In Extreme Savings Mode, the Presto engine is being used. So, we can determine which savings mode the user is currently on based on this information.

if ( navigator.userAgent.indexOf('Presto/') > -1 &&
     navigator.userAgent.indexOf('Opera Mini/') > -1 ) {
  // Extreme Savings Mode
} else {
  // High/Normal Savings Mode
}

Detecting Other Information #

The user agent string can also give us more information about the browser and device being used. So, instead of just detecting which savings mode is being used, I wrote a small detection script that will determine the following information -

Browser - Opera, Opera Mini, Opera Mobile, or Opera Coast
Operating System - iOS, OSX, Windows, or Android
Platform - Mobile/Tablet, Desktop, or TV
Mode - High/Normal Savings or Extreme Savings

The opera-detect.js script returns an object, operaDetect, with the following information -

var operaDetect = {
  isOpera: // Boolean, if the current browser is an Opera browser
  isExtremeMode: // Boolean, if is the Extreme Savings Mode is on
  results: {
    mode: // String, which Savings Mode is being used, e.g. "High/Normal Savings"
    platform: // Which platform, e.g. "Mobile/Tablet"
    browser: // e.g. "Opera Coast
    OS: // e.g. "Android"
  }
}

With this information, we can easily detect information about the savings mode a user is on, and alter their experience if necessary.

if ( operaDetect.isExtremeMode ) {
  // do stuff
}

You can get this script to use yourself at my github repo, ireade/operadetect.

Better Analytics #

Google Analytics has some great browser detection. Not only can you detect which browsers your visitors are using, but you can get more information on the browser such as versions. However, the default analytics are limited in two ways -

No information on Savings Mode
Opera Coast and Opera Mini (Normal Mode) on iOS show up as Safari, not Opera. (I assume this is because they use iOS Webview)

To solve this, we can set up custom dimensions with Google Analytics to track the four pieces of information we receive from the opera-detect.js script. Once the custom dimensions are set up through Google Analytics, we can easily pass the information -

if ( operaDetect.isOpera ) {
  ga('set', 'dimension1', operaDetect.results.mode);
  ga('set', 'dimension2', operaDetect.results.platform);
  ga('set', 'dimension3', operaDetect.results.browser);
  ga('set', 'dimension4', operaDetect.results.OS);
}

// Send pageview
ga('send', 'pageview');