Integrate Huawei Ads Kit into Ionic Project in 10 Mins - Huawei Developers

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
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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:
Code:
npm install -g [user=1329689]@iONiC[/user]/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:
Code:
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.
Code:
npm install @hmscore/cordova-plugin-hms-ads
8) If you want full Ionic support with code completion etc., install @iONiC-native/core in your project.
Code:
npm install [user=1329689]@iONiC[/user]-native/core --save-dev
9) Run the following command to copy the ionic/dist/hms-ads folder from library to node_modules @iONiC-native folder under your Ionic project.
Code:
cp node_modules/@hmscore/cordova-plugin-hms-ads/ionic/dist/hms-ads node_modules [user=1329689]@iONiC[/user]-native/ -r
10) Run the following command to compile the project:
Code:
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:
Code:
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:
13) Add the Signing certificate configuration to the build.gradle file in the app directory as show below:
14) Add plugin to the build.gradle file in the app directory as show below:
15) Add ads service implementation into to dependencies section of build.gradle file in the app directory as show below:
16) Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below:
17) To update dependencies, and copy any web assets to your project, run the following code:
Code:
npx capacitor sync
Let’s Code
Import
Import the following code in your application page:
Code:
import {
HmsAds, InterstitialAdEvents,
BannerAdOptions, BannerAdEvents, SplashAdEvents,
RewardAdEvents, NativeAdEvents, BannerAdSize, Color, Gender,
NonPersonalizedAd} from [user=1329689]@iONiC[/user]-native/hms-ads/ngx';
Initialization
We need to initialize HMS ads kit as show below:
Code:
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.
Code:
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:
Native Ad
Native ads fit seamlessly into the surrounding content to match our app design. Such ads can be customized as needed.
Code:
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.
Code:
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.
Code:
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.
Code:
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.
Code:
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.
Code:
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