Sviluppare annunci per l'SDK Google Mobile Ads

Questo articolo riguarda lo sviluppo di annunci per l'SDK Google Mobile Ads. Spiega quali informazioni sono necessarie allo sviluppatore e come vengono utilizzate per creare tag che specificano il comportamento dell'annuncio.

Sono disponibili diversi formati di annunci, tra cui banner in-app, banner espandibili e annunci a schermo intero. Ogni formato dell'annuncio ha proprie funzionalità e propri asset delle creatività. Ad esempio, i banner espandibili possono cambiare le dimensioni e il colore dello sfondo quando vengono selezionati. L'SDK Google Mobile Ads è compatibile con gli standard MRAID.

Per utilizzare l'SDK Google Mobile Ads, devi procurarti l'ID app, gli ID unità pubblicitaria e le dimensioni dell'annuncio per il tuo sviluppatore.

In questa pagina:

Trovare gli ID applicazione di Google Mobile Ads
Trovare le dimensioni e gli ID unità pubblicitarie
Altre funzioni JavaScript
Compatibilità con MRAID

Trovare gli ID applicazione di Google Mobile Ads

Accedi a Google Ad Manager.
Fai clic su Inventario, quindi su App.
Trova l'app mobile per cui ti serve l'ID o richiedi una nuova app mobile.
Fai clic su per copiare "l'ID app" negli appunti. Ad esempio, ca-app-pub-3940256099942544~3347511713
Invia queste informazioni allo sviluppatore.

Trovare le dimensioni e gli ID unità pubblicitarie

Fai clic su Inventario, quindi su Unità pubblicitarie.
Fai clic sul nome dell'unità pubblicitaria per cui vuoi creare un tag annuncio oppure creane una nuova.
Fai clic su Tag.
Seleziona il tipo di tag "Tag applicazione mobile" e fai clic su Continua.
Nella sezione "Risultati tag", copia "l'ID unità pubblicitaria" e le "dimensioni unità pubblicitaria". Invia queste informazioni allo sviluppatore.

Altre funzioni JavaScript

Per sfruttare le funzionalità dell'SDK Google Mobile Ads, consulta la documentazione per gli sviluppatori.

Di seguito sono riportate alcune funzioni importanti per modificare la sezione <head> della creatività.

Espandi tutto Comprimi tutto

Accedere alle funzionalità del dispositivo

Eventi app

Ridimensionare l'immagine a schermo intero

Codice di esempio per in-app: click-to-calendar per dispositivi mobili utilizzando MRAID v2.0

Questo modello è un annuncio banner che inizia come tale nella parte inferiore dello schermo. Se un utente fa clic sul banner, l'applicazione calendario predefinita crea un nuovo evento dietro suo consenso.

Comportamento ed elementi dell'interfaccia utente

La creatività è costituita dai seguenti elementi dell'interfaccia utente:

L'immagine del banner e la rispettiva altezza e larghezza.
Le informazioni sull'evento, come riepilogo, descrizioni, luogo, data di inizio e fine, sono obbligatorie.

Nome	Tipo	Obbligatorio	Descrizione
File immagine del banner	File	Sì	Immagine dell'annuncio banner.
Larghezza immagine del banner	Numero	Sì	Larghezza dell'immagine del banner.
Altezza immagine del banner	Numero	Sì	Altezza dell'immagine del banner.
Riepilogo evento	Testo	Sì	Riepilogo dell'evento.
Descrizione evento	Testo	Sì	Descrizione dell'evento.
Luogo evento	Testo	No	Luogo dell'evento.
Data di inizio evento	Testo	Sì	Data di inizio dell'evento. La data di inizio deve avere il seguente formato: "2016-10-22T00:00-05:00", che, a titolo esemplificativo, corrisponde al 22 ottobre 2016 dalle 00:00 alle 05:00.
Data di fine evento	Testo	Sì	Data di fine dell'evento. La data di fine deve avere il seguente formato: "2016-10-22T00:00-05:00", che, a titolo esemplificativo, corrisponde al 22 ottobre 2016 dalle 00:00 alle 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>

Nome dell'unità pubblicitaria di test: ali_Calendar

Questo modello è un'unità pubblicitaria a due componenti che inizia come annuncio banner nella parte inferiore dello schermo. Se un utente fa clic sul banner, l'annuncio si ridimensiona in base a dimensioni espanse specifiche. Se l'utente fa clic sull'annuncio con dimensioni espanse, viene reindirizzato all'URL di clickthrough definito.

La larghezza può corrispondere alle dimensioni del banner o alla larghezza dell'intero schermo (se il valore di FullWidthResize è "Yes").

