How to use Huawei Ads with AdMob mediation (React Native)
Google AdMob is an advertising service created to generate revenue for mobile app developers. Essentially preferred by advertisers with the possibility of mediation creation with different advertising sources and its dominance in the market. Thanks to its compatibility with different ad types and platforms, it’s also preferred by mobile application developers.
In this article, we will learn step by step how to show Huawei Ads Kit ads on React Native using AdMob mediation. Make sure that you have successfully completed the mediation creation on AdMob for Huawei Ads before starting integration.
First of all, we need an SDK to integrate AdMob into our React Native application. AdMob doesn’t provide official support for React Native. Instead of that, we will use open source third-party SDKs for integration. The SDKs we will use will be different according to the ad types we will display.
The SDKs that referenced are the ones for this article. If React-Native has another SDK (official or 3rd party) that supports AdMob, you can also use it.
If you want to display Banner Ad, Interstitial Ad, or Rewarded Ad you can use the following SDK;
react-native-admob
If you want to display Native Ads you can use the following SDK;
react-native-admob-native-ads
Do not forget to link SDKs for installing native dependencies. You can follow how this process is done from here.
If you have successfully completed the SDK integration by following the steps, you can display all AdMob ads you want on your React-Native project. You can use test-IDs for this process.
AdMob Banner Ad
AdMob Interstitial Ad
Admob Rewarded Ad
AdMob Native Ad
After successfully completed the integration steps of React-Native AdMob SDK and make sure that you can display all ad types, you can start the Huawei adapter integration. In order to do this, you need to open the native Android part of your React-Native project in Android Studio or such an application.
The first step is to open your project-level build-gradle file of the Android side of the React-Native project and include the Huawei repository in your project.
After that open your app-level build-gradle and implement Huawei Ads Kit dependency and Huawei mediation adapter.
If you have successfully completed the dependency implementation steps, all you have to do is to display Huawei Ads. For more information regarding Huawei Ads, refer to the official documentation here.
At the beginning of the article, we’ve used AdMob test IDs to show AdMob ads. Now we will display Huawei ads using our mediated Huawei ads IDs instead of AdMob test IDs.
Replace adUnitIDs in code blocks with mediated Huawei IDs. An example of this is in the code blog below.
You can show Huawei ads by changing the adUnitID for all Banner, Interstitial, Rewarded, and Native Ad types.
Summary
In this article, we learned how to use the AdMob-Huawei mediation adapter in React Native applications.
Thank you.
References
Huawei-AdMob mediation creation:
How to use Huawei Ads with Google AdMob mediation:
Huawei mediation adapter:
Huawei Ads Kit React Native:
