Are you looking to monetize your mobile app and reach a wider audience? Swift app development is all about creating innovative and engaging experiences for users. One effective way to do this is by integrating Google Ads into your Apache Cordova mobile apps using AdMobPro plugin.

Getting Started with AdMob Portal Setup

To begin, sign up for an AdMob account and create a new app. Click on "Monetize a new app" and select the "Add Your App Manually" option. You can refer to the provided screenshot for more details. There are two types of ad formats available: banner and interstitial (pop-up) ads. Select the one that best suits your needs, name it, and submit the required information.

Creating New Ad Units

Next, create a new ad unit by following these steps:

  1. Log in to your AdMob account.
  2. Click on "Create new ad unit" and choose the desired ad format (banner or interstitial).
  3. Fill in the unit name and set the number of times you want the pop-up ad to be shown per minute.

Cordova Plugin Implementation

Now that we have our AdMob setup, let's move on to implementing the Cordova plugin. We'll use the Cordova-plugin-admobpro, which enables displaying mobile ads with a single line of JavaScript code. The plugin also provides APIs for creating, removing, showing, hiding, and positioning ads.

Steps to Integrate Google Ads in Your Cordova App

To integrate AdMob into your Cordova app:

  1. Navigate to the root folder of your application.
  2. Execute the command: cordova plugin add cordova-plugin-admobpro
  3. Create a new JavaScript file called admob.js and add the ad unit IDs for your banner and interstitial ads, as provided in the AdMob portal.
  4. Refer to the provided JavaScript code to initialize the Ad unit for each platform.

Initializing Ad Units with Cordova Plugin

The admob.js file contains the necessary code to initialize the Ad units for Android, iOS, and Windows Phone platforms. Here's an example:

`javascript

var admobid = {};

if(/(android)/i.test(navigator.userAgent)) {

admobid = {

banner: 'ca-app-pub-xxxxx/xxxxx',

interstitial: 'ca-app-pub-xxxxxx/xxxxxx'

};

} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {

admobid = {

banner: 'ca-app-pub-xxxxxxx/xxxxxxx',

interstitial: 'ca-app-pub-xxxxxxx/xxxxxxxx'

};

} else {

admobid = {

banner: 'ca-app-pub-xxxxxxx/xxxxxxx',

interstitial: 'ca-app-pub-xxxxxxx/xxxxxxxx'

};

}

// Code for pop-up ads

if(AdMob) AdMob.createBanner({

adId: admobid.banner,

position: AdMob.AD_POSITION.BOTTOM_CENTER,

autoShow: true

});

`

This code will display a banner ad at the bottom of the mobile screen and also provides different methods for banner ads and APIs.

Tips and Tricks

To remove or hide ads from other pages, use Admob.removeBanner or Admob.hideBanner. After implementing this, you'll see banner ads at the bottom of the screen and pop-up ads. Refer to the provided screenshot for more details.

Conclusion

In this article, we explored how to integrate Google Ads into your Apache Cordova mobile apps using AdMobPro plugin. By following these steps, you can monetize your app and reach a wider audience. Remember to keep your AdMob setup and Cordova plugin implementation separate to ensure seamless integration.