Integrating ads into React Native Video with Google IMA SDK

Introduction

Video content plays a crucial role in engaging users within mobile applications. Monetizing this video content effectively is paramount for developers looking to generate revenue. This is where Google's Interactive Media Ads (IMA) SDK comes into play, and React Native Video's built-in support for this technology simplifies the integration process significantly for both Android and iOS platforms.

What is Google IMA SDK?

Google IMA SDK stands for Interactive Media Ads Software Development Kit. It's a powerful tool provided by Google to enable developers to easily integrate client-side advertisements into their video content. This technology supports a wide range of ad formats, including linear ads (pre-roll, mid-roll, post-roll), non-linear ads (overlays), and companion ads, offering flexibility in how ads are presented to users. The primary goal of IMA SDK is to maximize monetization potential by delivering targeted ads from Google's vast advertising network directly into your video streams.

Setting up Google IMA in React Native Video

Installation

The integration process begins with setting up the React Native Video library to support Google IMA SDK on both iOS and Android platforms.

For iOS:

To enable Google IMA on iOS, you need to add a specific line to your Podfile:

$RNVideoUseGoogleIMA=true

This configuration enables the Client Side Ads Integration (CSAI) capabilities of the Google IMA SDK in your React Native project.

For Android:

On Android, enabling client-side ads insertion with Google IMA SDK requires a modification in your gradle file:

buildscript {
  ext {
    ...
    useExoplayerIMA = true
    useExoplayerRtsp = true
    useExoplayerSmoothStreaming = true
    useExoplayerDash = true
    useExoplayerHls = true
    ...
  }
}

Usage

To utilize AVOD (Ad-supported Video on Demand) with Google IMA SDK, pass the adTagUrl prop to the Video component. The adTagUrl should be a VAST URI pointing to the ad content.

<Video 
	... 
	adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostoptimizedpodbumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator=" 
	... 
/>

Note: On iOS, video ads will not start if you are using Picture-in-Picture (PiP) mode. Custom controls need to adjust accordingly, hiding the PiP button on ad start and showing it again once ads are completed.

Handling ad events

React Native Video allows developers to handle various ad events through the onReceiveAdEvent prop. This capability is essential for creating a responsive ad experience, where the app can react to different stages of the ad lifecycle.

<Video 
	... 
	onReceiveAdEvent={(event) => console.log(event)} 
	... 
/>

Events include AD_STARTED, ALL_ADS_COMPLETED, CLICK, COMPLETED, and many more, offering detailed control over ad playback and user interaction. You can find all the events listed at this GitHub repository.

Need support with react-native-video implementation?

We're here to help! We are offering commercial support options tailored to your project's needs. Don't miss the opportunity to enhance your setup with expert assistance. For more details or to get started, contact us!

Conclusion

Integrating Google IMA SDK with React Native Video opens up a realm of possibilities for monetizing your video content. By following the steps outlined above, developers can enhance their apps with a sophisticated ad delivery system that maximizes revenue while maintaining a seamless user experience. As video continues to dominate the digital landscape, leveraging Google IMA SDK within React Native applications represents a strategic advantage in the competitive app market.