Using Google AdMob is one of the easiest ways to potentially make money from your app. In this tutorial, you will learn how to integrate AdMob advertisements into your Appery.io Ionic 4 app.

Part 1. Importing Plug-in

Before the plug-in can be used in your app, you need to import it into Appery.io. You can find the plug-in sources by following this GitHub link: Cordova AdMob Free plugin GitHub page.

🚧

Cordova AdMob plug-ins

There are several Cordova plug-ins for AdMob integration that can be found in the Ionic documentation. However, some of them may be chargeable, so please be careful. The plug-in described in this tutorial is a free and ad-free version of the Google AdMob plug-in for Cordova.

Information on how a custom plug-in can be imported into Appery.io can be found here: Custom Cordova Plugins: Importing Cordova plug-ins from GitHub.

After the plug-in is imported, you can proceed with setting up AdMob and creating the app.

Part 2. Setting up AdMob Account

1. Create a new Google AdMob account or use an existing account if you already have one. Navigate to the AdMob console to start.

2. In the left panel, click Apps > ADD YOUR FIRST APP (or Apps > ADD APP if you already have some apps in your account):

3. In the new window, provide the app name and the platform (Android or iOS), and select Yes, the app is listed on a supported app store if your app has been published on Google Play or the App Store. Otherwise, click No, Click CONTINUE:

👍

AdMob for iOS

If you plan to use AdMob for iOS devices, you will need to create another app under your AdMob account.

4. In the next step, name your app and confirm adding it:

5. You will see a message saying that your app has been added to AdMob. You can select to go to the CREATE AD UNIT link or click the DONE button to do the same:

6. Next, create a new ad unit by clicking the ADD AD UNIT button:

7. Select the ad unit type from Banner, Interstitial, Rewarded interstitial, Rewarded, Native Advanced, or App open. You can create an ID for each ad type. For example, let's create a Banner:

8. Next, select a name for the banner and click Create ad unit:

7. As a result, you will be provided with the App ID. The second ID is the Ad Unit ID. We will need both these IDs later:

📘

Note!

All your ad units details can be found under Apps > Ad units:

🚧

Verifying your AdMob account

Please note that production ads will only appear after your AdMob account is verified. Your AdMob account will get verified only after you enter all information about you, including payment information.

Using Sample Ad IDs for Testing

You can use sample ads units for development purposes.
More information about using test ads and the full list of Google provided test ad IDs can be found in this article.

Here are the test IDs that will be used in our tutorial:

🚧

Important!

If you need to show ads in your production app, you will need to create real ad units.

Part 3. Creating App

1. From the Apps tab, click Create new app.

2. Select Ionic 4 > Ionic 4 Blank for the application type, enter adMobApp for the app name, and click Create. You will be navigated to the app's dashboard.

Adding Dependencies

1. Inside the app, navigate to Project > App Settings > Cordova plugins. Here, go to the Imported Cordova Plugins tab and enable the Cordova AdMob Plugin:

2. From the AdMob console, go to Apps > VIEW ALL APPS to find the AdMob App IDs:

3. First, copy the Android AdMob App ID to the clipboard and go back to the Appery.io App Builder. Click the Options button next to the Cordova AdMob Plugin and add a new option with ADMOB_APP_ID as its key and the copied App ID as its value. Then click the Save options button:

4. In order to make the plug-in work on iOS devices, we need to make some changes to the config.xml file. From the AdMob Apps list, copy the iOS AdMob App ID and go back to the Appery.io App Builder.

5. Click Source and unfold the CORDOVA folder. In your config.xml file inside the <platform name="ios"> section, paste the following, replacing YOUR_ADMOB_IOS_APP_ID string with the iOS AdMob App ID:

<config-file target="*-Info.plist" parent="GADIsAdManagerApp">
  <true />
</config-file>

<config-file target="*-Info.plist" parent="GADApplicationIdentifier">
  <string>YOUR_ADMOB_IOS_APP_ID</string>
</config-file>

6. Click the SAVE button at the top.

7. Now, switch to Project > App settings > Npm modules and in the Dependency section, add a new dependency, @ionic-native/admob-free of version ^5.27.0:

