App launch ads implementation guide for your React Native (Android app)

App launch ads implementation guide for your React Native (Android app)
Photo by Mona / Unsplash

You might follow the app open implementation guide to integrate the SDK.

This guide is intended for publishers integrating app open ads using the Google Mobile Ads Android SDK.
App open ads can be closed at any time, and are designed to be shown when your users bring your app to the foreground.

As you observed, the app open ads is not shown when your app first got lunched. Assuming your react native app might take some time to show up, you might think of showing a loading spinner to the users. What if you can show a full screen ads instead?
In this post, I will guide you how to implement an App launch ads via Interstitial Ads. By doing so, you can monetize your app and also engage the users with a rich content rather than a ugly waiting screen before your app ready.

Use Interstitial Ads

first of all, you still need to follow the interstitial implementation guide to integrate the SDK. I created a sample launch ads manager java class for your reference.

load Interstitial Ads in MainActivity::onCreate callback

Ads need time to load too

Things you need to know is that it always takes some to load the Ads too. Things might be worse if the network is not that fast.

Just as it's important to make sure you display interstitial ads at an appropriate time, it's also important to make sure the user doesn't have to wait for them to load. Loading the ad in advance by calling load() before you intend to call show() can ensure that your app has a fully loaded interstitial ad at the ready when the time comes to display one.

Core Idea

In order to avoid user see empty screen while waiting for the launch ads or the ready app, I split the app start up stage into a few steps:
1. request launch ads in MainActivity::onCreate callback
2. React App show loading spinner(meanwhile prepare user data)
3. Show ads on screen once loaded
4. User closes the ads, native inform to React app ads is dismissed
5. React app hide the loading spinner and show the app with user data

For step 2, you can refer to my previous post, How to display full screen animated gif for your react native app?

The major part is React app need to know the native ads state and change its state accordingly and render proper content to user. Please see my next post: How to pass properties from native(Android) to React Native?

References

Android App Open Ads

App Open Ads | Android | Google Developers

Android App Interstitial Ads

Interstitial ads | Android | Google Developers

Communication between native and React Native

Communication between native and React Native · React Native
In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we’ll eventually find a need to communicate between these two worlds. Some ways to achieve that have been al…

Subscribe to Post, Code and Quiet Time.

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe