Développer des annonces pour le SDK Google Mobile Ads

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.

Tout développer Tout réduire

Accès aux fonctionnalités des appareils

Événements d'application

Affichage de l'image en plein écran

Exemple de code pour un navigateur intégré à l'application : fonctionnalité d'ajout à l'agenda pour mobile avec la version 2.0 de MRAID

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

Exemple de code permettant de fermer automatiquement un interstitiel

Fenêtre cible : fenêtre en superposition intégrée à l'application

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.

La méthode 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.

En savoir plus sur la compatibilité avec MRAID pour Android ou iOS

Choisissez la section sur laquelle vous souhaitez donner votre avis

Ces informations vous-ont elles été utiles ?

Comment pouvons-nous l'améliorer ?

Développer des annonces pour le SDK Google Mobile Ads

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

Comportement et éléments de l'interface utilisateur

Comportement et éléments de l'interface utilisateur

Comportement et éléments de l'interface utilisateur

Gérer l'URL de destination à partir d'un bloc en plein écran

Compatibilité avec la norme MRAID

Ces informations vous-ont elles été utiles ?

Vous avez encore besoin d'aide ?

Essayez les solutions ci-dessous :

Quel est le problème avec cette sélection ?

Ajoutez des informations supplémentaires ou des suggestions