Huawei Reward Ads (React Native)
Huawei Ads Kit provides the best solution for Rewarded ads to ease developers work.
Rewarded ads contributes in increasing the traffic and majorly used in mobile Games.
Rewarded ads are full-screen video ads that Users can watch in full-screen in exchange for in-app rewards. This article shows you how to integrate rewarded video ads.
It is funny to see how the world of advertisement has twirled around.
We have rewarded ads for rewards now.
Huawei Ads Kit provides the best solution for Rewarded ads to ease developers work.
Rewarded ads contributes in increasing the traffic and majorly used in mobile Games.
Rewarded ads are full-screen video ads that Users can watch in full-screen in exchange for in-app rewards. This article shows you how to integrate rewarded video ads.
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.
· 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”/>
Sync Gradle and build the project.
Development Process
Client side Development
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.
Note: To create the slot ID’s for your ads, developers can use publisher services. Please check this article to know the process for creating the slot Id’s
If you are using customized Rewarded Ads to target specific audience, difference parameters can be set as below:
How to load the ad?
Check if the ad is completely added prior to call the Show ()
Add listeners to check the different actions
Results
Note: If you are looking for more information to integrate the rewards for the rewarded ads. Please check this guide.
Conclusion
Adding Rewarded ads at client side seem very easy. Stay tuned for more ads activity.
Rewarded ads are full-screen video ads that Users can watch in full-screen in exchange for in-app rewards. This article shows you how to integrate rewarded video ads.