Comportamento ed elementi dell'interfaccia utente

La creatività è costituita dai seguenti elementi dell'interfaccia utente:

Asset della creatività (per ciascun asset è obbligatorio inserire file, altezza e larghezza)
- Componente Immagine del banner
- Componente Banner ridimensionato
- Icona del pulsante di chiusura
È possibile cambiare la posizione del pulsante di chiusura in modo da mostrarlo nella parte superiore destra o sinistra dello schermo.
Il colore dello sfondo dell'annuncio può essere modificato.

Nome	Tipo	Obbligatorio	Descrizione
File immagine del banner	File	Sì	L'immagine mostrata nell'annuncio banner.
Altezza immagine del banner	Numero	Sì	L'altezza dell'immagine del banner.
Larghezza immagine del banner	Numero	Sì	La larghezza dell'immagine del banner.
Colore sfondo	Testo	Sì	Il colore dello sfondo dello spazio occupato dall'immagine ridimensionata e dal banner.
URL di clickthrough	URL	Sì	L'URL cui l'utente viene reindirizzato quando fa clic sull'annuncio ridimensionato.
File immagine ridimensionata	File	Sì	L'immagine mostrata quando viene fatto clic sul banner.
Altezza immagine ridimensionata	Numero	Sì	L'altezza dell'immagine ridimensionata.
Larghezza immagine ridimensionata	Numero	Sì	La larghezza dell'immagine ridimensionata.
Icona di chiusura	File	Sì	Il file immagine per il pulsante "Chiudi".
Larghezza icona di chiusura	Numero	Sì	La larghezza del pulsante "Chiudi" (30 è la larghezza media).
Altezza icona di chiusura	Numero	Sì	L'altezza del pulsante "Chiudi" (30 è l'altezza media).
Posizione del pulsante di chiusura	Elenco	No	È possibile posizionare il pulsante "Chiudi" in modo da mostrarlo nella parte superiore destra o sinistra dello schermo. I valori possibili sono "Right" o "Left". Se questo valore viene lasciato vuoto, il pulsante di chiusura verrà posizionato nella parte superiore destra dello schermo.
Ridimensionamento a larghezza massima	Elenco	No	Se il valore è "Yes", l'annuncio ridimensionato riempie l'intera larghezza dello schermo. Se il valore è "No", la larghezza sarà uguale a quella del banner originale. I valori possibili sono "Yes" e "No", mentre il valore predefinito è "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>

Nome dell'unità pubblicitaria di test: ali_resizeBanner

Questo modello è un'unità pubblicitaria a due componenti che inizia come annuncio banner nella parte inferiore dello schermo. Se un utente fa clic sul banner, l'annuncio si ridimensiona fino a coprire l'intero schermo. Se l'utente fa clic sull'annuncio con dimensioni espanse, viene reindirizzato all'URL di clickthrough definito.

Questo modello utilizza il pulsante di chiusura MRAID predefinito.

Comportamento ed elementi dell'interfaccia utente

La creatività è costituita dai seguenti elementi dell'interfaccia utente:

Asset della creatività:
- Componente Immagine del banner (altezza e larghezza sono obbligatorie)
- Componente Banner espanso
Il colore dello sfondo dell'annuncio banner e dell'annuncio espanso può essere modificato

Nome	Tipo	Obbligatorio	Descrizione
File immagine del banner	File	Sì	L'immagine mostrata nell'annuncio banner.
Altezza immagine del banner	Numero	Sì	L'altezza dell'immagine del banner.
Larghezza immagine del banner	Numero	Sì	La larghezza dell'immagine del banner.
Colore sfondo	Testo	Sì	Il colore assunto dallo sfondo dello spazio occupato dall'immagine del banner.
URL di clickthrough	URL	Sì	L'URL cui l'utente viene reindirizzato quando fa clic sull'annuncio ridimensionato.
File immagine espansa	File	Sì	L'immagine mostrata quando viene fatto clic sul banner.
Altezza immagine espansa	Numero	Sì	L'altezza dell'immagine espansa.
Larghezza immagine espansa	Numero	Sì	La larghezza dell'immagine espansa.


       
<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>

Nome dell'unità pubblicitaria di test: ali_expandDefaultClose

Codice di esempio per la chiusura automatica di un annuncio interstitial

Finestra di destinazione: finestra overlay in-app

Se utilizzi la funzione admob.opener.openOverlay(), puoi aprire una finestra del browser sovrapposta a schermo intero, con animazione dalla parte inferiore della schermata. Questo browser non include una barra di stato e mostra sempre un pulsante di chiusura nell'angolo in alto a sinistra. Questa opzione può essere adatta per un annuncio espandibile in cui la creatività a schermo intero può essere ospitata in una pagina separata.

