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à.
L'SDK mostra le funzionalità dei browser in-app disponibili su iOS e Android. Questo consente agli sviluppatori di accedere alle funzionalità del dispositivo quali accelerometro, giroscopio e bussola tramite HTML5, se supportate dalla piattaforma.
La funzione per gli eventi app ti consente di eseguire codice personalizzato nell'applicazione quando una creatività invia uno di questi eventi. Con questa funzione, puoi introdurre esecuzioni di annunci personalizzati che interagiscono con l'applicazione, ad esempio la modifica del colore di sfondo dell'app stessa.
Se noti che l'annuncio a schermo intero occupa solo una parte dello schermo, inserisci il seguente codice nella sezione <head>
della creatività:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
.
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
Per chiudere un annuncio interstitial dopo un periodo di tempo prestabilito:
- Includi nella creatività il codice per chiudere l'annuncio interstitial una volta trascorso uno specifico periodo di tempo. Per questo approccio, puoi utilizzare come modello il codice riportato di seguito:
<!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>
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à.
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.