Unleashing HMS ADs kit: with React Native - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum
Advertisement: Buzz word in today’s era
{
"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"
}
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”
​
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
Code:
“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.
Code:
“npm install”
“npm link”
Integration
· Configure android level build.gradle
1. Add to buildscript/repositores
Code:
maven {url 'http://developer.huawei.com/repo/'}
2. Add to allprojects/repositories
Code:
maven {url 'http://developer.huawei.com/repo/'}
· Configure app level build.gradle
Add to dependencies
Code:
Implementation project (“:react-native-hms-ads”)
· Linking the HMS Ads Kit Sdk
1) Run below command in the project directory
Code:
react-native link react-native-hms-ads
Adding permissions
Add below permissions to Android.manifest file.
Code:
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.
Code:
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
Code:
const Banner = () => {
let bannerAdIds = {};
bannerAdIds[BannerMediaTypes.IMAGE] = 'testw6vs28auh3';
Define supported ads size
Code:
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
Code:
<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
Code:
onAdFailed={(e) => {
console.warn('HMSBanner onAdFailed', e.nativeEvent);
toast('HMSBanner onAdFailed');
}}
//Display text accordingly on below functions
Code:
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
Code:
ref={(el) => {
adBannerElement = el;
}}
/>
Results
Conclusion
Adding banner ads seem very easy. Stay tuned for more ads activity.