AdMob Plugin

Integrate with AdMob to monetize and promote your apps & games with ads on Android and iOS.

Monetize

Once you have included V-Play AdMob Plugin you can display ad banners and interstitials from Google advertisers in your apps & games. You then get paid every time your users click on ads in your app.

Upsale

Combine the AdMob Plugin with other plugins like in-app purchases to up-sell users from ad-supported apps to ad-free versions.

Overview

The plugin supports all ad types provided by the Google Mobile Ads SDK. In order to use the AdMob plugin, a new AdMob account is required. If you do not have an AdMob account yet, you can create a new one at http://www.google.com/ads/admob/ or connect AdMob with your Google Account.

Always make sure that your usage of AdMob complies to AdMob's Terms of Service. When you place ads in your apps, always think about the user. You do not want to drive your users away by overwhelming them with ads. Therefore, it is important to find the right balance. Google created a detailed guide which is recommended to read before starting off with AdMob.

Ad Types

To monetize your app, you can use Ad Banners, Ad Interstitials and Rewarded Videos. See the sections below for more details of each of them.

You can combine all of these ad types in your app. In fact, it is recommended to use multiple ad types in different placements of your app to optimize your app monetization.

Ad Banners

Use Ad banners to display ads within your app without distracting your user from the app's main functionality. There are two different types of banners available: AdMobBanner and AdMobNative.

Standard Banner Ads

AdMobBanner is the simplest way to show a distraction-free ad. Just add the QML element AdMobBanner where you would like it to show up in your app. There are five different sizes of banners. For more information please see AdMobBanner::banner.

If you just want to include simple banner ads into your apps, Smart Banners are the best fit. They support all device types and sizes and are easy to use. See Example Usage for a simple example. Smart banners automatically choose their size based on the width of the screen.

AdMob also offers a range of different-sized banners. Please note that some of the available sizes can only be used on tablets due to their dimensions.

Banners get only loaded if the QML Item is visible, meaning that it's visible property is not set to false and all its parent items are visible too.

For more information about ad banners have a look at the AdMobBanner item.

Native Banner Ads

AdMobNative ads are a more flexible way to show ad banners. They can have any size, color and text placement so you can better fit them into your user interface. Native ads need a bit more work to set up than standard banner ads, as they follow templates and can be customized via CSS. However, you can use the default styling for quicker setup.

To create a native ad, open the AdMob Backend first. Then click on "Apps" and "Add App" to create your AdMob app. If you intend to show ads on Android and iOS, create two separate AdMob apps.

After creating your app, click "Add Ad Unit" to create a new ad unit for your game. Usually one ad unit is enough. If you intend to display differently styled ads in various parts of your app, you can create multiple ad units. To show AdMobNative ads, select the Native ad unit as shown in this screenshot:

There are three different template types (small, medium and large) to select from. Each of the template types have different ranges for their size, for example a small ad must have a height of at least dp(80). Make sure that your AdMobNative QML element's width and height are within the ranges shown there, otherwise your ad will not show up.

You do not need to write any CSS on your own, the templates can be used as they are and their styling can be customized in the backend. In the template editor, you can choose various colors for the template and preview it for specific sizes.

Like standard banners, native ads also only get loaded if the QML item is visible, meaning that it's visible property is not set to false and all its parent items are visible too.

For more information about native ads have a look at the AdMobNative item.

Interstitials

Interstitials are full-screen ads with interactive content that can be presented to the user e.g. when a level of a game was completed or when you your user navigates between two pages. Their key advantage is they do not take away precious screen space while the app is running.

For more information about interstitials have a look at the AdMobInterstitial item.

Rewarded Videos

Rewarded videos are skippable full-screen videos shown to the user. You can reward the user for watching a full video until the end, e.g. with in-game currency or credits. Rewarded videos are used like interstitials: they can be shown at any point in time while the appis running and mostly when navigating between pages.

For more information about rewarded videos have a look at the AdMobRewardedVideo item.

AdMob Examples

Plugin Demo App

To try the plugin or see an integration example have a look at the V-Play Plugin Demo app.

Please also have a look at our plugin example project on GitHub: https://github.com/V-Play/PluginDemo.

Example Usage

