[Huawei Developers] HMS Community:
View attachment 5568055

Introduction

In this article, I will explain how to integrate Huawei Ads Kit in an Application using React Native. I will be using Interstitial Ads. Interstitial ads are full-screen ads that cover the interface of an app. Such an ad is displayed when a user starts, pauses or exits an app, without disrupting the user's experience.

Ads Kit

Huawei Ads Kit leverages the vast user base of Huawei devices and Huawei's extensive data capabilities to provide you with the Publisher Service, helping you to monetize traffic.

HMS Ads Kit has 7 types of Ads kits. Now we can implement Interstitial Ads in this application.

Requirements

1. JDK version: 1.7 or later

2. Android Studio version: 3.X or later

3. minSdkVersion: 21 or later

4. targetSdkVersion: 31 (recommended)

5. compileSdkVersion: 29 (recommended)

6. Gradle: 4.1 or later (recommended)

7. Must have a Huawei Developer Account

8. Must have a Huawei phone with HMS 4.0.0.300 or later and running EMUI 4.0 or later.

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

Major Dependencies

React Native CLI : 2.0.1

React Native Ads Kit SDK : 4.0.4

React-native-hms-ads gradle dependency.

Preparation

In order to develop the HMS react native apps, following steps are mandatory:

1. Create an app or project in the Huawei AppGallery Connect.

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

3. Create a react native project. Use the following command

react-native init project name

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

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

npm install & npm link

Integration

Configure android level build.gradle

Add to buildscript/repositories and allprojects/repositories

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

Configure app level build.gradle

Add to dependencies

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

Linking the HMS Ads Kit Sdk

Run below command in the project directory

react-native link react-native-hms-ads

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"/>

Sync Gradle.

Development

To successfully run interstitial ads in application, we would need to:

Creating an Interstitial Ad.

Setting Ad Slot ID.

Loading the Ad.

Displaying the Ad.

Listening for Ad Events

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. 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';

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.

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.

setLoaded(false);

HMSInterstitial.show();

Listening for Ad Events

As we handle multiple Ad events for different actions, Listener can be added 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;

})

Add all these functionalities to a button according to your UI.

For example, in a News Application if there is a button names “Sports” then:

<Button
title="Sports"
onPress={() => {

HMSInterstitial.setAdParam({ …})

HMSInterstitial.loadAd();

setLoaded(false);
HMSInterstitial.show();

}}

/>

Testing

Run the below command to build the project

React-native run-android

Run the application (Generating the Signed Apk):

Open project directory path in command prompt. Navigate to android directory and run the below command for signing the apk.

gradlew assembleRelease

Result

View attachment 5568057

Tips and Tricks

1. Set minSDK version to 24 or later, otherwise you will get AndriodManifest merge issue.

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

3. Make sure you have added SHA-256 fingerprint without fail.

4. Make sure all the dependencies are added properly.

5. For project cleaning navigate to android directory and run the below command.

gradlew clean

Conclusion

In this article, we can learn about how to integrate Ads Kit and how to add Interstitial ad in React native project. It provides developers different capabilities to deliver good quality ads content to users.

Reference

Ads Kit: Documentation

Ads Kit: Training Video