Banner Ads

Overview

A Banner ad typically appears as a rectangular or square graphic within your app's user interface. Banner ads are usually embedded at the top, bottom, or inline within the scrollable content of a screen.

Before You Start. Make sure that you have correctly integrated the BlueStack React Native Plugin into your application. Integration is outlined here.

For a working implementation of this ad format, see the azerion-inapp-demo-reactnative demo app.

Create a BannerView

You need to import the BannerAdView component in order to display BlueStack banner ads.

import { BannerAdView } from "@azerion/bluestack-sdk-react-native";

The SDK module provides a BannerAdView component, that must be used to display the ads. Each render of the component loads a single ad, allowing you to display multiple ads at once. It has the following props:

Property	Type	Requirement	Description
type	BannerAdType	Mandatory	Banner ad type
placementId	string	Mandatory	ID of impression placement provided in BlueStack console
shouldLoadWhenReady	boolean	Optional	If true, the ad will be automatically loaded as soon as all the props are set
preference	AdPreference	Optional	To pass additional request preferences before loading an ad

Here's an example of how to create and auto load a banner ad:

const refBanner = useRef<any>(null);
....

<View>
  <BannerAdView
    type='standard'
    shouldLoadWhenReady={true}
    placementId={'/' + appId + '/banner'}
    preference={preference!}
    ref={refBanner}
  />
</View>

Load a Banner Ad

BannerAdView has a load method that takes an instance of AdPreference as an optional parameter. You can use this method to "manually" load a new ad.

info

Banner load call is not required when the shouldLoadWhenReady prop is set to true.

Without AdPreference

// Load a banner ad.
refBanner.current?.load();

With AdPreference

To request a banner ad using AdPreference, provide an instance of AdPreference in the BannerAdView's load method:

// Load a banner ad with preferences.
refBanner.current?.load(preference);

attention

You don't need to set preferences in both the preference prop and the load method. If preferences are set in both, the one passed to the load method will be used.

Ad events

Register for banner events

BannerAdView exposes props for listening to events, allowing you to handle the state of your app:

Methods	Definition
onAdLoaded	Ad is successfully loaded and SDK is ready to display the ad.
onAdFailedToLoad	The ad failed to load or display.
onAdClicked	User has clicked the ad. Ad may open a link in browser.
onAdRefreshed	The banner ad has been refreshed.
onAdFailedToRefresh	The banner ad has been failed to refresh.

Implement banner events

Here's an example of how to use event listeners:

const [bannerHeight, setBannerHeight] = useState<number>(0);
const refBanner = useRef<any>(null);
....

// Load a banner ad with preferences.
refBanner.current?.load(preference);
....

<View
  style={{
    height: bannerHeight,
  }}
>
  <BannerAdView
    type="standard"
    shouldLoadWhenReady={false}
    placementId={'/' + appId + '/banner'}
    onAdLoaded={(object: any) => {
      console.log('Banner Ad Loaded');
      setBannerHeight(+object.nativeEvent.size);
    }}
    onAdFailedToLoad={(error: any) => {
      console.log('Banner Ad load failed: ' +error?.nativeEvent?.error);
    }}
    onAdRefreshed={() => {
      console.log('Banner Ad refresh succeed');
    }}
    onAdFailedToRefresh={(error: any) => {
      console.log('Banner Ad refresh failed: ' + error?.nativeEvent?.error);
    }}
    onAdClicked={() => {
      console.log('Banner Ad Clicked');
    }}
    ref={refBanner}
  />
</View>

Show / Hide Banner Ad

After loading the banner ad you can hide it using the hide method and show it again using the show method.

// Hide banner ad
refBanner.current?.hide();

// Show banner ad
refBanner.current?.show();

Destroying Banner Ad

You can destroy / remove the banner using the destroy method.

refBanner.current?.destroy();

Enable / Disable Banner Refresh

You can enable or disable the banner auto refresh using the toggleRefresh method. Pass true to enable refresh and false to disable it.

refBanner.current?.toggleRefresh(true);

Banner Ad sizes

BlueStack ads provide a variety of pre-defined sizes. See the table below for details about our supported standard banner sizes:

Type	Value	Description	Dimensions in dp (WxH)
Standard	standard	Standard Banner	320 x 50
Large	large	Large Banner	320 x 100
Full	full	Full Banner	468 x 60
Medium Rectangle	mediumRectangle	Medium Rectangle	300 x 250
Leaderboard	leaderboard	Leaderboard	728 x 90
Dynamic	dynamic	Adjusted Banner	Screen width x 50
Dynamic Leaderboard	dynamicLeaderboard	Adjusted Leaderboard	Screen width x 90