MRAID 3.0: Bridging the Gap Between Rich Media HTML Ads and Native Apps

Published in

Airtel Digital

5 min readDec 1, 2023

In the fast-paced world of digital advertising, Airtel Digital has emerged as a pioneer in seamlessly integrating mobile ads into native applications. With our commitment to staying at the forefront of industry standards, we proudly introduce our implementation of MRAID 3.0 (Mobile Rich Media Ad Interface Definitions), a global standard set by the IAB (Interactive Advertising Bureau). This standardised framework bridges the gap between mobile-rich media ads and native mobile applications, revolutionising the way advertisers and app developers engage with their audiences.

Why Airtel Digital Chooses MRAID 3.0:
At Airtel Digital, we made a deliberate choice to embrace MRAID 3.0 over its predecessor, MRAID 2.0. Here are the key reasons behind our decision:

1. Viewport Visibility Events: We understand the importance of tracking when HTML ads within a web view become visible in the viewport. MRAID 3.0 provides enhanced viewability support, allowing us to trigger ad impressions precisely when the web view is in the viewport.

2. Enhanced Viewability Measurement: Advertisers need precise metrics to optimize ad displays effectively. MRAID 3.0 follows industry standards for viewability measurement, ensuring that we can deliver superior results to our clients.

3. Efficient Event Handling: MRAID 3.0 offers a richer set of events and methods, facilitating smoother interactions between native apps and HTML ads. This efficiency directly translates into a better user experience.

4. Backward Compatibility: We understand that transitioning from MRAID 2.0 can be challenging. However, MRAID 3.0 ensures that our ads continue to function seamlessly in older 2.0 containers, mitigating any potential disruptions.

5. Industry Standards: Aligning with industry norms simplifies collaboration with partners and ad networks, fostering a healthy ecosystem for digital advertising.

In summary, MRAID 3.0 met our specific needs for tracking viewability events while offering a host of enhanced features, improved event handling, and alignment with industry standards.

Challenges in Mobile Ad Integration:

Airtel Digital recognizes the challenges inherent in mobile ad integration, which include:

1. Fragmented Implementation: The diversity of app development languages, such as iOS Objective-C and Android Java, has led to fragmented ad implementations. This diversity often results in inconsistent ad experiences across different app environments.

2. Cross-Platform Standardization: While MRAID 3.0 addresses the need for a common mobile ad API, ensuring widespread adoption across different platforms remains a pressing concern.

3. Backward Compatibility: As MRAID 3.0 evolves, it’s essential to maintain compatibility with MRAID 2.0 containers, demanding careful consideration during the transition process.

Understanding MRAID 3.0:
MRAID, short for “Mobile Rich Media Ad Interface Definitions,” serves as a crucial Application Programming Interface (API) for mobile rich media ads. Its primary purpose is to bridge the gap between ads and apps, enabling seamless communication between the two.

Exploring MRAID 3.0 Methods:
MRAID 3.0 empowers advertisers and enhances user experiences through a range of methods grouped by functionality. These include:

- Size Change/Expansion: Methods like `expand` and `resize` allow ads to adjust their dimensions.

- UI Functionality: Features like `open` and `createCalendarEvent` provide user interface capabilities.

- Non-UI Functionality: Methods like `storePicture` and `getVersion` offer non-user interface functionalities.

What MRAID 3.0 Enables:

Based on these methods, MRAID 3.0 empowers advertisers in four key ways:

1. Dynamic Size Changes: Ads can adapt their size and gather information about screen size and visibility.

2. Native Video Access: Creatives gain access to the device’s native video player.

3. Image Storage: Advertisers can store images in the device’s permanent memory.

4. Calendar Integration: Ads can interact with the device’s calendar to create events.

New Features in MRAID 3.0:
MRAID 3.0 introduces several noteworthy features:

- Viewability Support: Allows creatives to measure viewability according to industry standards.

- Audibility Measurement: Enhances the use of audio in ads without disruption.

- Close Button Standardization: Ensures a consistent user experience with clear exit options for expanded ads and interstitials.

- Error Handling: Ads can now gracefully exit and inform the host ad container in case of errors.

- Access to Environment Information: Provides access to essential information about the environment, such as SDK, IFA, and COPPA.

- Reduced Ambiguity: Implements a stricter events implementation sequence for better synchronization between ads and host containers.

- Guidance for Pre-Fetched Ads: Ensures that ads are presented to users only when assets are loaded and ready.

- Location Data Utilization: With user and app publisher permission, ads can personalize messaging using location data.

- Video Advertising Integration: Select VPAID events are fully integrated into MRAID 3.0 for uniform reporting and measurement of video creatives.

- Backward Compatibility: MRAID 3.0 maintains compatibility with MRAID 2.0 containers, ensuring a smooth transition.

Why MRAID 3.0 Matters:
Airtel Digital’s MRAID 3.0 implementation is of paramount importance for the following reasons:

- Diverse App Environments: We address the challenges posed by different app development languages, providing consistency across various platforms.

- Seamless Communication: Our implementation bridges the gap between web-based ads and native apps, enhancing the overall user experience.

- Consistency and Efficiency: Airtel Digital’s commitment to MRAID 3.0 standardization reduces complexity for advertisers, making mobile ad integration more efficient and effective.

Sample Implementation and Pseudo code:

// Pseudocode for some of the MRAID 3.0 methods implementation

// Method for changing the ad's size
function expandAd(width, height) {
    // Implement ad expansion logic here
    // Set the ad's new size to the specified width and height
}

// Method for closing the ad
function closeAd() {
    // Implement ad closure logic here
    // Close the ad and return control to the app
}

// Method for adding an event listener
function addEventListener(eventType, callback) {
    // Implement event listener registration here
    // Register the specified callback function for the given eventType
}

// Method for checking if the ad is currently viewable
function isViewable() {
    // Implement viewability check logic here
    // Return true if the ad is viewable, false otherwise
}

// Example usage of the above methods
expandAd(300, 250); // Expand the ad to 300x250 pixels
addEventListener('click', function() {
    // Handle a click event
    // This callback function will be executed when a click event occurs
});

// Note: This pseudocode simplifies the actual implementation and assumes that the necessary functionality and APIs are available.

Conclusion:

In conclusion, Airtel Ads’ implementation of MRAID 3.0 represents a significant leap forward in mobile advertising. By adhering to industry standards, collaborating with partners, and simplifying the complexities of mobile ad integration, we are at the forefront of innovation, delivering exceptional results for our clients.

Reference Links:

MRAID 3.0: Bridging the Gap Between Rich Media HTML Ads and Native Apps

Written by Keshav Kuljeet