[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=0201327829880650040&fid=0101187876626530001

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200814142129.38131683292309557698657367274335:50510827012700:2800:52D393800CE01EFB20AB6B70A5428B144E696FE6FEF8469AE8B9F7112B9192EB.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200814142129.38131683292309557698657367274335:50510827012700:2800:52D393800CE01EFB20AB6B70A5428B144E696FE6FEF8469AE8B9F7112B9192EB.jpg[/IMG]​

“Native advertising”, a term first coined by Fred Wilson at the Online Media, Marketing, and Advertising Conference in 2011.Native advertising is a form of paid media where the ad experience follows the natural form and function of the user experience in which it is placed.

Huawei Ads Kit offers variety of different ads format to reach the consumer marketing goals in today’s competitive world.

Huawei Ads Kit demonstrate an easy and efficient way to implement the native 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.

Adding a Native Ad

Configuring Properties

Executing Commands

Testing

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

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200814142247.09818812587793473958798225205261:50510827012700:2800:BBA12AA8A06B58EAFCFE65E737BAC8CC1C196620861577EB814C10C4C32DA80C.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200814142247.09818812587793473958798225205261:50510827012700:2800:BBA12AA8A06B58EAFCFE65E737BAC8CC1C196620861577EB814C10C4C32DA80C.jpg[/IMG]

Adding a Native Ad

HMSNative module is added to the application to work with native ads components. Height can also be customized with the help of ‘style’.

import {
HMSNative,
} from'react-native-hms-ads';

style={{height:322}}/>

Configuring Properties

Native Ads properties can be configured in various ways

1. For handling different media types, create different ads slot id for different media type ads.

2. Custom listeners can also be added to listen different events

3. Specific native ads can be implemented and requested to target specific audience.

4. Position of the ads component can customized and adjusted

5. View options for the texts on the native ad components can also be changed.

Import below modules for customizing the native ads as required.

import {
HMSNative,
NativeMediaTypes,
ContentClassification,
Gender,
NonPersonalizedAd,
TagForChild,
UnderAge,
ChoicesPosition,
Direction,
AudioFocusType,
ScaleType
} from'react-native-hms-ads';

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

Create a function in the app.js file as below and add the ad slot id.

const Native = () => {x
let nativeAdIds = {};
nativeAdIds[NativeMediaTypes.VIDEO] = 'testy63txaom86';
nativeAdIds[NativeMediaTypes.IMAGE_SMALL] = 'testb65czjivt9';
nativeAdIds[NativeMediaTypes.IMAGE_LARGE] = 'testu7m3hc4gvm';

//Setting up the media type
const [displayForm, setDisplayForm] = useState({
mediaType: NativeMediaTypes.VIDEO,
adId: nativeAdIds.video,
});

//Add below code for different configuration
nativeConfig={{
choicesPosition: ChoicesPosition.BOTTOM_RIGHT,
mediaDirection: Direction.ANY,
// mediaAspect: 2,
// requestCustomDislikeThisAd: false,
// requestMultiImages: false,
// returnUrlsForImages: false,
// adSize: {
// height: 100,
// width: 100,
// },
videoConfiguration: {
audioFocusType: AudioFocusType.NOT_GAIN_AUDIO_FOCUS_ALL,
// clickToFullScreenRequested: true,
// customizeOperateRequested: true,
startMuted: true,
},
}}
viewOptions={{
showMediaContent: false,
mediaImageScaleType: ScaleType.FIT_CENTER,
// adSourceTextStyle: {color: 'red'},
// adFlagTextStyle: {backgroundColor: 'red', fontSize: 10},
// titleTextStyle: {color: 'red'},
descriptionTextStyle: {visibility: false},
callToActionStyle: {color: 'black', fontSize: 12},
}}

Executing Commands

To load the ad on the button click, loadAd() api is used.

title="Load"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.loadAd();
}
}}

To dislike the ad on the button click, dislikeAd() api is used.

title="Dislike"
color="orange"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.dislikeAd('Because I dont like it');
}
}}

To allow the click on the ad setAllowCustomclick() api is used on te button click.

title="Allow custom click"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.setAllowCustomClick();
}
}}

To Report an ad impression on the button click.

title="Record impression"
color="red"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.recordImpressionEvent({
impressed: true,
isUseful: 'nope',
});
}
}}

To navigate through the ‘why’page, gotowhyThisAdPage() api is used.

title="Go to Why Page"
color="purple"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.gotoWhyThisAdPage();
}
}}

To record an event on the button click recordClickEvent() api is used.

title="Record click event"
color="green"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.recordClickEvent();
}
}}

Below listeners are implemented to start, play and stop the video ads.

onVideoStart={(e) => toast('HMSNative onVideoStart')}
onVideoPlay={(e) => toast('HMSNative onVideoPlay')}
onVideoEnd={(e) => toast('HMSNative onVideoEnd')}

Testing

Run the below command to build the project

React-native run-android

After 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.20200814154725.98286641024514904411095003963325:50510827012700:2800:F4E29C108D09CE7840E98CAD7105B816F49C506466C9D59AAE98828135A8AC41.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200814154725.98286641024514904411095003963325:50510827012700:2800:F4E29C108D09CE7840E98CAD7105B816F49C506466C9D59AAE98828135A8AC41.gif[/IMG]

Conclusion

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