This is an article about developing ads for the Google Mobile Ads SDK. It discusses what information is needed for your developer. Then, how that information is used to create tags that specify the ad behavior.
There are different ad formats available, including in-app banners, expandable banners, and full screen ads. Each ad format has its own creative assets and functionality. For example, expandable banners can change size and background color when clicked. The Google Mobile Ads SDK is compatible with MRAID standards.
To use the Google Mobile Ads SDK, you must gather the App ID, ad unit IDs, and ad sizes for your developer.
On this page:
- Find the Google Mobile Ads Application IDs
- Find ad unit IDs and sizes
- Additional JavaScript functions
- MRAID compatibility
Find the Google Mobile Ads Application IDs
- Sign in to Google Ad Manager.
- Click Inventory, then Apps.
- Find the mobile app for which you need the ID, or claim a new mobile app.
- Click
to copy the "App ID" to your clipboard. For example,
ca-app-pub-3940256099942544~3347511713 - Send this information to your developer.
Find ad unit IDs and sizes
- Click Inventory, then Ad units.
- Click the name of the ad unit for which you want to create an ad tag, or create a new ad unit.
- Click Tags.
- Select the tag type "Mobile Application Tag" and click Continue.
- From "Tag results", copy the "Ad unit ID" and "Ad unit sizes". Send this information to your developer.
Additional JavaScript functions
To take advantage of the functionality of the Google Mobile Ads SDK, refer to the developer documentation.
Here are some highlighted functions for modifying the <head> section of the creative.
The SDK exposes the capabilities of the in-app browsers available on iOS and Android. This allows developers to access device capabilities such as the accelerometer, gyroscope and compass via HTML5 where the platform supports them.
App events allow you to execute custom code in your application when a creative dispatches an app event. With app events, you can introduce custom ad executions that interact with the application, such as changing the background color of the app.
If you find that your full screen ad is only taking up part of the screen, insert the following code in the <head> section of the creative:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>.
This template is a banner ad unit that starts off as a bottom screen banner. If a user clicks on the banner, then their default calendar application will create a new event with their consent.
Behavior and UI elements
The creative comprises the following UI elements:
- The banner image and its height and width.
- Information about the event is required such as the summary, description, location, start date and end date.
| Name | Type | Required | Description |
|---|---|---|---|
| Banner image file | File | Yes | Image of the banner ad. |
| Banner image width | Number | Yes | Width of the banner image. |
| Banner image height | Number | Yes | Height of the banner image. |
| Event summary | Text | Yes | Summary of the event. |
| Event description | Text | Yes | Description of the event. |
| Event location | Text | No | Location of the event. |
| Event start date | Text | Yes | The start date of the event. The start date should take the following form: "2016-10-22T00:00-05:00". For example, this is 22nd October 2016 from 0:00 to 05:00. |
| Event end date | Text | Yes | The end date of the event. The end date should take the following form: "2016-10-22T00:00-05:00". For example, this is 22nd October 2016 from 0:00 to 05:00. |
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a href="#" onClick="addToCalendar()"; return false;>
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<script>
// Check whether mraid is ready by adding event listener
function doReadyCheck(){
if(mraid.getState() == 'loading'){
mraid.addEventListener("ready", mraidIsReady);
}else{
showMyAd();
}
}
// Once mraid is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
mraid.removeEventListener("ready", mraidIsReady);
showMyAd();
}
// Only show Ad when mraid is ready
function showMyAd(){
var advertElement = document.getElementById("normal");
advertElement.style.display = 'block';
}
// Add event to the calendar using appropriate input if the device supports calendar manipulation
function addToCalendar(){
// Register the click by creating an image
var x = document.createElement("IMG");
x.setAttribute("src", "%%CLICK_URL_ESC%%");
window.top.document.body.appendChild(x);
if(mraid.getVersion()=="2.0"){
mraid.createCalendarEvent({summary: "[%EventSummary%]", description: "[%EventDescription%]", location: "[%EventLocation%]", start: "[%EventStartDate%]", end: "[%EventEndDate%]"});
}
return false;
}
doReadyCheck();
</script>
</body>
</html>
Test ad unit name: ali_Calendar
This template is a two-component ad unit that starts off as a banner ad at the bottom of the screen. If a user clicks on the banner, then the ad will resize to some specific expanded dimensions. If the user clicks on the ad with the expanded dimensions, they are redirected to the URL defined as the click-through URL.
The width can either be the size of the banner or take up the whole width of the screen (if the value of FullWidthResize is "Yes").
Behavior and UI elements
The creative comprises the following UI elements:
- Creative Assets (for each of these assets, the file, height and width are required)
- Banner Image component
- Resized Banner component
- Close button icon
- Can adjust the position of the close button so that it is either on the top right or top left of the screen.
- Can change the background color of the ad.
| Name | Type | Required | Description |
|---|---|---|---|
| Banner image file | File | Yes | Image that will be displayed in the banner ad. |
| Banner image height | Number | Yes | The height of the banner image. |
| Banner image width | Number | Yes | The width of the banner image. |
| Background color | Text | Yes | The background color of the space occupied by the resized image and of the space occupied by the banner. |
| Click-through URL | URL | Yes | The URL that the user will be redirected to when the resized ad has been clicked on. |
| Resized image file | File | Yes | The image that will be displayed when the banner has been clicked on. |
| Resized image height | Number | Yes | The height of the resized image. |
| Resized image width | Number | Yes | The width of the resized image. |
| Close icon | File | Yes | The image file for the "close" button. |
| Close icon width | Number | Yes | The width of the "close" button. (30 is the average width). |
| Close icon height | Number | Yes | The height of the "close" button. (30 is the average height). |
| Position of close button | List | No | Can position the "close" button so that it is on the top right or top left of the screen. Possible values are "Right" or "Left". If this is left blank, then it will position the close button to the top right of the screen. |
| Full width resize | List | No | Can make the resized ad take up the entire width of the screen if the value is "Yes". If the value is "No", then the width will be the same size as the original banner. Possible values are "Yes" and "No", the default is "No". |
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
<style>
#close_button {
position: absolute;
top: 4px;
right: 4px;
display:block;
}
#resized img {
display : block;
margin : auto;
}
</style>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="resize();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<div id="resized" style="display:none; top:0px;">
<a onClick="openURL()">
<img width="[%ResizedImageWidth%]" height="[%ResizedImageHeight%]" src="[%ResizedImageFile%]"/>
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]"/>
</div>
</div>
<script>
<!--
// Variables
var closeButton = document.getElementById("close_button");
var bodyElement = document.body;
var advertElement = document.getElementById("normal");
var resizedElement = document.getElementById("resized");
var resizeBannerWidth;
function changeBodyElementStyle() {
// Change background color
if ("[%ResizedBackgroundColor%]") {
bodyElement.style.backgroundColor = "[%ResizedBackgroundColor%]";
resizedElement.style.backgroundColor = "[%ResizedBackgroundColor%]";
}
}
function openURL() {
mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}
//Check whether MRAID is ready by adding event listener
function checkIfReady(){
if(mraid.getState() == 'loading'){
mraid.addEventListener("ready", mraidIsReady);
} else{
showMyAd();
}
}
function mraidIsReady(){
mraid.removeEventListener("ready", mraidIsReady);
showMyAd();
}
// Set resizing properties and resize
function resize(){
// If FullWidthResize is "Yes", then the resized advert takes up the whole width. Otherwise takes up the width of the original banner
if ("[%FullWidthResize%]" == "Yes") {
resizeBannerWidth = screen.width;
} else {
resizeBannerWidth = mraid.getDefaultPosition().width;
}
if(mraid.getVersion()=="2.0"){
if ("[%PositionOfCloseButton%]" === "Left") {
closeButton.style.left = "0";
mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-left", "allowOffscreen":false});
} else {
closeButton.style.right = "0";
mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-right", "allowOffscreen":false});
}
mraid.resize();
return false;
}
else{
return true;
}
}
// Displays the advert and add an event listener to it to detect whether to resize
function showMyAd(){
advertElement.style.display = "inline";
mraid.addEventListener("stateChange",updateAd);
}
// updateAd is called when MRAID changes state - calls toggleLayer to expand/ reduce ad size
function updateAd(state){
if (state == "resized"){
toggleLayer('normal', 'resized');
}else if(state == "default"){
toggleLayer('resized', 'normal');
}
}
// Goes to the other state (either resized or banner)
function toggleLayer(fromLayer, toLayer){
var fromLayerElem = document.getElementById(fromLayer);
fromLayerElem.style.display = 'none';
var toLayerElem = document.getElementById(toLayer);
toLayerElem.style.display = 'block';
}
changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>
Test ad unit name: ali_resizeBanner
This template is a two-component ad unit that starts off as a banner ad at the bottom of the screen. If a user clicks on the banner, then the ad will resize to cover the whole screen. If the user clicks on the ad with the expanded dimensions, they are redirected to the URL defined as the click-through URL.
This template uses the default MRAID close button.
Behavior and UI elements
The creative comprises the following UI elements:
- Creative Assets:
- Banner Image component (height and width are also required)
- Expand Banner component
- Can change the background color of the banner ad and the expanded ad
| Name | Type | Required | Description |
|---|---|---|---|
| Banner image file | File | Yes | Image that will be displayed in the banner ad. |
| Banner image height | Number | Yes | The height of the banner image. |
| Banner image width | Number | Yes | The width of the banner image. |
| Background color | Text | Yes | The background color of the space occupied by the banner image. |
| Click-through URL | URL | Yes | The URL that the user will be redirected to when the resized ad has been clicked on. |
| Expanded image file | File | Yes | The image that will be displayed when the banner has been clicked on. |
| Expanded image height | Number | Yes | The height of the expanded image. |
| Expanded image width | Number | Yes | The width of the expanded image. |
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="expand();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<div id="expanded" style="display:none;top:0px;text-align:center">
<a onClick="openURL()">
<img width="[%ExpandedImageWidth%]" height="[%ExpandedImageHeight%]" src="[%ExpandedImageFile%]" />
</a>
</div>
<script>
<!--
function openURL() {
mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}
// Change background color if present
function changeBodyElementStyle() {
if ("[%BackgroundColor%]") {
var bodyElement = document.body;
bodyElement.style.backgroundColor = "[%BackgroundColor%]";
}
}
// Check whether MRAID is ready by adding event listener
function checkIfReady(){
if(mraid.getState() == 'loading'){
mraid.addEventListener("ready", mraidIsReady);
} else{
showMyAd();
}
}
// Once MRAID is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
mraid.removeEventListener("ready", mraidIsReady);
showMyAd();
}
function showMyAd(){
// Displays the advert
var advertElement = document.getElementById("normal");
advertElement.style.display = "inline";
// Add event listener to detect whether to expand or not
mraid.addEventListener("stateChange",updateAd);
// Change background color of the expanded advert
var expandedDiv = document.getElementById("expanded");
if ("[%BackgroundColor%]") {
expandedDiv.style.backgroundColor = "[%BackgroundColor%]";
}
}
function expand() {
if(mraid.getVersion()=="2.0"){
mraid.expand();
return false;
}
else {
return true;
}
}
// updateAd is called when mraid changes state
// Calls toggleLayer to expand/ reduce ad size
function updateAd(state){
if (state == "expanded"){
toggleLayer('normal', 'expanded');
}else if(state == "default"){
toggleLayer('expanded', 'normal');
}
}
// Goes to the other state (either expands or banner)
function toggleLayer(fromLayer, toLayer){
var fromLayerElem = document.getElementById(fromLayer);
fromLayerElem.style.display = 'none';
var toLayerElem = document.getElementById(toLayer);
toLayerElem.style.display = "block";
}
changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>
Test ad unit name: ali_expandDefaultClose
To make an interstitial close after a fixed period of time:
- Include code in the creative to close the interstitial after a fixed period of time has elapsed. The following code can be used as a template for this approach:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
<script>
<!--
function
_admStartCountDown(){setTimeout('admob.opener.close()',parseInt('[%displayTime%]')*1000)}
function
_admOnload(){if(admob.opener.isOverlayShowing()){_admStartCountDown()}else{admob.events.addEventListener('onshow',
_admStartCountDown)}}
if(window.addEventListener){window.addEventListener("load",_admOnload,false)}else{window.attachEvent("onload",_admOnload)}
//-->
</script>
</head>
<body>
[Your_AdCode_Goes_Here]
</body>
</html>
Using admob.opener.openOverlay(), you can open a full screen overlay browser that is animated from the bottom of the screen. This browser does not include a status bar and always displays a close button at the upper-left corner. This option can work nicely for an expandable ad where the full screen creative can be hosted on a separate page.
Below is sample code for a banner where the full screen unit can be loaded into an overlay browser window. You should replace the following placeholder elements with your own values. If available for your network, you can use the sample code to create a creative template.
[BANNER_UNIT]: URL of a banner creative.[WIDTH]: Width of a banner creative.[HEIGHT]: Height of a banner creative.[FULLSCREEN_UNIT]: URL of a full screen creative. Note: Full screen unit should include JavaScript code to parse the destination URL and redirect the user to the landing page upon receiving a click action. See Handling destination URL from a full screen unit for more details.[DESTINATION_URL]: URL of a destination page.[FALLBACK_URL]: Fallback destination URL to use in case JavaScript function doesn't execute.[ORIENTATION]: Supported orientation for destination URL (use "p" for portrait, "l" for landscape, or omit this value to allow any orientation).
Here's a sample creative code:
<!DOCTYPE html>
<head>
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
</head>
<body>
<a href="[FALLBACK_CLICKURL]"
onClick="admob.opener.openOverlay('%%CLICK_URL_ESC%%[FULLSCREEN_UNIT]?destination=[DESTINATION_URL]',
'[ORIENTATION]'); return false;"><img border="0"
src="[BANNER_UNIT]" width="[WIDTH]" height="[HEIGHT]"></a>
</body>
</html>
Handling destination URL from a full screen unit
The admob.opener.openOverlay() function does not have the option to specify the destination URL of the html content.
Assuming that you've passed the destination URL in the form of key-value pair when specifying the fullscreen unit, for example, "https://link.to.fullscreen.unit?destination=https://my.destination.url", you can write a JavaScript function and include a snippet of HTML code to capture the click and redirect the user to the destination page.
Here's a sample page source:
<!DOCTYPE html>
<head>
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
<script type="text/javascript">
function destinationUrl() {
// Get current url after ?
var destinationUrl = window.location.search;
// Strip off the leading '?'
destinationUrl = destinationUrl.substring(1);
// Parse destination=url key-value pair
var kvPair = destinationUrl.split("=");
var key = kvPair[0]; // key: destination
var value = kvPair[1]; // value: url
var url = decodeURIComponent(value);
// Open destination inside overlay
window.location = url;
// Open destination in an external browser
// admob.opener.openUrl(url, true);
}
</script>
</head>
<body>
<div style="position:relative;">
<!-- Load content source into an iframe -->
<iframe src="https://creative.admob.com/t1/bestBuy/tradeinJul/gi/"
align="middle" frameborder=0 width=320 height=480 marginheight=0 marginwidth=0 scrolling=no></iframe>
<!-- Create a clickable area -->
<a href="#" onClick="destinationUrl(); return false;" style="position:absolute; top:0; left:0;
display:inline-block; width:320px; height:480px; z-index:5;"></a>
</div>
</body>
</html>
MRAID compatibility
The Google Mobile Ads SDK supports the IAB's Mobile Rich Media Ad Interface Definitions (MRAID) standard for advertising in mobile apps. You can set a line item as MRAID v1 or MRAID v2 through the line item targeting settings, under Add targeting, and Device capability.
MRAID requirements:
- MRAID v2 requires Google Play services v7.8 or higher for Android and Google Mobile Ads SDK v7.4.0 or higher for iOS.
- MRAID v3 requires Google Play services v15.0.0 or higher for Android and Google Mobile Ads SDK v7.30.0 or higher for iOS.
To use MRAID functions in your ad creatives, you must import mraid.js into your creative. To do this, include <script src="mraid.js"> in your creative. The Google Mobile Ads SDK, as an MRAID-compatible SDK, will look for that code in the creative and replace it with an actual URL pointing to an implementation of MRAID. Other SDKs that support MRAID will do the same though their actual URLs would be different.
You can optionally include the MRAID libraries, as well as the Google Mobile Ads SDK functionality, in the same creative.
mraid.resize() and other similar functions won't have any effect until after the ad is clicked. This prevents a malicious creative from automatically resizing and taking up the entire screen.