Delimiting Huawei ads kit: feat INTERSTITIAL ADs using React Native - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum
INTERSTITIAL ADs
{
"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"
}
Interstitial ads are full-screen ad formats that cover the interface of an app. They are usually displayed at natural transition points in the flow of an app like pausing a game or between different activities. The main difference between other types of ads and interstitial ads is that interstitial ones cover all the screen which makes it catchier and more effective.
Interstitial ads are used for high impression rate to increase downloads and revenue.
HUAWEI Ads Kit offers variety of different ads format to reach the consumer marketing goals in today’s competitive world.
HUAWEI Ads Kit provides easy and flexible way to implement the interstitial ads within your application.
Development Overview
HMS Ads KIT can be integrated for various business requirements in your react native project as following:
1. 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.
2. 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 dependenc
· AGCP gradle dependency
3. Preparation
1. In order to develop the HMS react native apps following steps are mandatory.
2. Create an app or project in the Huawei app gallery connect.
3. Provide the SHA Key and App Package name of the project in App Information Section and enable the required API.
4. Create a react native project. Using
“react-native init project name”
5. Download the React Native Ads Kit SDK and paste it under Node Modules directory of React Native project.
· agconnect-services.json is not required for integrating the hms-ads-sdk.
· Run below command under project directory using CLI if you cannot find node modules.
Code:
“npm install” & “npm link”
4. Integration
1. Configure android level build.gradle
Add to buildscript/repositories and allprojects/repositories
Code:
maven {url 'http://developer.huawei.com/repo/'}
2. Configure app level build.gradle
Add to dependencies
Code:
Implementation project (“: react-native-hms-ads”)
3. Linking the HMS Ads Kit Sdk
Run below command in the project directory
Code:
react-native link react-native-hms-ads
5. Adding permissions
Add below permissions to Android.manifest file.
Code:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
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.
· Creating an Interstitial Ad
· Setting Ad Slot ID
· Setting Ad Request Parameters (Optional)
· Loading the Ad
· Displaying the Ad
· Listening for Ad Events
· Testing
Creating an Interstitial Ad
HMSInterstitial module is used to create the interstitial Ad
Code:
import HMSAds, {
HMSInterstitial,
InterstitialMediaTypes,
} from 'react-native-hms-ads';
Setting Ad Slot ID
setAdId() method is responsible for setting the Ad Slot. Below is the code for same.
Developers can use publisher services to create the Ad Slot ID. Please refer this article to know the process for creating the slot Id’s
// creating object for the Ad Slot ID
Code:
const Interstitial = () => {
let interstitialAdIds = {};
interstitialAdIds[InterstitialMediaTypes.IMAGE] = 'teste9ih9j0rc3';
interstitialAdIds[InterstitialMediaTypes.VIDEO] = 'testb4znbuh3n2';
// creating object for setting up the media type for the ad
Code:
const [displayForm, setDisplayForm] = useState({
mediaType: InterstitialMediaTypes.VIDEO,
adId: interstitialAdIds.video,
// setting up the ID
Code:
HMSInterstitial.setAdId(displayForm.adId);
Setting Ad Request Parameters
setAsParam() method is used to set the parameters for the specific ad audience. Below code is called on the button click for the same.
Code:
import {ContentClassification,UnderAge } from 'react-native-hms-ads';
Code:
<Button
title="Set Ad Parameter"
onPress={() => {
HMSInterstitial.setAdParam({
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: '',
});
}}
/>
Loading the Ad
Calling the loadAd() method to load the ad on button click.
Code:
<Button
title="Load"
onPress={() => {
HMSInterstitial.loadAd();
}}
Displaying the Ad
isLoaded() method is called to confirm if the ad has finished loading.Once ad loading is completed, show() method is called to display the ad on a button click.
Code:
<Button
title="Show"
color="purple"
disabled={!isLoaded}
onPress={() => {
setLoaded(false);
HMSInterstitial.show();
}}
Listening for Ad Events
As we handle multiple Ad events for different actions, Listener is required for listening to these events as below.
Code:
useEffect(() => {
HMSInterstitial.setAdId(displayForm.adId);
HMSInterstitial.adClosedListenerAdd(() => {
toast('HMSInterstitial adClosed');
});
// HMSInterstitial.adClosedListenerRemove();
HMSInterstitial.adFailedListenerAdd((error) => {
toast('HMSInterstitial adFailed');
console.warn('HMSInterstitial adFailed, error: ', error);
});
// HMSInterstitial.adFailedListenerRemove();
HMSInterstitial.adLeaveListenerAdd(() => {
toast('HMSInterstitial adLeave');
});
// HMSInterstitial.adLeaveListenerRemove();
HMSInterstitial.adOpenedListenerAdd(() => {
toast('HMSInterstitial adOpened');
});
// HMSInterstitial.adOpenedListenerRemove();
HMSInterstitial.adLoadedListenerAdd((result) => {
toast('HMSInterstitial adLoaded');
console.log('HMSInterstitial adLoaded, result: ', result);
});
// HMSInterstitial.adLoadedListenerRemove();
HMSInterstitial.adClickedListenerAdd(() => {
toast('HMSInterstitial adClicked');
});
// HMSInterstitial.adClickedListenerRemove();
HMSInterstitial.adImpressionListenerAdd(() => {
toast('HMSInterstitial adImpression');
});
// HMSInterstitial.adImpressionListenerRemove();
return HMSInterstitial.allListenersRemove;
Testing
Run the below command to build the project
Code:
React-native run-android
Upon successful build, run the below command in the android directory of the project to create the signed apk.
Code:
gradlew assembleRelease
Results
Conclusion
Adding Interstitial ads seem very easy. Stay tuned for more ads activity.