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 10.0.1

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
Sign up for Free and start developing right away!
I want to make Games
I want to make Apps
Game Development
Cross-Platform, Any Resolution

Use one IDE to deploy to all supported platforms, including iOS and Android, from a single code base.

Support all screen resolutions, aspect ratios and sizes with auto-adapting UI elements, smart scene scaling and memory efficient asset selection.

Learn More

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Multiplayer

V-Play Multiplayer supports both real-time and turn-based gameplay, so you can use it to make many different types of cross-platform multiplayer games. It's perfect for making player-vs-player games like 'Words with Friends' or games for a large amount of players, such as 'Clash of Clans'.

Learn More Video

Highscores & Achievements

The V-Play Game Network is a cross-platform gaming service that allows players around the world to compare game highscores and achievements. Players can also challenge each other across multiple platforms and share their progress on Facebook.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code.

import QtQuick 2.0
import VPlay 2.0

GameWindow {
  Scene {
    
    SimpleButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Level Editor

The LevelEditor can be used during development to create and modify levels for your game, which you can then bundle in your final publishing build. Additionally, you can also integrate the in-game level editor to your published game and let your gamers create new levels.

Learn More Video

Card Game like UNO, Hearthstone or Poker

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/OneCard/OneCard.pro

Match-3 like Candy Crush Saga

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquash/JuicySquash.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquashAdvanced/JuicySquashAdvanced.pro

Puzzle like 2048 or Threes!

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/2048/2048.pro

Casino like Big Win Slots

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlaskOfRum/FlaskOfRum.pro

Side Scroller like Jetpack Joyride or Flappy Bird

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlappyBird/FlappyBird.pro

Tower Defense like Castle Defense or Bloons TD

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Squaby/Squaby.pro

Falldown & Jump like Doodle Jump or Mega Jump

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak/ChickenOutbreak.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak2/ChickenOutbreak2.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/DoodleJump/DoodleJump.pro

Platformer like Super Mario or Lep's World

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Platformer/Platformer.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Action like Angry Birds, Fruit Ninja, Cut the Rope

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/BalloonPop/BalloonPop.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/CarChallenge/CarChallenge.pro

Arcade like Arkanoid or Space Invaders

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ZombieBreak/ZombieBreak.pro

Community like Super Mario Maker or Minecraft

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/examples/Squaby/Squaby.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Any other Idea? let us know how we can help you

You are looking for another demo?

The V-Play SDK includes many open-source demos for different game genres. You can use their source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

If you do not find your game genre in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us

App Development
Better Apps, Less Effort

Develop feature-rich, cross-platform mobile apps from a single code base.

V-Play apps look, feel and perform exactly like native iOS, Android and Desktop apps. With less code & much faster development time.

Learn More Highlights Video

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Save Time, Code & Money

Save up to 90% source code with V-Play, compared to frameworks like Xamarin, Titanium, React Native and others.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code. QML also allows you to easily create smooth and complex animations.

import QtQuick 2.0
import VPlayApps 2.0

App {
  Page {
    
    AppButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Native Sensors & More

V-Play Apps harness the power of Qt, the leading cross-platform development framework used by over 1,000,000 developers.

This gives your access to native device features like sensors, camera, file system as well as multimedia, networking, localization and much more.

Learn More

Responsive Design

V-Play has built in responsive design capabilities, you can target phones and tablets with the same source code.

Learn More

Highly Extensible

You have existing JavaScript, C++ or native code? You want to add any 3rd party SDK that we do not offer already?

No worries, you can add any JS, C++, Java or Objective-C code to your project.

Learn More

Component Showcase App shows the most important V-Play features and components

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/showcase/Showcase.pro

Qt World Summit Conference App a full-featured conference management app made by V-Play

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/qtws2016/QtWS2016.pro

Twitter App how to build layouts like in the official Twitter app for iOS and Android

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/twitter/Twitter.pro

Maps App displays free bikes or boxes at bike stations for Vienna's bike sharing service Citybike Wien

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/maps/Maps.pro

Messaging App demonstrates how to create the UI of a Facebook Messenger like app

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/messaging/Messaging.pro

Weather App how to include powerful animations into your user interface

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/waether/Weather.pro

Any other Idea? let us know how we can help you

You are looking for another app demo?

The V-Play SDK includes many open-source demos for different app types. You can use their source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play..

If you do not find your app type in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us