In-Feed Banner

Integrate in-feed banners

Important note

Google network might not count impressions correctly unless banner is placed within ScrollView component. According to our tests, ads from this network don't detect impressions correctly when ad is presented inside static views. We are not able to fix it because we recognize it as the problem related to React/Google Ads SDK, and as mediation provider, we can't interfere with third party code. That's why we recommend using banner components (when Google networks are used) only placed in ScrollView. Otherwise please be aware the revenue might be affected. For more information, please contact Gravite Support Team.

Create placement

First, create an in-feed banner placement using the createInFeedBannerPlacement function form the RNAatkit module. Next, determine the ad loading type.

Available ad loading types:

• InFeedBannerPlacementLoadingType_BannerCache – a specialized mechanism that wraps an in-feed banner and automatically preloads banner ads. Its goal is to maintain a predefined number of banners in memory, allowing them to be handed over to the app immediately when needed.

  • While using this type, you can determine the cacheSize parameter. If cacheSize is not set, a self-adjusting mechanism will be used to optimize the banner cache size automatically.

• InFeedBannerPlacementLoadingType_Requests – this type loads ads using a specific configuration and notifies plugin about the result of each individual load request (success or failure). It provides more control over ad requests but requires more manual management, such as cancelling requests when an ad is no longer needed.

You can also pass additional configuration like manualAdSpaceCounting, desired banner sizes to be loaded etc.

#!javascript

import {
    RNAatkit
} from '@addapptr/react-native-aatkit'

...

RNAatkit.createInFeedBannerPlacement(
    "InFeed", 
    {
        loadingType: RNAatkit.InFeedBannerPlacementLoadingType_BannerCache,
        cacheSize : 3,
        manualAdSpaceCounting: false,
        bannerSizes: [
            "320x53",
            "300x250"
        ]
    });

Use RNAatkitInFeedBanner component

Use RNAatkitInFeedBanner component to place the banner ad to the UI. Set the name property corresponding the placement name passed to the createInFeedBannerPlacement function.

import {
    RNAatkitInFeedBanner
} from '@addapptr/react-native-aatkit'

...

<RNAatkitInFeedBanner
    name="InFeed" />

Load at start

You can use reloadOnStart property to load in-feed banner ad right away when RNAatkitInFeedBanner component is added to the UI. AATKit will get an ad from the cache or load it from the server.

import {
    RNAatkitInFeedBanner
} from '@addapptr/react-native-aatkit'

...

<RNAatkitInFeedBanner
    name="InFeed"
    reloadOnStart={true} />

Reload ads

You can also reload in-feed banner ads which are already added to the UI. Every RNAatkitInFeedBanner component is added to the internal AATKit list. This way you can use those functions for loading:

• reloadAllInFeedBannerComponents

• reloadLastInFeedBannerComponent

• reloadConcreteInFeedBannerComponents

Please note there is the getInFeedBannerComponentsCount function which might be helpful to determine the size of the list containing RNAatkitInFeedBanner components.

This type of loading banners is recommended when your app has the constant size of in-feed ads and/or you want already visible ads to be reloaded.

Events

You can define functions for onCreate and onShowNewAd events of the RNAatkitInFeedBanner component. Those functions might be a good place to reload in-feed ads.

import {
    RNAatkitInFeedBanner
} from '@addapptr/react-native-aatkit'

...

<RNAatkitInFeedBanner
    name="InFeed"
    onCreate={() => {
        //Component created and attached to the UI
    }}
    onShowNewAd={() => {
        //New ad loaded and presented
    }} />

Cancel loading ads

When you no longer want the ad to finish loading (for example when moving to another screen), you can cancel the ad request using cancelReloadingInFeedBannerPlacement function.

import {
    RNAatkit
} from '@addapptr/react-native-aatkit'

...

RNAatkit.cancelReloadingInFeedBannerPlacement("InFeed");

Manual adspace counting

If you use manual adspace counting, remember to call countAdSpaceForInFeedBannerPlacement function whenever new adspace should be counted.

import {
    RNAatkit
} from '@addapptr/react-native-aatkit'

...

RNAatkit.countAdSpaceForInFeedBannerPlacement("InFeed");

API

For more details about functions and properties related to the in-feed banner ads, please see this page in the Reference.