> 🚧 Important Note! > > The option of creating new apps with the[**jQuery Mobile**](https://docs.appery.io/docs/appbuilder-jqm-overview) framework was removed but we still support the projects that were created with it earlier. Using [Google AdMob](https://admob.google.com/home/) 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](https://appery.io/) JQM app. > 📘 Ionic Google AdMob Plus plug-in Tutorial > > Please check out our [Ionic Google AdMob Plus plug-in tutorial](https://docs.appery.io/docs/ionic-5-google-admob-plug-in-tutorial) where we demonstrate how you can you will learn how to integrate AdMob advertisements into your Appery.io Ionic app. # Part 1. Importing Plug-in Before the plug-in can be used in your app, you need to import it into [Appery.io](https://appery.io/). You can find the plug-in sources by following this GitHub link: [Cordova AdMob Free plugin GitHub page](https://github.com/apperyio/cordova-plugin-admob-free). > 🚧 Cordova AdMob plug-ins > > There are several Cordova plug-ins for AdMob integration that can be found. 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](https://appery.io/) can be found here: [Custom Cordova Plugins: Importing Cordova plug-ins from GitHub](/docs/cordova-custom-plugins#section-importing-cordova-plugins-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](https://apps.admob.com/signup/) or use an existing account if you already have one. Navigate to the [AdMob console](https://apps.admob.com/v2/home) 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): ![](https://files.readme.io/6e2c2f9-Screen_Shot_2020-08-05_at_7.31.06_PM.png "Screen Shot 2020-08-05 at 7.31.06 PM.png") 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](https://play.google.com/)* or the *[App Store](https://www.apple.com/app-store/)*. Otherwise, click **No**, Click **CONTINUE**: ![](https://files.readme.io/fcb2149-Screenshot_4.png "Screenshot_4.png") > 👍 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: ![](https://files.readme.io/db9533d-Screenshot_1.png "Screenshot_1.png") 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 below **DONE** button to do the same: ![](https://files.readme.io/276b8ba-Screenshot_2.png "Screenshot_2.png") 6. Next, create a new ad unit by clicking the **ADD AD UNIT** button: ![](https://files.readme.io/4e87b05-Screenshot_3.png "Screenshot_3.png") 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***: ![](https://files.readme.io/7d9da02-Screenshot_5.png "Screenshot_5.png") 8. Next, select a name for the banner and click **Create ad unit**: ![](https://files.readme.io/a8ea305-Screenshot_6.png "Screenshot_6.png") 9. 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: {1596}

1 - App ID, 2 - Ad Unit ID > 📘 Note! > > Your app ad units details can be found under **Apps > APP\_NAME > Ad units**: ![](https://files.readme.io/a527351-Screenshot_8.png "Screenshot_8.png") > 🚧 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](https://developers.google.com/admob/android/test-ads). Here are the test IDs that will be used in our tutorial: | Ad format | Sample ad unit ID | | :------------- | :------------------------------------- | | Banner | ca-app-pub-3940256099942544/6300978111 | | Interstitial | ca-app-pub-3940256099942544/1033173712 | | Rewarded Video | ca-app-pub-3940256099942544/5224354917 | > 🚧 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](https://appery.io/)** tab, click **Create new app**. 2. Select ***IjQuery Mobile > Blank*** for the application type, enter ***adMobApp*** for the app name, and click **Create**. You will be navigated to the app's dashboard: ![](https://files.readme.io/1410933-09-05_18.40..png "09-05 18.40..png") ## 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***: ![](https://files.readme.io/417c6b1-Screenshot_17.png "Screenshot_17.png") 2. From the AdMob console, go to [Apps > VIEW ALL APPS](https://apps.admob.com/v2/apps/list) to find the AdMob App IDs: ![](https://files.readme.io/993a38c-Screenshot_19.png "Screenshot_19.png") 3. First, copy the **Android** AdMob App ID to the clipboard and go back to the Appery.io **[App Builder](https://docs.appery.io/docs/apperyio-visual-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: ![](https://files.readme.io/a007c97-Screenshot_18.png "Screenshot_18.png") 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](https://apps.admob.com/v2/apps/list), copy the **iOS** AdMob App ID and go back to the Appery.io **[App Builder](https://docs.appery.io/docs/apperyio-visual-builder)**. > 🚧 AdMob for iOS > > If you plan to use AdMob for iOS devices, you will need to create a new app under your AdMob account first just like you did for Android in [part 2](https://docs.appery.io/docs/jqm-google-admob-plug-in-tutorial#part-2-setting-up-admob-account) of this tutorial. 5. Click **Source** and unfold the **CORDOVA** folder. In your `config.xml` file inside the `` section, paste the following, replacing `YOUR_ADMOB_IOS_APP_ID` string with the iOS AdMob App ID: ```xml YOUR_ADMOB_IOS_APP_ID ``` {1491}

Editing config.xml file 6. Don't forget to save the app changes by clicking the [**SAVE**](https://docs.appery.io/docs/apperyio-visual-builder#toolbar) 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 ](https://docs.appery.io/docs/jqm-google-admob-plug-in-tutorial#using-sample-ad-ids-for-testing) section. But if you need to show ads in your production app, you will need to create real ad units. 1. In the app, go to **Project > Pages > startScreen** and open the **DESIGN** panel. 2. Drag & drop three **[Buttons](https://docs.appery.io/docs/appbulder-jqm-ui-components#button)** to the screen. 3. Change their **Text** properties to ***Show Banner***, ***Show Interstitial*** and ***Show Video ads*** accordingly: ![](https://files.readme.io/9d25922-Screenshot_21.png "Screenshot_21.png") 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** , type in the following code and save: ```typescript 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(); ``` ![](https://files.readme.io/eac7c65-Screenshot_23.png "Screenshot_23.png") > 📘 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**, type in the following code, and save: ```typescript 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 }); admob.interstitial.prepare(); ``` > 📘 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** tab, create a new **Click** event for this button. Select **Run TypeScript** as its **Action** and type in the following code: ```typescript 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 }); admob.rewardvideo.prepare(); ``` > 📘 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. > 👍 Important! > > In this tutorial, we will be using the sample App IDs for testing purposes provided in [Part 2](https://docs.appery.io/docs/jqm-google-admob-plug-in-tutorial#using-sample-ad-ids-for-testing) section. But if you need to show ads in your production app, you will need to create real ad units. Click the buttons one by one to test different ad types: {1613}

App work on Android > 👍 iOS Certificate Generation > > Please note that you will need to generate the [iOS certificate](https://docs.appery.io/docs/appexport-ios#generating-ios-certificates) with [In-App Purchase capability](https://developer.apple.com/in-app-purchase/) 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](https://github.com/OneSignal/OneSignal-Cordova-SDK)** to it. You can learn [here](https://docs.appery.io/docs/using-in-a-ionic-5-app#adding-3rd-party-cordova-plug-ins) 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](https://github.com/OneSignal/OneSignal-Cordova-SDK)** 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: '', > > isTesting: false, > > autoShow: true > > }); > > admob.interstitial.prepare(); > ```