[Huawei Developers] Freemind R:
More information like this, you can visit HUAWEI Developer Forum

INTERSTITIAL ADs

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200807141036.09427157239971573051453292078200:50510818010807:2800:7464F0BA4A51CEFA5099FC423B44595DC68882ADF2E8198B84318A0700E2E5DB.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200807141036.09427157239971573051453292078200:50510818010807:2800:7464F0BA4A51CEFA5099FC423B44595DC68882ADF2E8198B84318A0700E2E5DB.gif[/IMG]​

Interstitial ads are full-screen ad formats that cover the interface of an app. They are usually displayed at natural transition points in the flow of an app like pausing a game or between different activities. The main difference between other types of ads and interstitial ads is that interstitial ones cover all the screen which makes it catchier and more effective.

Interstitial ads are used for high impression rate to increase downloads and revenue.

HUAWEI Ads Kit offers variety of different ads format to reach the consumer marketing goals in today’s competitive world.

HUAWEI Ads Kit provides easy and flexible way to implement the interstitial ads within your application.

Development Overview

HMS Ads KIT can be integrated for various business requirements in your react native project as following:

1. Perquisites

· Must have a Huawei Developer Account

· Must have a Huawei phone with HMS 4.0.0.300 or later

· React Native environment with Android Studio, Node Js and Visual Studio code.

2. Major Dependencies

· React Native CLI : 2.0.1

· Gradle Version: 6.0.1

· Gradle Plugin Version: 3.5.2

· React Native Site Kit SDK : 4.0.4

· React-native-hms-site gradle dependenc

· AGCP gradle dependency

3. Preparation

1. In order to develop the HMS react native apps following steps are mandatory.

2. Create an app or project in the Huawei app gallery connect.

3. Provide the SHA Key and App Package name of the project in App Information Section and enable the required API.

4. Create a react native project. Using

“react-native init project name”

5. Download the React Native Ads Kit SDK and paste it under Node Modules directory of React Native project.

· agconnect-services.json is not required for integrating the hms-ads-sdk.

· Run below command under project directory using CLI if you cannot find node modules.

“npm install” & “npm link”

4. Integration

1. Configure android level build.gradle

Add to buildscript/repositories and allprojects/repositories

maven {url 'http://developer.huawei.com/repo/'}

2. Configure app level build.gradle

Add to dependencies

Implementation project (“: react-native-hms-ads”)

3. Linking the HMS Ads Kit Sdk

Run below command in the project directory

react-native link react-native-hms-ads

5. Adding permissions

Add below permissions to Android.manifest file.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

Development Process

Once sdk is integrated and ready to use, add following code to your App.js file which will import the API’s present.

· Creating an Interstitial Ad

· Setting Ad Slot ID

· Setting Ad Request Parameters (Optional)

· Loading the Ad

· Displaying the Ad

· Listening for Ad Events

· Testing

Creating an Interstitial Ad

HMSInterstitial module is used to create the interstitial Ad

import HMSAds, {
HMSInterstitial,
InterstitialMediaTypes,
} from 'react-native-hms-ads';

Setting Ad Slot ID

setAdId() method is responsible for setting the Ad Slot. Below is the code for same.

Developers can use publisher services to create the Ad Slot ID. Please refer this article to know the process for creating the slot Id’s

// creating object for the Ad Slot ID

const Interstitial = () => {
let interstitialAdIds = {};
interstitialAdIds[InterstitialMediaTypes.IMAGE] = 'teste9ih9j0rc3';
interstitialAdIds[InterstitialMediaTypes.VIDEO] = 'testb4znbuh3n2';

// creating object for setting up the media type for the ad

const [displayForm, setDisplayForm] = useState({
mediaType: InterstitialMediaTypes.VIDEO,
adId: interstitialAdIds.video,

// setting up the ID

HMSInterstitial.setAdId(displayForm.adId);

Setting Ad Request Parameters

setAsParam() method is used to set the parameters for the specific ad audience. Below code is called on the button click for the same.

import {ContentClassification,UnderAge } from 'react-native-hms-ads';

<Button
title="Set Ad Parameter"
onPress={() => {
HMSInterstitial.setAdParam({
adContentClassification:
ContentClassification.AD_CONTENT_CLASSIFICATION_UNKOWN,
// appCountry: '',
// appLang: '',
// belongCountryCode: '',
gender: Gender.UNKNOWN,
nonPersonalizedAd: NonPersonalizedAd.ALLOW_ALL,
// requestOrigin: '',
tagForChildProtection:
TagForChild.TAG_FOR_CHILD_PROTECTION_UNSPECIFIED,
tagForUnderAgeOfPromise: UnderAge.PROMISE_UNSPECIFIED,
// targetingContentUrl: '',
});
}}
/>

Loading the Ad

Calling the loadAd() method to load the ad on button click.

<Button
title="Load"
onPress={() => {
HMSInterstitial.loadAd();
}}

Displaying the Ad

isLoaded() method is called to confirm if the ad has finished loading.Once ad loading is completed, show() method is called to display the ad on a button click.

<Button
title="Show"
color="purple"
disabled={!isLoaded}
onPress={() => {
setLoaded(false);
HMSInterstitial.show();
}}

Listening for Ad Events

As we handle multiple Ad events for different actions, Listener is required for listening to these events as below.

useEffect(() => {
HMSInterstitial.setAdId(displayForm.adId);
HMSInterstitial.adClosedListenerAdd(() => {
toast('HMSInterstitial adClosed');
});
// HMSInterstitial.adClosedListenerRemove();
HMSInterstitial.adFailedListenerAdd((error) => {
toast('HMSInterstitial adFailed');
console.warn('HMSInterstitial adFailed, error: ', error);
});
// HMSInterstitial.adFailedListenerRemove();
HMSInterstitial.adLeaveListenerAdd(() => {
toast('HMSInterstitial adLeave');
});
// HMSInterstitial.adLeaveListenerRemove();
HMSInterstitial.adOpenedListenerAdd(() => {
toast('HMSInterstitial adOpened');
});
// HMSInterstitial.adOpenedListenerRemove();
HMSInterstitial.adLoadedListenerAdd((result) => {
toast('HMSInterstitial adLoaded');
console.log('HMSInterstitial adLoaded, result: ', result);
});
// HMSInterstitial.adLoadedListenerRemove();
HMSInterstitial.adClickedListenerAdd(() => {
toast('HMSInterstitial adClicked');
});
// HMSInterstitial.adClickedListenerRemove();
HMSInterstitial.adImpressionListenerAdd(() => {
toast('HMSInterstitial adImpression');
});
// HMSInterstitial.adImpressionListenerRemove();
return HMSInterstitial.allListenersRemove;

Testing

Run the below command to build the project

React-native run-android

Upon successful build, run the below command in the android directory of the project to create the signed apk.

gradlew assembleRelease

Results

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200807141650.86636875127870095802769507537414:50510818010807:2800:2F036FF8FBCB641BCFE2376D41F1DB7317D832C9510FBB7EBD332BE3928CBA98.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200807141650.86636875127870095802769507537414:50510818010807:2800:2F036FF8FBCB641BCFE2376D41F1DB7317D832C9510FBB7EBD332BE3928CBA98.gif[/IMG]

Conclusion

Adding Interstitial ads seem very easy. Stay tuned for more ads activity.