The AdMobBanner item can be used like any other QML item. Here is a simple example of how to add a SmartBanner at the top of your app with the help of anchoring:

 import VPlayPlugins 1.0

 AdMobBanner {
   adUnitId: "ca-app-pub-3940256099942544/6300978111" // banner test ad by AdMob
   testDeviceIds: [ "<a testdevice id>" ]
   banner: AdMobBanner.Smart

   anchors.horizontalCenter: parent.horizontalCenter
   anchors.top: parent.top
 }

AdMobNative works almost exactly like AdMobBanner. The difference is that it can have any size as long as it is within the constraints of the template selected in the AdMob backend. Another benefit is that it follows position changes of the QML item. AdMobNative is a newer type and also requires you to state the AdMobNative::appId of your AdMob app generated from the AdMob backend.

 import VPlayPlugins 1.0

 AdMobNative {
   appId:    "ca-app-pub-3940256099942544/2793859312" // native test ad by AdMob
   adUnitId: "<your-adunit-id>"
   testDeviceIds: [ "<a testdevice id>" ]

   x: dp(50)
   width: parent.width - x //from x until right edge
   height: dp(80) //minimum height of small native ad template
 }

To show an interstitial ad you can use the following code snippet, which shows the ad after a call to loadInterstitial():

 import VPlayPlugins 1.0

 AdMobInterstitial {
   adUnitId: "ca-app-pub-3940256099942544/1033173712" // interstitial test ad by AdMob
   testDeviceIds: [ "<your-test-device-id>" ]

   onInterstitialReceived: {
     showInterstitialIfLoaded()
   }
 }

The same usage applies for rewarded videos, which can be loaded with loadRewardedVideo():

 import VPlayPlugins 1.0

 AdMobRewardedVideo {
   adUnitId: "ca-app-pub-3940256099942544/5224354917" // rewarded video test ad by AdMob
   testDeviceIds: [ "<your-test-device-id>" ]

   onRewardedVideoReceived: {
     showRewardedVideoIfLoaded()
   }
 }

Rewarded Video with Virtual Currency Example

Here is an example how you can reward the user with virtual currency after he watched a rewarded video ad:

 import VPlay 2.0
 import VPlayPlugins 1.0
 import QtQuick 2.0

 Item {

   // start currency
   property int currency: 20

   AdMobRewardedVideo {
     id: myRewardedVideo

     // test ad for rewarded videos
     // create your own from the AdMob Backend
     adUnitId: "ca-app-pub-3940256099942544/5224354917"

     onRewardedVideoRewarded: {
       currency += 10
     }

     // load interstitial at app start to cache it
     Component.onCompleted: {
       loadRewardedVideo()
     }

   }

   ButtonVPlay {
     text: "Simulate Level Completed"
     onClicked: {
       // each level "costs" 1 currency
       currency--

       if(currency < 10) {
         // show the new video if user is below 10 credits
         myRewardedVideo.showRewardedVideoIfLoaded()

         // load a new video every time it got shown, to give the user a fresh ad
         myRewardedVideo.loadRewardedVideo()
       }
     }
   }

   ButtonVPlay {
     text: "Simulate In-app purchase 1000 Credits"
     onClicked: currency += 1000
   }

 }

With this example code, you can motivate users to watch an ad because they get something for it. Those users who do not want to watch an ad, can also purchase a virtual currency with the above code example. By only showing the ad if the user is below a certain virtual currency threshold, you guarantee users who bought a virtual currency pack do not see the ad.

Hint: We have this mechanism in place in the popular One Card game - you can use its full source code and copy it to your app. This also includes a real in-app purchase implementation with our free in-app purchase plugin.

Rewarded ads are the preferred way to use mobile ads these days, so we highly recommend to use this feature in your apps. The perfect time to show a rewarded ad is when a user navigates between pages of your app. For example after he finished a game or after he had a success moment like completing a level. You could motivate the user even more to watch an ad by giving extra benefits after such a success moment. This helps you to earn money, while on the other hand giving a benefit to the user - a win-win situation.

Note: If possible, add your devices' device ids to AdMobBanner::testDeviceIds, AdMobInterstitial::testDeviceIds, AdMobNative::testDeviceIds or AdMobRewardedVideo::testDeviceIds during testing your app.

Available QML Items

AdMobBanner

AdMobRewardedVideo item allows monetizing your app with banner ads on Android and iOS

AdMobInterstitial

Item allows monetizing your app with fullscreen interstitial ads on Android and iOS

AdMobNative