Di seguito viene riportato un codice campione relativo a un banner in cui l'unità a schermo intero può essere caricata in una finestra overlay del browser. Devi sostituire i seguenti elementi segnaposto con i tuoi valori. Se disponibile per la tua rete, puoi utilizzare il codice di esempio per generare un modello di creatività.

[BANNER_UNIT]: URL di una creatività banner.
[WIDTH]: larghezza di una creatività banner.
[HEIGHT]: altezza di una creatività banner.
[FULLSCREEN_UNIT]: URL di una creatività a schermo intero. Nota: l'unità a schermo intero deve includere il codice JavaScript per analizzare l'URL di destinazione e reindirizzare l'utente alla pagina di destinazione dopo aver ricevuto un'azione clic. Per ulteriori dettagli, consulta Gestire l'URL di destinazione da un'unità a schermo intero.
[DESTINATION_URL]: URL di una pagina di destinazione.
[FALLBACK_URL]: URL di destinazione di riserva da utilizzare nel caso in cui la funzione JavaScript non venisse eseguita.
[ORIENTATION]: orientamento supportato per l'URL di destinazione. Utilizza "p" per verticale (portrait), "l" per orizzontale (landscape) oppure ometti questo valore per consentire qualsiasi orientamento.

Di seguito è riportato un codice creatività di esempio:


<!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>

Gestire l'URL di destinazione da un'unità a schermo intero

La funzione admob.opener.openOverlay() non consente di specificare l'URL di destinazione dei contenuti HTML.

Supponendo che l'URL di destinazione sia stato trasmesso sotto forma di coppia chiave-valore quando è stata specificata l'unità a schermo intero (ad esempio, "https://link.to.fullscreen.unit?destination=https://my.destination.url"), puoi scrivere una funzione JavaScript e includere uno snippet di codice HTML per registrare il clic e reindirizzare l'utente alla pagina di destinazione.

Di seguito è riportato il codice sorgente di una pagina di esempio:


<!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à con MRAID

L'SDK Google Mobile Ads supporta lo standard MRAID (Mobile Rich Media Ad Interface Definitions) di IAB per la pubblicità all'interno di app mobile. Puoi impostare un elemento pubblicitario come MRAID 1 o 2 utilizzando le impostazioni di targeting degli elementi pubblicitari nella sezione Aggiungi targeting e Funzionalità dispositivo.

Requisiti MRAID:

MRAID v2 richiede Google Play Services versione 7.8 o successiva per Android e l'SDK Google Mobile Ads versione 7.4.0 o successiva per iOS.
MRAID v3 richiede Google Play Services versione 15.0.0 o successiva per Android e l'SDK Google Mobile Ads versione 7.30.0 o successive per iOS.

Per utilizzare le funzioni MRAID nelle creatività per annunci, devi importare mraid.js nella creatività. A tal fine, includi <script src="mraid.js> nella creatività. L'SDK Google Mobile Ads, in quanto SDK compatibile con MRAID, cercherà quel codice nella creatività sostituendolo con un URL effettivo che rimanda a un'implementazione di MRAID. Altri SDK che supportano MRAID avranno un comportamento analogo, anche se gli effettivi URL saranno diversi.

A tua discrezione, puoi includere le librerie MRAID e la funzionalità dell'SDK Google Mobile Ads nella stessa creatività.

La funzione mraid.resize() e altre funzioni simili non avranno alcun effetto fino al momento in cui viene fatto clic sull'annuncio. In questo modo, viene impedito a una creatività dannosa di ridimensionarsi automaticamente e occupare l'intero schermo.

Scopri di più sul supporto di MRAID per Android o iOS.

Scegli una sezione sulla quale fornire un feedback.

È stato utile?

Come possiamo migliorare l'articolo?

Sviluppare annunci per l'SDK Google Mobile Ads

In questa pagina:

Trovare gli ID applicazione di Google Mobile Ads

Trovare le dimensioni e gli ID unità pubblicitarie

Altre funzioni JavaScript

Comportamento ed elementi dell'interfaccia utente

Comportamento ed elementi dell'interfaccia utente

Comportamento ed elementi dell'interfaccia utente

Gestire l'URL di destinazione da un'unità a schermo intero

Compatibilità con MRAID

È stato utile?

Hai bisogno di ulteriore assistenza?

Prova i passaggi successivi indicati di seguito:

Che tipo di problema è associato a questa selezione?

Condividi ulteriori informazioni o suggerimenti