Blog
Deep links

Integrating ads into React Native Video with Google IMA SDK

Explore how to monetize video content in mobile apps using Google Interactive Media Ads (IMA) SDK with React Native Video. This guide provides instructions for integrating ads on both Android and iOS platforms
Tags
React Native
React Native Video
Mobile development
Software development
Ads
Google IMA SDK
By
Dominik Danielewicz
April 26, 2024
5 minute read
Share this post

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.

React Native
React Native Video
Mobile development
Software development
Ads
Google IMA SDK
Dominik Danielewicz
Category
January 19, 2024

React Native Video on VisionOS

React Native
React Native Video
visionOS
Mobile
Exploring the intersection of React Native Video and VisionOS, this article offers a detailed roadmap for developers looking to harness the power of React Native for video viewing and manipulation in the VisionOS environment.
See article
Category
January 25, 2024

How to set video as a background in React Native application

React Native Video
Video background
React Native
Explore step-by-step guidance on integrating video backgrounds into your React Native applications using the react-native-video library. This article provides practical tips and code examples to enhance your app's UI with dynamic video elements, suitable for both beginners and experienced developers in React Native.
See article
Category
April 11, 2024

React Native Video: The ultimate video solution for React Native developers

React Native
React Native Video
Mobile development
Software development
If you are making ReactNative apps with videos, react-native-video is more than just a library for simple video playback. It’s a comprehensive toolkit that empowers you to create immersive, secure, and interactive video experiences. Check out this article to explore the advanced features supported by React Native Video.
See article
Category
April 18, 2024

DRM and React Native Video: Ensuring content security across platforms

React Native
React Native Video
Mobile development
Software development
DRM
The article examines DRM support in React Native Video, highlighting its role in protecting video content through customizable DRM configurations and advanced licensing mechanisms. It covers essential features like custom license acquisition and header customization for enhanced security across platforms.
See article
Do you need help with developing react solutions?

Leave your contact info and we’ll be in touch with you shortly

Leave contact info
Become one of our 10+ ambassadors and earn real $$$.
By clicking “Accept all”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.