Item allows monetizing your app with native banner ads on Android and iOS

AdMobRewardedVideo

Item allows monetizing your app with rewarded video ads on Android and iOS

Adding and Activating Plugins

How to Add a V-Play Plugin to your App or Game

When you create a new project, you can choose the Plugin Application template to get your own version of the V-Play Plugin Demo with the plugins you want to include. Open Qt Creator and choose “File / New File or Project”, then select Plugin Application in the V-Play Apps section or Game with Plugins in the V-Play Games section to start the project wizard.

Then select the platforms you want to run your application on. The plugins are available for both iOS & Android. There is a fallback functionality in place on Desktop platforms so your project still works when you call methods of the plugins. This allows you to do the main development on your PC, and for testing the plugin functionality you can run the project on iOS and Android.

After the Kit Selection, you can choose which of the plugins you’d like to add to your project:

Then complete the wizard, your project is now set up with all the correct plugin dependencies for Android & iOS automatically. This includes:

  • Setting up the .gradle file for Android.
  • Setting up the .plist file for iOS.
  • Setting up the .pro file to include the plugin libraries for iOS.

Note: Additional integration steps are still required for most plugins, for example to add the actual plugin libraries for iOS to your project. Please have a look at the integration steps described in the documentation for each of the used plugins.

If you have an existing V-Play application, follow these steps to include a plugin to your app or game:

In Qt Creator, select “File / New File or Project” and choose either V-Play Games or V-Play Apps from Files and Classes. Then select V-Play Plugin and press Choose.

You can now select the plugin you want to add:

The plugin item, which contains the chosen plugin and a short usage example, is now added to your project. To use the item in your project, simply perform these steps:

  • Include the created item (use the name you entered in the template before) in your main.qml file.
  • Modify the .pro file & .plist file for iOS usage. See the iOS integration guide of the chosen plugin for more information.
  • Modify the the .gradle file for Android usage. See the Android integration guide of the chosen plugin for more information.

Note: If you have an existing Qt application, you can also add V-Play Plugins to your app! See here how to do this.

Activating Plugins with a License Key

You can test all plugins as soon as the required integration steps and plugin configuration are completed.

However, the plugins are only available as Trial Versions if they are not activated with a valid license. When you are using unlicensed plugins, a dialog is shown and a watermark overlays your application to notify you about the testing state of the plugin.

All monetization plugins are free to use in all licenses, other plugins are only fully usable if you have purchased the Indie or Enterprise license. To activate plugins and enable their full functionality it is required to create a license key. You can create such a key for your application using the license creation page.

This is how it works:

  • Choose the plugins you want to include in your license key:

  • Click on “Generate License Key” and set the app identifier & version code of your application. You can see that the AdMob plugin was enabled in this license key:

  • Copy the generated licenseKey to your GameWindow or App component.

  • You can now fully use the selected plugins!

Integration

To use the AdMob plugin you need to add the platform-specific native libraries to your project, described here:

iOS Integration Steps

  1. Download our PluginDemo from https://github.com/v-play/PluginDemo/archive/master.zip and unzip it.
  2. Copy GoogleMobileAds.framework from the ios subfolder to a sub-folder called ios within your project directory.
  3. Add the following lines of code to your .pro file:
     ios {
       VPLAY_PLUGINS += admob
     }
  4. Add the following entries to your Project-Info.plist file in the ios subfolder of your project right before the </dict></plist> closing tags:
     <key>NSAppTransportSecurity</key>
     <dict>
         <key>NSAllowsArbitraryLoads</key>
         <true/>
         <key>NSAllowsArbitraryLoadsForMedia</key>
         <true/>
         <key>NSAllowsArbitraryLoadsInWebContent</key>
         <true/>
     </dict>

    This ensures that the delivery of ads is not affected by the App Transport Security feature introduced with iOS 9, as described here.

Android Integration Steps

  1. Open your build.gradle file and add the following lines to the dependencies block:
     dependencies {
       compile 'net.vplay.plugins:plugin-admob:2.+'
     }

    Note: If you did not create your project from any of our latest wizards, make sure that your project uses the Gradle Build System like described here.

Used AdMob SDK Versions

iOS Google Mobile Ads SDK 7.16.0
Android Google Play Services 11.8.0

Note: Other SDK versions higher than the stated ones might also be working but are not actively tested as of now.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support