Cet article explique comment développer des annonces pour le SDK Google Mobile Ads. Il décrit les informations dont votre développeur a besoin. Ensuite, découvrez comment ces informations sont utilisées pour créer des balises qui spécifient le comportement des annonces.
Différents formats d'annonces sont disponibles, y compris les bannières dans l'application, les bannières extensibles et les annonces en plein écran. Chaque format d'annonce possède ses propres assets de création et fonctionnalités. Par exemple, les bannières extensibles peuvent changer de taille et de couleur d'arrière-plan lorsque l'utilisateur clique dessus. Le SDK Google Mobile Ads est compatible avec les normes MRAID.
Afin d'utiliser le SDK Google Mobile Ads, vous devez obtenir l'ID d'application, les ID de blocs d'annonces et les tailles d'annonces à communiquer au développeur.
Sur cette page :
- Rechercher les ID d'application pour les annonces pour mobile Google
- Rechercher des ID et des tailles de blocs d'annonces
- Fonctions JavaScript supplémentaires
- Compatibilité avec la norme MRAID
Rechercher les ID d'application pour les annonces pour mobile Google
- Connectez-vous à Google Ad Manager.
- Cliquez sur Inventaire, puis sur Applications.
- Recherchez l'application mobile pour laquelle vous avez besoin de l'ID ou ajoutez une application mobile.
- Cliquez sur pour copier l'ID d'application dans le presse-papiers. Exemple :
ca-app-pub-3940256099942544~3347511713
. - Envoyez ces informations au développeur.
Rechercher des ID et des tailles de blocs d'annonces
- Cliquez sur Inventaire, puis sur Blocs d'annonces.
- Cliquez sur le nom du bloc d'annonces pour lequel vous souhaitez créer un tag d'emplacement publicitaire ou créez un bloc d'annonces.
- Cliquez sur Tags.
- Sélectionnez le type de tag "Tag d'application mobile", puis cliquez sur Continuer.
- Sous "Tag généré", copiez les champs "ID du bloc d'annonces" et "Tailles de bloc d'annonces". Envoyez ces informations au développeur.
Fonctions JavaScript supplémentaires
Pour exploiter tout le potentiel du SDK Google Mobile Ads, consultez la documentation destinée aux développeurs.
Voici quelques-unes des fonctions permettant de modifier la section <head>
de la création.
Le SDK exploite les fonctionnalités des navigateurs intégrés aux applications disponibles sur iOS et Android. Cela permet aux développeurs d'accéder via HTML5 aux fonctionnalités des appareils, comme l'accéléromètre, le gyroscope et la boussole, lorsque la plate-forme le permet.
Une fois déclenchés par une création, les événements d'application vous permettent d'exécuter un code personnalisé dans votre application. Vous pouvez vous en servir pour définir des interactions personnalisées entre l'annonce et l'application et, par exemple, changer la couleur d'arrière-plan de celle-ci.
Si votre annonce en plein écran n'occupe qu'une partie de celui-ci, insérez le code suivant dans la section <head>
de la création :
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
Ce modèle est un bloc d'annonces de type bannière qui apparaît comme une bannière en bas de l'écran. Si un internaute clique sur la bannière, une invite de création d'événement s'affiche dans son application d'agenda par défaut.
Comportement et éléments de l'interface utilisateur
La création comprend les éléments d'interface utilisateur suivants :
- L'image de la bannière, ainsi que sa hauteur et sa largeur
- Les informations requises sur l'événement (résumé, description, lieu, date de début et date de fin)
Nom | Type | Obligatoire | Description |
---|---|---|---|
Fichier image de la bannière | Fichier | Oui | Image de la bannière. |
Largeur d'image de la bannière | Nombre | Oui | Largeur de l'image de la bannière. |
Hauteur de l'image de la bannière | Nombre | Oui | Hauteur de l'image de la bannière. |
Résumé de l'événement | Texte | Oui | Résumé de l'événement. |
Description de l'événement | Texte | Oui | Description de l'événement. |
Lieu de l'événement | Texte | Non | Lieu de l'événement. |
Date de début de l'événement | Texte | Oui | La date de début d'un événement doit respecter un certain format. Par exemple, s'il s'agit du 22 octobre 2016 entre 0:00 et 05:00, elle doit être exprimée comme suit : 2016-10-22T00:00-05:00. |
Date de fin de l'événement | Texte | Oui | La date de fin d'un événement doit respecter un certain format. Par exemple, s'il s'agit du 22 octobre 2016 entre 0:00 et 05:00, elle doit être exprimée comme suit : 2016-10-22T00:00-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>
Nom du bloc d'annonces test : ali_Calendar
Ce modèle est un bloc d'annonces à deux composants qui s'affiche initialement comme une bannière en bas de l'écran. Si un internaute clique sur la bannière, l'annonce est ramenée à des dimensions agrandies. Si l'utilisateur clique sur l'annonce aux dimensions agrandies, il est redirigé vers l'URL définie en tant qu'URL de destination.
La largeur peut correspondre à celle de la bannière ou à celle de l'écran (si la valeur de FullWidthResize
est définie sur "Yes").
Comportement et éléments de l'interface utilisateur
La création comprend les éléments d'interface utilisateur suivants :
- Les assets de la création (le fichier, la hauteur et la largeur étant obligatoires pour chacun de ces éléments)
- Le composant "Image de la bannière"
- Le composant "Bannière redimensionnée"
- L'icône de fermeture
- La possibilité de placer l'icône de fermeture en haut à droite ou en haut à gauche de l'écran
- La possibilité de changer la couleur d'arrière-plan de l'annonce
Nom | Type | Obligatoire | Description |
---|---|---|---|
Fichier image de la bannière | Fichier | Oui | Image affichée dans la bannière. |
Hauteur de l'image de la bannière | Nombre | Oui | Hauteur de l'image de la bannière. |
Largeur d'image de la bannière | Nombre | Oui | Largeur de l'image de la bannière. |
Couleur de l'arrière-plan | Texte | Oui | Couleur d'arrière-plan de l'espace occupé par l'image redimensionnée et de celui occupé par la bannière. |
URL de destination | URL | Oui | URL vers laquelle l'internaute est redirigé lorsqu'il clique sur l'annonce redimensionnée. |
Fichier image redimensionné | Fichier | Oui | Image qui s'affiche lorsque l'internaute clique sur la bannière. |
Hauteur d'image redimensionnée | Nombre | Oui | Hauteur de l'image redimensionnée. |
Largeur d'image redimensionnée | Nombre | Oui | Largeur de l'image redimensionnée. |
Icône de fermeture | Fichier | Oui | Fichier image du bouton "Fermer". |
Largeur de l'icône Fermer | Nombre | Oui | Largeur du bouton "Fermer" (valeur moyenne : 30). |
Hauteur de l'icône de fermeture | Nombre | Oui | Hauteur du bouton "Fermer" (valeur moyenne : 30). |
Position de l'icône de fermeture | Liste | Non | Le bouton "Fermer" peut être placé en haut à droite ou en haut à gauche de l'écran. Les valeurs possibles sont "Droite" ou "Gauche". Si ce paramètre est laissé vide, le bouton "Fermer" est placé en haut à droite de l'écran. |
Redimensionner sur toute la largeur | Liste | Non | L'annonce redimensionnée peut occuper toute la largeur de l'écran si la valeur de ce paramètre est définie sur "Yes". Si la valeur "No" est définie, l'annonce présente la même largeur que la bannière d'origine. Les valeurs possibles sont "Yes" et "No" ("No" étant celle définie par défaut). |
<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>
Nom du bloc d'annonces test : ali_resizeBanner
Ce modèle est un bloc d'annonces à deux composants qui s'affiche initialement comme une bannière en bas de l'écran. Si un internaute clique sur la bannière, l'annonce est redimensionnée pour couvrir la totalité de l'écran. Si l'utilisateur clique sur l'annonce aux dimensions agrandies, il est redirigé vers l'URL définie en tant qu'URL de destination.
Ce modèle utilise l'icône de fermeture MRAID par défaut.
Comportement et éléments de l'interface utilisateur
La création comprend les éléments d'interface utilisateur suivants :
- Assets de la création :
- Le composant "Image de la bannière" (la hauteur et la largeur étant également obligatoires)
- Le composant "Bannière expand"
- La possibilité de changer la couleur d'arrière-plan de la bannière et de l'annonce grand format
Nom | Type | Obligatoire | Description |
---|---|---|---|
Fichier image de la bannière | Fichier | Oui | Image affichée dans la bannière. |
Hauteur de l'image de la bannière | Nombre | Oui | Hauteur de l'image de la bannière. |
Largeur d'image de la bannière | Nombre | Oui | Largeur de l'image de la bannière. |
Couleur de l'arrière-plan | Texte | Oui | Couleur d'arrière-plan de l'espace occupé par l'image de la bannière. |
URL de destination | URL | Oui | URL vers laquelle l'internaute est redirigé lorsqu'il clique sur l'annonce redimensionnée. |
Fichier image grand format | Fichier | Oui | Image qui s'affiche lorsque l'internaute clique sur la bannière. |
Hauteur d'image grand format | Nombre | Oui | Hauteur de l'image en grand format. |
Largeur d'image grand format | Nombre | Oui | Largeur de l'image en grand format. |
<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>
Nom du bloc d'annonces test : ali_expandDefaultClose
Pour fermer un interstitiel au bout d'une durée déterminée, procédez comme suit :
- Incluez un code dans la création pour fermer l'interstitiel une fois que la durée souhaitée s'est écoulée. Vous pouvez utiliser le code suivant comme modèle pour cette approche :
<!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>
La fonction admob.opener.openOverlay()
vous permet d'ouvrir un navigateur en superposition et en plein écran, qui est animé à partir du bas de l'écran. Dépourvu de barre d'état, ce navigateur comporte systématiquement un bouton de fermeture en haut à gauche. Cette option convient particulièrement aux annonces expand, la création en plein écran pouvant être hébergé sur une page distincte.
L'exemple de code ci-dessous s'applique à une bannière et permet de charger le bloc en plein écran dans une fenêtre de navigateur en superposition. Veillez à remplacer les espaces réservés par vos valeurs. Vous pouvez vous servir de l'exemple de code pour créer un modèle de création, si cette fonctionnalité est disponible pour votre réseau.
[BANNER_UNIT]
: URL de la bannière.[WIDTH]
: largeur de la bannière.[HEIGHT]
: hauteur de la bannière.[FULLSCREEN_UNIT]
: URL de la création plein écran. Remarque : incluez le code JavaScript approprié dans le bloc en plein écran afin que celui-ci analyse l'URL de destination et redirige l'internaute vers la page de destination après un clic. Pour en savoir plus, consultez la section Gérer l'URL de destination à partir d'un bloc en plein écran.[URL_DESTINATION]
: URL de la page de destination.[FALLBACK_URL]
: URL de destination de remplacement à utiliser si la fonction JavaScript ne s'exécute pas.[ORIENTATION]
: orientation de l'URL de destination. Utilisez la valeur "p" pour portrait ou "l" pour paysage ("landscape" en anglais). N'indiquez aucune valeur si vous souhaitez accepter tous les types d'orientation.
Exemple de code de création :
<!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>
Gérer l'URL de destination à partir d'un bloc en plein écran
La fonction admob.opener.openOverlay()
ne permet pas de définir l'URL de destination du contenu HTML.
En supposant que vous ayez transmis cette URL sous la forme d'une paire clé-valeur lors de la définition du bloc en plein écran (https://link.to.fullscreen.unit?destination=https://my.destination.url
, par exemple), vous pouvez ajouter une fonction JavaScript et inclure un extrait de code HTML pour détecter le clic et rediriger l'internaute vers la page de destination.
Exemple de code 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>
Compatibilité avec la norme MRAID
Le SDK Google Mobile Ads est compatible avec la norme Mobile Rich Media Ad Interface Definitions (MRAID, définitions de l'interface des annonces rich media pour mobile) de l'IAB pour la diffusion d'annonces sur les appareils mobiles. Vous pouvez définir la version 1 ou 2 de MRAID comme élément de campagne dans les paramètres de ciblage de l'élément de campagne en question. Pour ce faire, sélectionnez Ajouter un ciblage, puis Capacité de l'appareil.
Exigences MRAID :
- La version 2 de MRAID exige les services Google Play 7.8 (ou version ultérieure) pour Android et le SDK Google Mobile Ads 7.4.0 (ou version ultérieure) pour iOS.
- La version 3 de MRAID exige les services Google Play 15.0.0 (ou version ultérieure) pour Android et le SDK Google Mobile Ads 7.30.0 (ou version ultérieure) pour iOS.
Pour utiliser les fonctionnalités MRAID dans vos créations, vous devez y importer mraid.js
. Pour ce faire, ajoutez <script src="mraid.js">
dans votre création. Le SDK Google Mobile Ads est compatible avec la norme MRAID. Il va donc rechercher ce code au sein de la création et le remplacer par une URL réelle redirigeant vers une mise en œuvre de cette norme. D'autres SDK compatibles avec la norme MRAID peuvent en faire de même, mais leurs URL réelles seront différentes.
Vous pouvez éventuellement ajouter les bibliothèques MRAID et la fonctionnalité du SDK Google Mobile Ads à une même création.
mraid.resize()
et d'autres fonctions similaires n'ont aucun effet tant que l'internaute ne clique pas sur l'annonce. De cette façon, il est impossible pour une création malveillante d'être redimensionnée automatiquement afin d'occuper tout l'écran.