In an earlier post, I wrote about the the history and future of ad viewability tech, how viewability and its companion exposure time are becoming more and more default metrics and measurements for online media campaigns and why I think the future of viewability measurement is looking bright. Although there are already some great parties that can measure ad viewability for you, there are some reasons why you would want to do your own viewability tracking. In this article, I’ll dive a bit deeper into the technical details of measuring viewability for in-app ads. And once you want to start tracking in-app viewability, you sure need MRAID.

What is MRAID?

MRAID stands for "Mobile Rich Media Ad Interface Definitions" and it is the IAB’s program to define standards for in-app mobile ads. It’s a collection of agreements on how an app can show an ad properly, and how the ad can use the phone’s features.

On the web, there are also these kinds of codes and guidelines on how to serve rich media ads. But both websites and ads on a smartphone, laptop, Android, IOS or a Microsoft device all speak the same universal language: JavaScript. Therefore it’s pretty straightforward to communicate between the ad and the publisher. For instance, there’s no challenge in having ad to play a video or open a new link (because the ad is also loaded into the browser ;).

But apps don’t speak JavaScript. Apps speak all kinds of languages (even within the same operating system): Java, Swift, Objective-C, C#, you name it. Our mobile ads do not speak all these languages, but still, we want our ad to be able to communicate with our phone (to read whether an ad is viewable, for example), and we want it to work on all kind of phones. That’s exactly where MRAID comes in.

To enable the scaling of rich media ad serving in apps, IAB developed the first version of MRAID in 2011. Technically, MRAID is nothing more than an API (an interface that sends commands to software using code), that is supported by multiple SDK’s (framework of an app). Because of this, an ad that is MRAID compliant will run in (almost) every app. I like to see MRAID as the translator for the app’s and the ad’s language.

MRAID currently is at version 3, but only MRAID 2 is generally supported. I did some research on the implementation of MRAID version at the top 20 publishers in the Netherlands, and I found out that none of them is currently supporting MRAID 3. I contacted a few of them, and when asked when MRAID 3 will be supported in their app, they all said it’s on their 2018 roadmap.

Tracking viewability with MRAID 2

MRAID version 2 only has limited possibilities for tracking viewability. Instead of constantly checking the viewability percentage of an ad, you can only track in an ad is 100% in view or not at all.

You can listen to the viewableChange event on mraid to respond to changes in viewability. The only passed argument to the event handler is a boolean whether the ad is viewable or not. A basic snippet for tracking viewability of your ad using MRAID 2 could look something like this:

mraid.addEventListener('viewableChange', function(viewable) {
      if (viewable) {
          playAd();
      }
  }
  

Pretty straightforward, right? The flaw is this snippet is that it never triggers the event handler when the ad is already viewable when it’s loaded in the app. Luckily, MRAID has an isViewable method which tells you whether the ad is already visible when it has loaded.

mraid.isViewable()
  

Our complete snippet for checking the viewability of an ad now looks like this:

if (mraid.isViewable()) {
      playAd();
  } else {
      mraid.addEventListener('viewableChange', function(viewable) {
          if (viewable) {
              playAd();
          }
      }
  }
  

Once again, the viewability tracking feature in MRAID 2 is really basic, and it lacks the important feature of knowing exactly what part of an ad is actually in view. Luckily, this need was taking into account in version 3.

Tracking viewability with MRAID 3

Over 5 years after IAB introduced the first version, they recently published a new version of the standard: MRAID 3.0. There are tons of cool improvements in there, and more advanced support for viewability tracking is one of them. In MRAID 3, it’s possible to read what portion (both percentage and specific coordinates) of the ad is in view.

The MRAID 3 spec added the exposureChange event that is triggered when the viewability of an ad slot changes. Really love the simplicity of this API.

mraid.addEventListener('exposureChange',
  onExposureChange);
  

The spec states that polling must occur at least 5 times per
second, so expect to have this event triggered at least every 200ms. In the event handler, you can react to the change:

function onExposureChange(exposedPercentage,
  visibleRectangle) {
    if (exposedPercentage >= 75) {
      // Send viewability data to backend, change creatives.
    }
  }
  

Let’s look at the passed arguments. The exposedPercentage holds the percentage of ad that is visible on screen, and it’s a floating-point number between 0.0 and 100.0. The visibleRectangle argument is the visible portion of the ad container and has the fields {x, y, width, height}. It holds null when the ad is not visible at all. I would like to refer to the official spec for more details on these arguments.

The spec also states that the guidelines for using the MRAID 3.0 event for exposureChange are aligned with MRC guidelines for mobile ad measurement that was released in 2016. In short, this means that for display ads 50% or more should be in view for one continuous second or longer.

The isViewable() method and viewableChange event that we used in the MRAID 2 snippet above are deprecated in MRAID 3. These features are retained in version 3 for backward compatibility but might be removed in future updates.

The spec asks you to be a good citizen and recommends removing the event listener when the measurement is no longer needed.

mraid.removeEventListener('exposureChange',
  onExposureChange);
  

In-app viewability when MRAID is not enough or not accessible

But if MRAID 3 is not implemented broadly yet, but on the other hand the standards (mostly 50% in view for at least 1s) ask for advanced viewability tracking, how does this actually work? This is where the big viewability vendors come in. Big parties like IAS and MOAT have SDKs that are implemented on big apps, so they have full control over and access to the viewability data of ads in an app. They do not have to rely on MRAID’s viewability features, but just build the tech themselves. The problem here is the lack of transparency and inconsistency across multiple vendors measurements.

Also, when you want to measure (video) ad viewability in apps like Facebook and Youtube, MRAID will not get you very far as you can not even push HTML/JS ads to these environments. In these cases, you have to rely on third-party viewability verification integrations on the platforms. Facebook’s third-party viewability verification partners were recently expanded to include Moat, Integral Ad Science, comScore and Nielsen. Although this is an improvement regarding transparency, we are still stuck with them and need to rely on the data these big fishes give us.

On using viewability for creative purposes

In the digital advertising world, there is a lot of focus on viewability and exposure time for campaign valuation and media buying strategies, but I feel there are also great possibilities for creative developers. When you can read the viewability in your ad, and respond to it, you can do awesome things! You can let animations (re)start only when the creative is X percentage in view, or maybe reposition the CTA button or main message to the top of the creative when you see only the top part of the ad is visible for a while. At Greenhouse Group, we are experimenting with these ideas and the first results look promising!