Ads Alert! Integration of Huawei Ads Kit in Application using React Native
Tags: javascript, beginners, huaweiadskit, reactnative
Published: 2022-03-23 11:53:58



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erjrcsq5ghb47gmwsnke.gif)

## **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**
1.	React Native CLI : 2.0.1
2.	React Native Ads Kit SDK : 4.0.4
3.	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:
1.	Creating an Interstitial Ad.
2.	Setting Ad Slot ID.
3.	Loading the Ad.
4.	Displaying the Ad.
5.	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):
1.	Open project directory path in command prompt. Navigate to android directory and run the below command for signing the apk.
`gradlew assembleRelease`



## **Result**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttxeqx155ly8t2vic53m.png)

## **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](https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/publisher-service-js-dev-process-0000001179595231)
Ads Kit: [Training Video](https://developer.huawei.com/consumer/en/training/course/video/101583005582480166)