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

Introduction

Huawei Ads can provide to developers an extensive data capabilities to deliver high quality ad content to their users. By integrating HMS ads kit we can start earning right away. It is very useful particularly when we are publishing a free app and want to earn some money from it.

Integrating HMS ads kit does not take more than 10 mins. HMS ads kit currently offers five types of ad format:

1) Banner Ad

2) Native Ad

3) Reward Ad

4) Interstitial Ad

5) Splash Ad

In this article we are going to learn how to integrate HMS Ads Kit in Ionic application.

Demo

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925085712.57874845849581757267524288649064:50511014010313:2800:CE94374B5E0EBFA8B12E9226F7F6B07D2A82DE8658CB73854D16434D80609874.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925085712.57874845849581757267524288649064:50511014010313:2800:CE94374B5E0EBFA8B12E9226F7F6B07D2A82DE8658CB73854D16434D80609874.gif[/IMG]

Prerequisite

1) Must have a Huawei Developer Account.

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

3) Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.

4) Must install node in the system

5) Must install Ionic in the system using below command:

npm install -g [MENTION=1329689]iONiC[/MENTION]/cli

Things need to be done

1) Generating a Signing Certificate Fingerprint. For generating the SHA key, refer this article.

2) Create an app in the Huawei AppGallery connect.

3) Provide the SHA Key in App Information Section.

4) Provide storage location.

5) Download the agconnect-services.json and store it somewhere on our computer.

6) Create a blank Ionic Project using below command:

ionic start Your_Application_Name blank --type=angular

7) Run the following command in the root directory of your Ionic project to install it through npm.

npm install @hmscore/cordova-plugin-hms-ads

8) If you want full Ionic support with code completion etc., install [MENTION=1329689]iONiC[/MENTION]-native/core in your project.

npm install [MENTION=1329689]iONiC[/MENTION]-native/core --save-dev

9) Run the following command to copy the ionic/dist/hms-ads folder from library to node_modules [MENTION=1329689]iONiC[/MENTION]-native folder under your Ionic project.

cp node_modules/@hmscore/cordova-plugin-hms-ads/ionic/dist/hms-ads node_modules [MENTION=1329689]iONiC[/MENTION]-native/ -r

10) Run the following command to compile the project:

ionic build

npx cap init [appName] [appId]

Where appName is the name of your app, and appId is package_name in your agconnect-services.json file (ex: com.example.app).

11) Run the following command to add android platform to your project:

ionic capacitor add android

12) Make sure your project has a build.gradle file with a maven repository address and agconnect service dependencies as shown below:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925090812.88115458462277834345952680308307:50511014010313:2800:4D08F07BAAB16AADB1C8E630C6D6CC4599EDD8A4BAC42599F5FC7502A1253A27.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925090812.88115458462277834345952680308307:50511014010313:2800:4D08F07BAAB16AADB1C8E630C6D6CC4599EDD8A4BAC42599F5FC7502A1253A27.png[/IMG]

13) Add the Signing certificate configuration to the build.gradle file in the app directory as show below:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925091017.16423416353925815363396192696834:50511014010313:2800:4D5616DD0F55D6D59394B18A48C5D08AC35C1251A1133F44B57C8D5F5508943A.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925091017.16423416353925815363396192696834:50511014010313:2800:4D5616DD0F55D6D59394B18A48C5D08AC35C1251A1133F44B57C8D5F5508943A.png[/IMG]

14) Add plugin to the build.gradle file in the app directory as show below:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925091531.01287833959146907945818814166226:50511014010313:2800:5F653DDDD59DA82FDF30909581637FA91DD95554CC0AE134905D8E063D7149E0.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925091531.01287833959146907945818814166226:50511014010313:2800:5F653DDDD59DA82FDF30909581637FA91DD95554CC0AE134905D8E063D7149E0.png[/IMG]

15) Add ads service implementation into to dependencies section of build.gradle file in the app directory as show below:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925091630.01286697766560849635412194301909:50511014015735:2800:95C372580BEA5F22B16AB5F63B42F5077ABD3DF370B777691654922A5349E263.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925091630.01286697766560849635412194301909:50511014015735:2800:95C372580BEA5F22B16AB5F63B42F5077ABD3DF370B777691654922A5349E263.png[/IMG]

16) Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925091733.13780089326165637476033515196876:50511014010313:2800:8B0F9044451D3BE01E1962E424A58B0494405F372D5C2D11EE85A4ED29D81AA8.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925091733.13780089326165637476033515196876:50511014010313:2800:8B0F9044451D3BE01E1962E424A58B0494405F372D5C2D11EE85A4ED29D81AA8.png[/IMG]

17) To update dependencies, and copy any web assets to your project, run the following code:

npx capacitor sync

Let’s Code

Import

Import the following code in your application page:

