Banner Ads - cleveradssolutions/CAS-ReactNative GitHub Wiki

:zap: Before you start
Make sure you have correctly Initialize CAS.

Create programmatically

The first step toward displaying a banner is to place BannerAd in the element tree which you'd like to display it:

<BannerAd
    size={BannerAdSize.Banner}
    onAdViewLoaded={onAdViewLoaded}
    onAdViewClicked={onAdViewClicked}
    onAdViewFailed={onAdViewFailed}
    onAdViewPresented={onAdViewPresented}
/>

Note the following required attributes:
size - Set the ad size you'd like to use.
See the banner size section below for details.

Ad Size

Size in dp (WxH) Description Availability AdSize
320x50 Standard Banner Phones and Tablets Banner
728x90 IAB Leaderboard Tablets Leaderboard
300x250 IAB Medium Rectangle Phones and Tablets MediumRectangle
Adaptive Adaptive banner Phones and Tablets Adaptive
320x50 or 728x90 Smart Banner Phones and Tablets Smart

❕Typically, Smart Banners on phones have a Banner size. Or on tablets a Leaderboard size.

Change the banner ad size using the following method:

<BannerAd
    size={BannerAdSize.Banner}
/>

Adaptive Banners

Adaptive banners are the next generation of responsive ads, maximizing performance by optimizing ad size for each device.
To pick the best ad size, adaptive banners use fixed aspect ratios instead of fixed heights. This results in banner ads that occupy a more consistent portion of the screen across devices and provide opportunities for improved performance.

  • The height of adaptive banners cannot be less than 50 dp and more than 250 dp.
  • The width of adaptive banners cannot be less than 300 dp.
  • The adaptive banners use fixed aspect ratios instead of fixed heights.
<BannerAd
    size={BannerAdSize.Adaptive}
    maxWidthDpi={300}
/>

Ad events

To further customize the behavior of your ad, you can hook onto a number of events in the ad's lifecycle: loading, presenting, clicking, and so on. You can listen for these events through the listener callbacks:

<BannerAd
    size={BannerAdSize.Banner}
    onAdViewLoaded={() => ...}
    onAdViewClicked={() => ...}
    onAdViewFailed={error => ...}
    onAdViewPresented={impression => ...}
/>

Read more about event onAdViewPresented with Impression level data.

Autoload Banner Ad

A isAutoloadEnabled value that determines whether autoloading of ads in the receiver is enabled.
If enabled, you do not need to call the loadNextAd() method from next section to load ads.
Change the banner autoload ad using the following method:

<BannerAd
    size={BannerAdSize.Banner}
    isAutoloadEnabled={false}
/>

By default disabled if global state AdsSettings.loadingMode is LoadingManagerMode.Manual. And changes will override global state of AdsSettings.loadingMode for specific Banner View.

Load Banner Ad

You can use load regardless of the isAutoloadEnabled value for interrupt ad impression and load next ad.

bannerViewRef.current.loadNextAd();

Calling the loadNextAd() method if isAutoloadEnabled is active will cause the current ad to be lost and a new ad to start loading.

Banner refresh rate

An ad unit’s automatic refresh rate determines how often a new ad request is generated for that ad unit.
We recommended using refresh rate 30 seconds. However, you can choose any value you want longer than 10 seconds.

Change the banner automatic refresh rate using the following method:

<BannerAd
    size={BannerAdSize.Banner}
    refreshInterval={20}
/>
// OR disable auto refresh ads
<BannerAd
    size={BannerAdSize.Banner}
    refreshInterval={0}
/>

  • Ad requests should not be made when the device screen is turned off.
  • The isAutoloadEnabled has no effect on refreshing the banner ad.

Check Ad Availability

You can ask for the ad availability directly by calling the following function:

const bannerLoaded = await bannerViewRef.current.isAdReady();

Hardware acceleration for video ads

In order for video ads to show successfully in your banner ad views, hardware acceleration must be enabled.

Hardware acceleration is enabled by default, but some apps may choose to disable it. If this applies to your app, we recommend enabling hardware acceleration for Activity classes that use ads.

If your app does not behave properly with hardware acceleration turned on globally, you can control it for individual activities as well. To enable or disable hardware acceleration, you can use the android:hardwareAccelerated attribute for the <application> and <activity> elements in your AndroidManifest.xml. The following example enables hardware acceleration for the entire app but disables it for one activity:

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

See the HW acceleration guide for more information about options for controlling hardware acceleration. Note that individual ad views cannot be enabled for hardware acceleration if the Activity is disabled, so the Activity itself must have hardware acceleration enabled.

🔗 Done! What’s Next?