Monetize an Android Configuration
The OpenWeb React Native SDK supports two ad formats for Android:
- Banner (320X50, 320x100, 300x250)
- Interstitial (full page)
The interstitial ad appears once per article when the user navigates to a Conversation. The banner ad appears on the article page above the Conversation.
Prerequisites
Item | Description |
---|---|
GAM | Approved Google Ad Manager form for apps ads should indicate apps |
app-ads.txt | An app-ads.txt file implemented in your web environment at www.your-domain.com/app-ads.txt |
Implementation
Integrating the Google Mobile Ads SDK into your React Native app sets the foundation for you to display ads and earn revenue. After adding and initiating the dependency, work with your OpenWeb PSM to set up the advertising campaign.
Since conflicts can occur when the Google Mobile Ads SDK is a dependency of both the host app and the OpenWeb React Native SDK, Google Mobile Ads SDK is not included as a direct dependency of the OpenWeb React Native SDK.
Enable Ads
Use the following steps to monetize your Android configuration with the React Native SDK:
-
In the app build.gradle file, add the Google Ads dependency.
implementation 'com.google.android.gms:play-services-ads:21.1.0'
-
Add the following GoogleAdsProvider file to your project.
package spotIm.sample.ads import android.app.Activity import android.content.Context import android.util.Size import com.google.android.gms.ads.* import com.google.android.gms.ads.admanager.AdManagerAdRequest import com.google.android.gms.ads.admanager.AdManagerAdView import com.google.android.gms.ads.admanager.AdManagerInterstitialAd import com.google.android.gms.ads.admanager.AdManagerInterstitialAdLoadCallback import spotIm.common.ads.SPAdSize import spotIm.common.ads.SPGoogleAdsProvider import spotIm.common.ads.SPGoogleAdsBannerListener import spotIm.common.ads.SPGoogleAdsInterstitialListener class GoogleAdsProvider(override var spotId: String) : SPGoogleAdsProvider { private var adView: AdManagerAdView? = null private var adManagerInterstitialAd: AdManagerInterstitialAd? = null override fun hasInterstitialAd(): Boolean { return adManagerInterstitialAd != null } override fun loadBannerAd( appContext: Context, tag: String, sizes: Array<SPAdSize>, postId: String, listener: SPGoogleAdsBannerListener) { createGoogleBannerView(appContext, spAdSizesToGoogleAdSizes(sizes), tag) val adRequest = AdManagerAdRequest.Builder() .addCustomTargeting(BANNER_CONV_SDK_SPOT_ID, spotId) .build() adView?.loadAd(adRequest) adView?.adListener = object : AdListener() { override fun onAdLoaded() { adView?.let { listener.onBannerLoaded(tag, it, Size(it.width, it.height)) } } override fun onAdFailedToLoad(error: LoadAdError) { listener.onBannerFailedToLoad(error.message, error.code) } } } override fun loadInterstitialAd(appContext: Context, tag: String, postId: String, listener: SPGoogleAdsInterstitialListener) { val adRequest = AdManagerAdRequest.Builder() .addCustomTargeting( INTERSTITIAL_CONV_SDK_SPOT_ID, spotId ) .build() AdManagerInterstitialAd.load( appContext, tag, adRequest, object : AdManagerInterstitialAdLoadCallback() { override fun onAdLoaded(interstitialAd: AdManagerInterstitialAd) { adManagerInterstitialAd = interstitialAd adManagerInterstitialAd?.fullScreenContentCallback = object: FullScreenContentCallback() { override fun onAdDismissedFullScreenContent() { adManagerInterstitialAd = null listener.onAdDismissedFullScreenContent() } override fun onAdShowedFullScreenContent() { listener.onAdShowedFullScreenContent() } override fun onAdFailedToShowFullScreenContent(adError: AdError) { listener.onAdFailedToShowFullScreenContent(adError.message, adError.code) } } listener.onInterstitialAdLoaded() } override fun onAdFailedToLoad(adError: LoadAdError) { listener.onInterstitialAdFailedToLoad(adError.message, adError.code) } } ) } override fun showInterstitialAd(activity: Activity) { adManagerInterstitialAd?.show(activity) } private fun spAdSizesToGoogleAdSizes(sizes: Array<SPAdSize>): Array<AdSize> { return sizes.map { when (it) { SPAdSize.BANNER -> AdSize.BANNER SPAdSize.FULL_BANNER -> AdSize.FULL_BANNER SPAdSize.LARGE_BANNER -> AdSize.LARGE_BANNER SPAdSize.LEADERBOARD -> AdSize.LEADERBOARD SPAdSize.MEDIUM_RECTANGLE -> AdSize.MEDIUM_RECTANGLE SPAdSize.WIDE_SKYSCRAPER -> AdSize.WIDE_SKYSCRAPER } }.toTypedArray() } private fun createGoogleBannerView(appContext: Context, sizes: Array<AdSize>, tag: String) { adView = AdManagerAdView(appContext) adView?.setAdSizes(*sizes) adView?.adUnitId = tag } companion object { private const val INTERSTITIAL_CONV_SDK_SPOT_ID = "interConvSdkSpotId" private const val BANNER_CONV_SDK_SPOT_ID = "bannerConvSdkSpotId" } }
-
In the Android folder, immediately after
SpotIm.init()
in theonCreate
method of theMainApplication
class, callsetGoogleAdsProvider
.SpotIm.setGoogleAdsProvider(GoogleAdsProvider(<SPOT_ID>))
Disable Ads
By default, OpenWeb helps you to monetize your content and engagement experiences by showing ads to your users.
If you would like to provide an ad-free experience for your subscribed users, use the following steps:
- Contact your PSM to request that ads be disabled for your subscribers.
- Define
user_metadata.is_subscriber
during the backend SSO Handshake or when updating a user's details.
When you pass Base64-encoded "user_metadata.is_subscriber": true
during the login process, you indicate that the user is a subscriber. During the user's session, no ads will be shown.
If a user's subscriber status changes, your app must log out the user and complete a new SSO flow. This ensures that a user's previous cached client state for
user_metadata.is_subscriber
is not used.
Updated 10 months ago