8. Unfold the Pages folder and choose the app page.

9. Click the MODULE panel of the app page. In the Imports section, type in import { AdMobFree } from '@ionic-native/admob-free/ngx';

10. Then, scroll down to the NgModule Settings > Providers section and type AdMobFree into the text field:

Don't forget to save the app changes by clicking the SAVE button.

Displaying AdMob Advertisements

Now let's use simple methods to show different types of AdMob ads.

🚧

Important!

In this tutorial, we will be using the sample App IDs for testing purposes provided in this section. But if you need to show ads in your production app, you will need to create real ad units.

1. Switch to the Screen1 page's CODE panel.

2. In the Custom includes section, add a new include, { AdMobFree } with the @ionic-native/admob-free/ngx path.

3. In the Variables section, create a new variable, admob of AdMobFree type. The Add DI box should be checked:

4. Switch to the DESIGN panel and place three Buttons on the screen. Change their Text properties to Show banner, Show interstitial and Show video ads accordingly:

4. Select the first, Show banner, button. Unfold the EVENTS tab from the bottom and create a new Click event for this button with Run TypeScript for the Action and type in the following code and save:

this.admob.banner.config({
  isTesting: true, // change to false in production app
  autoShow: true,
  id: 'ca-app-pub-3940256099942544/6300978111', // replace with your Ad Unit ID in production app
})

this.admob.banner.prepare().catch((err) => alert(err))

📘

Banner Ads

Clicking the first button will display a banner. Banner is a basic ad format that appears at the top or bottom of the device screen. Let's add a banner ad unit.

5. Then select the second, Show interstitial, button. From the EVENTS tab, create a new Click event for this button with Run TypeScript for the Action and type in the following code and save:

this.admob.interstitial.config({
  isTesting: true, // change to false in production app
  autoShow: true,
  id: 'ca-app-pub-3940256099942544/1033173712', // replace with your Ad Unit ID in production app
})

this.admob.interstitial.prepare().catch((err) => alert(err))

📘

Interstitial Ads

Clicking the second button will display an Interstitial Ad. An interstitial ad is a full-page ad appearing at natural breaks and page transitions. It supports showing video content.

5. Finally, select the third, Show video ads, button. From the EVENTS panel, create a new Click event for this button. Select Run TypeScript as its Action and type in the following code:

this.admob.rewardVideo.config({
  isTesting: true, // change to false in production app
  autoShow: true,
  id: 'ca-app-pub-3940256099942544/5224354917', // replace with your Ad Unit ID in production app
})

this.admob.rewardVideo.prepare().catch((err) => alert(err))

📘

Rewarded Video Ads

Clicking the third button will display a Rewarded Video Ads. Rewarded Video Ads reward users for watching short videos and interacting with playable ads and surveys. It also supports video content.

Save all app changes.

🚧

Ad Unit IDs

Make sure you have replaced the sample Ad Unit IDs with the correct Ad Unit IDs for all three buttons in your production app!

App Testing

Congratulations! You are ready to test the app.

Note that to use the AdMob plug-in, you need to run the app on the device. So, first of all, export the app and install it on your device.

Click the buttons one by one to test different ad types:

👍

iOS Certificate Generation

Please note that you will need to generate the iOS certificate with In-App Purchase capability to build an .ipa file.

🚧

Important!

For Android only:

If your application also uses the Push Notification service, please add the OneSignal Cordova plug-in to it. You can learn here how to do it.

Note that there is no need to call it or use any custom code, adding one more Cordova plug-in will suffice.

For JQM apps only:

If you are working with a JQM app, the same OneSignal Cordova plug-in should be added but you will need to call the following code to open the ad:

admob.banner.config({
   isTesting: true, // change to false in production app
   autoShow: true,
   id: 'ca-app-pub-3940256099942544/6300978111', // replace with your *Ad Unit ID* in production app
});

admob.banner.prepare();

Note as well that the code provided above shows test ads only. To display user's production ads please replace the code with the following:

admob.interstitial.config({

   id: '<Put your admob app id here>',

   isTesting: false,

   autoShow: true

});

admob.interstitial.prepare();