import {
HmsAds, InterstitialAdEvents,
BannerAdOptions, BannerAdEvents, SplashAdEvents,
RewardAdEvents, NativeAdEvents, BannerAdSize, Color, Gender,
NonPersonalizedAd} from [MENTION=1329689]iONiC[/MENTION]-native/hms-ads/ngx';

Initialization

We need to initialize HMS ads kit as show below:

async ionViewDidEnter(){
const isInit = await this.hmsads.isInit();
if(!isInit){
await this.hmsads.init({ bannerFloat: false });
}
}

Banner Ads

Banner ads are rectangular images that occupy a spot at the top, middle, or bottom within an app's layout. Banner ads refresh automatically at regular intervals. When a user taps a banner ad, the user is redirected to the advertiser's page in most cases.

async showBannerAd() {

const options: BannerAdOptions = {
adId: 'testw6vs28auh3',
bannerAdSize: BannerAdSize['BANNER_SIZE_SMART'],
bgColor: Color['TRANSPARENT'],
anchor: 'bottom',
bannerRefresh: 50
}
this.banner = new this.hmsads.Banner;
await this.banner.create(options);
this.banner.on(BannerAdEvents.LOADED, () => {
console.log("bannerAdsInstance :: loaded");
});

this.banner.on(BannerAdEvents.FAILED, () => {
console.log("bannerAdInstance :: failed");
});

await this.banner.loadAd({});
}

Below are the size we can choose to create banner ads:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925092449.80238200910271412713592913141442:50511014010313:2800:C7637EF9E6851AFED38A08D57D2AF424396B145A9BDA2C63B5A52B998266780F.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20200925092449.80238200910271412713592913141442:50511014010313:2800:C7637EF9E6851AFED38A08D57D2AF424396B145A9BDA2C63B5A52B998266780F.png[/IMG]

Native Ad

Native ads fit seamlessly into the surrounding content to match our app design. Such ads can be customized as needed.

async showNativeAd() {
if (this.nativeAdInstance != null)
await this.nativeAdInstance.destroy();

const template = this.nativeAdSize as "video" ;
const nativeElem = document.getElementById("native-ad-element");

let adId = 'testy63txaom86';
nativeElem.style.height = '300px';

// Create a new native ad with selected template
this.nativeAdInstance = new this.hmsads.Native();

await this.nativeAdInstance.create({
div: 'native-ad-element',
template,
bg: Color.WHITE
});

this.nativeAdInstance.on(NativeAdEvents.NATIVE_AD_LOADED, async () => {
console.log("nativeAdInstance :: loaded");
await this.nativeAdInstance.show();
});

// Load the ad.
this.nativeAdInstance.loadAd({
adId
});
}

We can change the template here to banner, video, small or full.

Reward Ad

Rewarded ads are full-screen video ads that reward users for watching.

async showRewardAd(){
const reward = new this.hmsads.Reward();
await reward.create({
adId: 'testx9dtjwj8hp',

});
reward.on(RewardAdEvents.LOADED, async () => {
await reward.show();
});

reward.loadAd({});
}

Interstitial Ad

Interstitial ads are full-screen ads that cover the interface of an app. Such ads are displayed when a user starts, pauses, or exits an app, without disrupting the user's experience.

async showInterstitialAd(){
const interstitial = new this.hmsads.Interstitial()
await interstitial.create({ adId: 'testb4znbuh3n2' })
interstitial.on(InterstitialAdEvents.LOADED, async () => {
await interstitial.show()
})
await interstitial.loadAd({})
console.log("finished.")
}

Splash Ad

Splash ads are displayed immediately after an app is launched, even before the home screen of the app is displayed.

async showSplashAd() {

const splash = new this.hmsads.Splash();

await splash.create({
logo: {
copyright: 'Copyright Huawei 2020',
owner: 'Huawei',
anchor: 'bottom',
bg: Color['TRANSPARENT']
}
});
splash.on(SplashAdEvents.LOADED, async () => {
await splash.show();
});

splash.on(SplashAdEvents.DISMISSED, async () => {
console.log("SplashAd dismissed");
await splash.cancel();
await splash.destroy();

})
await splash.load({
adId: 'testq6zq98hecj',
orientation: this.hmsads.Orientation.SCREEN_ORIENTATION_PORTRAIT
});
}

Install Referrer Information

For better support app promotion targeted at Huawei devices, we need install referrer capability for advertisers to track promotion channels and attribute conversions.

showReferrerDetails(){

this.hmsads.getReferrerDetails(true).then(result => alert(JSON.stringify(result)));

}

Obtaining OAID Information

The OAID information can be used to recommend personalized ads to users and attribute ad conversions.

showOAIDDetails(){

this.hmsads.getOaidResult().then(result => alert(JSON.stringify(result)));

}

Conclusion

We learn how to integrate HMS Ads Kit in Ionic Project. Feel free to comment, share and like the article. Also you can follow me to get awesome article like this every week.

For more reference

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