Banner Ad

Banner ads are compact non-sticky ads that can be seamlessly embedded within your existing application, displaying the ad content within that confined space.

Integration

Step 1. Import component

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

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

Step 2. Create Banner Ad

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 following props,

Property	Type	Requirement	Desctiption
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

Bluestack banner ad supports following types

Type	Value	Dimensions in dp (WxH)
Standard	standard	320x50
Large	large	320x100
Full	full	468x60
Medium Rectangle	mediumRectangle	300x250
Leaderboard	leaderboard	728x90
Dynamic	dynamic	Screen width x 50 (Adjusted Banner)
Dynamic Leaderboard	dynamicLeaderboard	Screen width x 90 (Adjusted Banner for tablet)

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>

Step 3. Load Banner ad

BannerAdView has load method that takes 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 shouldLoadWhenReady prop is set to true

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

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

View the AdPreference documentation for more details.

caution

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

Step 4. Register event listeners

BannerAdView component also exposes props for listening to events, allowing you to 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.

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 hide method and show it using show method.

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

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

Destroy banner ad

You can destroy/remove the banner using destroy method

refBanner.current?.destroy();

Enable/Disable banner refresh

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

refBanner.current?.toggleRefresh(true);