WORD RIDDLE GAME FEATURING HUAWEI ADS KIT (Interstitial and Banner Ads) Part 2

INTRODUCTION

In the previous article, i.e. WORD RIDDLE GAME FEATURING HUAWEI ACCOUNT KIT AND IN-APP MESSAGE (Part 1), we tried to integrate an account kit for the users to log in in-app messaging to the showing information. So in this article, we are going to write a brief procedure on how we integrate the Huawei Ads kit in this mini-game.

We had decided to integrate banner ads and interstitial ads into this app. According to the Huawei Ads kit documents, banner ads are rectangular images that occupy a small area of the screen. When the user clicks the ad, the user is redirected to the advertiser’s page. While for interstitial ads, it is a full screen few seconds video that is displayed when users click a specific button. We decided to put the banner ads at the bottom of the screen and interstitial ads after the user had completed the challenge.

*The step of integrating the HMS Core SDK will be skipped as it could be done according to the documents.

INTEGRATION

The Layout for Banner Ads

First, in the layout part, we have to clear some spaces to put the banner ads. Hence, we prepared a rectangular empty space at the bottom of the screen using the Frame Layout. Then, we add the BannerView inside the FrameLayout along with the banner size and the ads id.

Then, in the activity class, the ad is loaded in the bannerView of the Frame Layout using the code below that is provided from the documents:

we adjusted the banner size to smart so that it can fit on different sizes of the screen. For more information about Banner Ads, please refer to Banner Ads document.

Our final product looks like this:

Interstitial Ads

Then, for the interstitial ad, we decided to just insert in the part where after the user completes the challenge as we do not hope to disrupt the user’s experience for too much.

Interstitial ads do not need to set up any layout as it is a full-screen video. Hence, in the onClick method, we will direct the button to the loadAd() method.

Then, we added the event listener AdListener for the object to show the event of the ads such as the ad is now playing or the ads failed to be loaded due to some error. In this AdListener, onAdLoaded() method will be the most important to be implemented as it will call showInterstitial() method that will show the ads or start the next activity.

For more information about Interstitial Ads, the Ads kit documents are provided here.

Finally, after struggling with the codes, our final product looks like this:

Finally!!! our mini-game, Word Riddle is done in integrating ads kit for banner ads and interstitial ads. Not only the ads kit, account kit, and in-app are also successfully integrated mentioned in the part 1. At the end of this article, me and my partner would like to express our sincere gratitude and appreciation towards Sir Sanghati for guide us throughout the process of learning and integrating these kits. Last but not least, thank you for sparing a little bit of your time to read this article. Have a great day~

A beginner programmer