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

Advertisement: Buzz word in today’s era

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200724155231.73904308119809756540038056654364:50510804010138:2800:6442528C487338A56A1BBFBA49072353E93E23A64ADCED055B00D6DB3FFCD45E.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200724155231.73904308119809756540038056654364:50510804010138:2800:6442528C487338A56A1BBFBA49072353E93E23A64ADCED055B00D6DB3FFCD45E.gif[/IMG]​

The journey from newspaper advertisement to digital advertisement is been beautiful as we understand the need of advertisement in any business.

Every business focuses on exponential growth and profits and hence advertisement plays vital role in it.

HMS ADS KIT provides easy and powerful solution for enabling the business growth and monetize the services.

HMS ADS KIT offers a range of different ad formats for different business needs as following

Banner Ads

Native Ads

Interstitial Ads

Rewarded Ads

Splash Ads

Banner Ads

Banner advertising refers to the use of a rectangular graphic display that stretches across the top, bottom, or sides of a website or online media property.

The purpose of banner advertising is to promote a brand and/or to get traffic from the host page to go to the advertiser's website.

“The first banner advertisement was deployed on Wired Magazine's website in 1994”

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200724155253.32286044000266730299177661657889:50510804010138:2800:3258E3F2A8EF325192176E171549D5E2DED5032D52983C19F0CD82DAF2C5CA9E.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200724155253.32286044000266730299177661657889:50510804010138:2800:3258E3F2A8EF325192176E171549D5E2DED5032D52983C19F0CD82DAF2C5CA9E.jpg[/IMG]​

As HMS Ads kit offers range of ads format, will elaborate how does banner ads work using the HMS solution.

Development Overview

HMS Ads KIT can be integrated for various business requirements in your react native project as following:

Perquisites

· Must have a Huawei Developer Account

· Must have a Huawei phone with HMS 4.0.0.300 or later

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

Major Dependencies

· React Native CLI : 2.0.1

· Gradle Version: 6.0.1

· Gradle Plugin Version: 3.5.2

· React Native Site Kit SDK : 4.0.4

· React-native-hms-site gradle dependency

· AGCP gradle dependency

Preparation

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

· First, we need to create an app or project in the Huawei app gallery connect.

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

· Create a react native project. Using

“react-native init project name”

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

· Download the React Native Ads Kit SDK and paste It under Node modules directory of React Native project.

Tip: Run below command under project directory using CLI if You cannot find node modules.

“npm install”
“npm link”

Integration

· Configure android level build.gradle

1. Add to buildscript/repositores

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

2. Add to 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

1) Run below command in the project directory

react-native link react-native-hms-ads

Adding permissions

Add below permissions to Android.manifest file.

1. <uses-permission android:name="android.permission.INTERNET" />
2. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

Development Process

HMS Ads SDK already provides the code for all the supported ads format.

Once sdk is integrated and ready to use, add following code to your App.js file which will import the API’s present.

import {
HMSBanner,
BannerAdSizes,
ContentClassification,
Gender,
NonPersonalizedAd,
TagForChild,
UnderAge,
} from 'react-native-hms-ads';

Declare bannerAdId in App.js file

AdId is ad slot id which can be generated using Publisher service

const Banner = () => {
let bannerAdIds = {};
bannerAdIds[BannerMediaTypes.IMAGE] = 'testw6vs28auh3';

Define supported ads size

const [bannerAdSize, setBannerAdSize] = useState({
bannerAdSize: BannerAdSizes.B_320_100,
// width: 0,
});

Create a function to define the banner ad and its elements with load and failed case

<HMSBanner
style={{height: 100}}
bannerAdSize={bannerAdSize}
adId={adId}
adParam={{
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: '',
}}

// function to load the above banner add on the button click

[/CODE]onAdLoaded={(e) => {

console.log('HMSBanner onAdLoaded', e.nativeEvent);

toast('HMSBanner onAdLoaded');

}}[/CODE]

//function to handle failed ad loading on button click

onAdFailed={(e) => {
console.warn('HMSBanner onAdFailed', e.nativeEvent);
toast('HMSBanner onAdFailed');
}}

//Display text accordingly on below functions

onAdOpened={(e) => toast('HMSBanner onAdOpened')}
onAdClicked={(e) => toast('HMSBanner onAdClicked')}
onAdClosed={(e) => toast('HMSBanner onAdClosed')}
onAdImpression={(e) => toast('HMSBanner onAdImpression')}
onAdLeave={(e) => toast('HMSBanner onAdLeave')}

// component reference

ref={(el) => {
adBannerElement = el;
}}
/>

Results

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200724155511.50363509712591061910460953085905:50510804010138:2800:0E53269B20232B99C7B54195A319897E98E87D6C4637F86F3AF3B04B4E95E361.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200724155511.50363509712591061910460953085905:50510804010138:2800:0E53269B20232B99C7B54195A319897E98E87D6C4637F86F3AF3B04B4E95E361.gif[/IMG]​

Conclusion

Adding banner ads seem very easy. Stay tuned for more ads activity.