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

Original link: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0202333954713070046&fid=0101187876626530001

A Splash Ad is called Splash Ad because it is a full page interstitial ad that is displayed immediately after the application is launched.

A Splash Ad first displays a full-page splash screen that you define (for example your app's logo or branding) followed by a full page ad.

Huawei Ads kit offers Splash Ad to use in your business to achieve certain business and advertisement goals by following the digital marketing practices.

Huawei Ads Kit demonstrate an easy and efficient way to implement the splash ads within your application.

Prerequisite

1. Must have a Huawei Developer Account

2. Must have a Huawei phone with HMS 4.0.0.300 or later

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

Major Dependencies

1. React Native CLI : 2.0.1

2. Gradle Version: 6.0.1

3. Gradle Plugin Version: 3.5.2

4. React Native Site Kit SDK : 4.0.4

5. React-native-hms-site gradle dependency

6. AGCP gradle dependency

Development Overview

Preparation

1. Create an app or project in the Huawei app gallery 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 below 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.

Tips

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

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

“npm install” & “npm link”

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

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 a Splash Ad

· Setting Ad Slot ID

· Customizing Splash Screen

· Setting Ad Request Parameters

· Display Ad

· Listen to Ad Events

· Testing

HMS Splash Ads aligned with the application and device layout seamlessly, however these can be customised as well.

Creating a Splash Ad

HMSSplash component needs to be added to import the Splash ads in the code.

import {HMSSplash} from 'react-native-hms-ads';

Setting Ad Slot ID

setAdId() is the method used for creating an ad slot ID reference to the app.js file.

HMSSplash.setAdId("AdSlotId");

Where AdSlotId = "testd7c5cewoj6" and can also be defined as Video or Image media types

Note

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

Customizing Splash Screen

Splash ads can also be customized as explained below.

Create a function in app.js file and add different customizations.

Changing the logo text or setting up the copy write text to your advertisement.

HMSSplash.setLogoText('HMS App');
HMSSplash.setCopyrightText('Copyright HMS');

Setting Ad Request Parameters

setAdParam() is used to set the set the additional parameters to get specific ads for specific audience. Below code can be executed on the button click to ad additional parameters.

import {ContentClassification,UnderAge } from 'react-native-hms-ads';
HMSSplash.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: '',
}

Display Ad

Show() method is used to display the ads on the button click.

<Button title="Splash" color="green" onPress={() => HMSSplash.show()}/>

Listen to Ad Events

Listener functions can be triggered with the different ad actions and associated events.

HMSSplash.adLoadedListenerAdd(() => {
toast('HMSSplash adLoaded');
});
// HMSSplash.adLoadedListenerRemove();
HMSSplash.adFailedToLoadListenerAdd(() => {
toast('HMSSplash adFailedToLoad');
});
// HMSSplash.adFailedToLoadListenerRemove();
HMSSplash.adDismissedListenerAdd(() => {
toast('HMSSplash adDismissed');
});
// HMSSplash.adDismissedListenerRemove();
HMSSplash.adShowedListenerAdd(() => {
toast('HMSSplash adShowed');
});
// HMSSplash.adShowedListenerRemove();
HMSSplash.adClickListenerAdd(() => {
toast('HMSSplash adClick');
});

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.20200821121438.17455463786343278042378058504031:50510902021437:2800:13F12F3D747A8DBAA07F782C625EE4B6421A1A356177E66209E2BFED6D4ADB1C.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200821121438.17455463786343278042378058504031:50510902021437:2800:13F12F3D747A8DBAA07F782C625EE4B6421A1A356177E66209E2BFED6D4ADB1C.gif[/IMG]

References

https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/introduction-0000001050196714

Conclusion

Adding Splash Ads seems very easy.