Desarrollar anuncios para el SDK de anuncios de Google para móviles

Este artículo trata sobre cómo desarrollar anuncios para el SDK de anuncios de Google para móviles. En él se explica qué información necesita su desarrollador. A continuación, veremos cómo se utiliza esa información para crear etiquetas que especifiquen el comportamiento de los anuncios.

Hay varios formatos de anuncio disponibles, como los banners in-app, los banners expandibles y los anuncios a pantalla completa. Cada formato de anuncio tiene sus propios recursos de creatividades y funciones. Por ejemplo, los banners expandibles pueden cambiar el tamaño y el color de fondo cuando se hace clic en ellos. El SDK de anuncios de Google para móviles es compatible con los estándares MRAID.

Para usar el SDK de anuncios de Google para móviles, debe recopilar el ID de la aplicación, los IDs de los bloques de anuncios y los tamaños de anuncio, y enviárselos a su desarrollador.

Secciones de esta página:

Identificar IDs de aplicación de anuncios de Google para móviles
Identificar IDs y tamaños de bloques de anuncios
Funciones adicionales de JavaScript
Compatibilidad con MRAID

Identificar IDs de aplicación de anuncios de Google para móviles

Inicie sesión en Google Ad Manager.
Haga clic en Inventario y, a continuación, en Aplicaciones.
Busque la aplicación cuyo ID necesita o reclame una nueva aplicación móvil.
Haga clic en para copiar el ID de la aplicación en el portapapeles. Por ejemplo, ca-app-pub-3940256099942544~3347511713.
Envíe esta información a su desarrollador.

Identificar IDs y tamaños de bloques de anuncios

Haga clic en Inventario y, a continuación, en Bloques de anuncios.
Haga clic en el nombre del bloque de anuncios cuya etiqueta quiera crear o cree un bloque de anuncios.
Haga clic en Etiquetas.
Seleccione el tipo "Etiqueta de aplicación móvil" y haga clic en Continuar.
En "Códigos de etiqueta", copie los valores "ID del bloque de anuncios" y "Tamaños de bloques de anuncios". Envíe esta información a su desarrollador.

Funciones adicionales de JavaScript

Para sacar el máximo provecho de las funciones del SDK de anuncios de Google para móviles, consulte la documentación para desarrolladores.

Estas son algunas de las funciones destacadas que se pueden conseguir modificando la sección <head> de la creatividad.

Mostrar todo Ocultar todo

Acceder a las funciones de los dispositivos

Eventos de aplicaciones

Ampliar la imagen a pantalla completa

Código de muestra de anuncio en la aplicación: clic al calendario con la versión 2.0 de MRAID en dispositivos móviles

Esta plantilla es un bloque de anuncios de banner que en su estado inicial se muestra como un banner en la parte inferior de la pantalla. Si un usuario hace clic en el banner, la aplicación de calendario predeterminada creará un evento con su consentimiento.

Comportamiento y elementos de interfaz de usuario

La creatividad está formada por los siguientes elementos de interfaz de usuario:

La imagen del banner, junto con su altura y su anchura.
Información obligatoria sobre el evento, como el resumen, la descripción, la ubicación, la fecha de inicio y la de finalización.

Nombre	Tipo	Obligatorio	Descripción
Archivo de imagen del banner	Archivo	Sí	La imagen del anuncio de banner.
Anchura de la imagen del banner	Número	Sí	La anchura de la imagen del banner.
Altura de la imagen del banner	Número	Sí	La altura de la imagen del banner.
Resumen del evento	Texto	Sí	El resumen del evento.
Descripción del evento	Texto	Sí	La descripción del evento.
Ubicación del evento	Texto	No	La ubicación del evento.
Fecha de inicio del evento	Texto	Sí	La fecha de inicio del evento. Debe tener el siguiente formato: "2016-10-22T00:00-05:00". Este ejemplo sería "22 de octubre del 2016 de las 00:00 a las 05:00".
Fecha de finalización del evento	Texto	Sí	La fecha de finalización del evento, que debe tener el siguiente formato: "2016-10-22T00:00-05:00". Este ejemplo sería "22 de octubre del 2016 de las 00:00 a las 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>

Nombre del bloque de anuncios de prueba: ali_Calendar

Esta plantilla es un bloque de anuncios de dos componentes que comienza como un anuncio de banner en la parte inferior de la pantalla. No obstante, cuando los usuarios hacen clic en el banner, el anuncio pasa a tener unas dimensiones expandidas específicas. Si el usuario hace clic en un anuncio con las dimensiones expandidas, se le redirigirá a la URL definida como URL de destino.

La anchura puede ser el tamaño del banner o bien puede ocupar la anchura de toda la pantalla (si el valor de FullWidthResize es "Yes").

Comportamiento y elementos de interfaz de usuario

La creatividad está formada por los siguientes elementos de interfaz de usuario:

Recursos de creatividades (por cada recurso debe indicarse el archivo, la altura y la anchura)
- Componente de la imagen del banner
- Componente del banner con el tamaño modificado
- Icono del botón de cerrar
Puede hacer que el botón de cerrar aparezca en la parte superior derecha o izquierda de la pantalla.
El color de fondo del anuncio se puede cambiar.

Nombre	Tipo	Obligatorio	Descripción
Archivo de imagen del banner	Archivo	Sí	Imagen que se mostrará en el anuncio de banner.
Altura de la imagen del banner	Número	Sí	La altura de la imagen del banner.
Anchura de la imagen del banner	Número	Sí	La anchura de la imagen del banner.
Color de fondo	Texto	Sí	El color de fondo del espacio que ocupa la imagen con el tamaño modificado y el espacio que ocupa el banner.
URL de destino	URL	Sí	La URL a la que se redirige a los usuarios cuando hacen clic en el anuncio con el tamaño modificado.
Archivo de la imagen con el tamaño modificado	Archivo	Sí	La imagen que se mostrará cuando se haga clic en el banner.
Altura de la imagen con el tamaño modificado	Número	Sí	La altura de la imagen con el tamaño modificado.
Anchura de la imagen con el tamaño modificado	Número	Sí	La anchura de la imagen con el tamaño modificado.
Icono de cerrar	Archivo	Sí	El archivo de imagen del botón para cerrar el anuncio.
Anchura del icono de cerrar	Número	Sí	Anchura del botón para cerrar el anuncio (la anchura media es de 30 píxeles).
Altura del icono de cerrar	Número	Sí	La altura del botón para cerrar el anuncio (la altura media es de 30 píxeles).
Posición del botón para cerrar el anuncio	Lista	No	El botón para cerrar el anuncio puede colocarse en la parte superior derecha o izquierda de la pantalla. Los valores posibles son "Right" (Derecha) o "Left" (Izquierda). Si se deja en blanco, el botón se sitúa en la parte superior derecha de la pantalla.
Cambio de tamaño a anchura completa	Lista	No	Para que el anuncio con el tamaño modificado ocupe toda la anchura de la pantalla, este valor debe ser "Yes" (Sí). Si su valor es "No", la anchura será la misma que la del banner original. Los valores posibles son "Yes" y "No", y el predeterminado es "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>

Nombre del bloque de anuncios de prueba: ali_resizeBanner

Esta plantilla es un bloque de anuncios de dos componentes que comienza como un anuncio de banner en la parte inferior de la pantalla. No obstante, cuando los usuarios hacen clic en él, el anuncio cambia de tamaño hasta ocupar toda la pantalla. Si el usuario hace clic en un anuncio con las dimensiones expandidas, se le redirigirá a la URL definida como URL de destino.

Esta plantilla utiliza el botón predeterminado para cerrar el anuncio de MRAID.

Comportamiento y elementos de interfaz de usuario

La creatividad está formada por los siguientes elementos de interfaz de usuario:

Recursos de la creatividad:
- Componente de imagen de banner (también es obligatorio indicar los valores de anchura y altura)
- Componente de banner expandible
Puede cambiar el color de fondo del anuncio de banner y del anuncio expandido.

Nombre	Tipo	Obligatorio	Descripción
Archivo de imagen del banner	Archivo	Sí	Imagen que se mostrará en el anuncio de banner.
Altura de la imagen del banner	Número	Sí	La altura de la imagen del banner.
Anchura de la imagen del banner	Número	Sí	La anchura de la imagen del banner.
Color de fondo	Texto	Sí	El color de fondo del espacio que ocupa la imagen del banner.
URL de destino	URL	Sí	La URL a la que se redirige a los usuarios cuando hacen clic en el anuncio con el tamaño modificado.
Archivo de la imagen expandida	Archivo	Sí	La imagen que se mostrará cuando se haga clic en el banner.
Altura de la imagen expandida	Número	Sí	La altura de la imagen expandida.
Anchura de la imagen expandida	Número	Sí	La anchura de la imagen expandida.


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

Nombre del bloque de anuncios de prueba: ali_expandDefaultClose

Código de ejemplo para cerrar un anuncio intersticial de forma automática

Ventana de destino: ventana superpuesta en aplicaciones

Con admob.opener.openOverlay(), puede abrir una ventana de navegador superpuesta a pantalla completa desde la parte inferior de la pantalla. En esta ventana no se incluye ninguna barra de estado, pero en la esquina superior izquierda siempre se muestra un botón para cerrarla. Puede serle útil emplear esta opción en los anuncios expandibles en los que la creatividad a pantalla completa puede alojarse en otra página.

Más abajo, se proporciona el código de ejemplo de un banner en el que el recurso de pantalla completa se puede cargar en una ventana de navegador superpuesta. Debe sustituir los marcadores de posición que se indican a continuación por sus propios valores. Con el código de ejemplo, puede crear una plantilla de creatividades si esta función está disponible en su red.

[BANNER_UNIT]: URL de una creatividad de banner.
[WIDTH]: anchura de una creatividad de banner.
[HEIGHT]: altura de una creatividad de banner.
[FULLSCREEN_UNIT]: URL de una creatividad de pantalla completa. Nota: La unidad a pantalla completa debe incluir código de JavaScript para analizar la URL de destino y redireccionar al usuario a la página de destino cuando se reciba una acción de clic. Consulte la sección Gestionar URLs de destino a partir de una unidad a pantalla completa para obtener más información.
[DESTINATION_URL]: URL de una página de destino.
[FALLBACK_URL]: URL de destino de respaldo para usarla en caso de que no se ejecute la función de JavaScript.
[ORIENTATION]: orientación admitida para la URL de destino (utilice "p" para vertical, "l" para horizontal u omita este valor para que se admita cualquier orientación).

Código de creatividad de ejemplo:


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

Gestionar URLs de destino a partir de una unidad a pantalla completa

La función admob.opener.openOverlay() no permite especificar la URL de destino del contenido HTML.

Si partimos de la base de que ha transferido la URL de destino en forma de par clave-valor al especificar la unidad a pantalla completa (por ejemplo, "https://link.to.fullscreen.unit?destination=https://my.destination.url") puede escribir una función JavaScript e incluir un fragmento de código HTML para capturar los clics y redirigir a los usuarios a la página de destino.

A continuación, se muestra un ejemplo de código fuente de una página:


<!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() {
  // Obtener URL actual tras el signo "?"
  var destinationUrl = window.location.search;

  // Quite el signo "?"
  destinationUrl = destinationUrl.substring(1);
  // Analice el par clave-valor destination=url
  var kvPair = destinationUrl.split("=");
  var key = kvPair[0]; // key: destination
  var value = kvPair[1]; // value: url
  var url = decodeURIComponent(value); 

  // Abra la URL de destino en la superposición
  window.location = url;

  // Abra la URL de destino en un navegador externo
  // 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>

Compatibilidad con MRAID

El SDK de anuncios de Google para móviles es compatible con el estándar de Definiciones de la interfaz de anuncios de rich media para móviles (MRAID) de IAB para la publicidad en aplicaciones móviles. Puede configurar líneas de pedido para que cumplan la versión 1 o 2 de MRAID con los ajustes de segmentación de líneas de pedido que hay en Añadir segmentación y Capacidad del dispositivo.

Requisitos de MRAID:

Para utilizar MRAID v. 2, se necesita la aplicación Servicios de Google Play v. 7.8 o posteriores en Android y el SDK de anuncios de Google para móviles v. 7.4.0 o posteriores en iOS.
Para utilizar MRAID v. 3, se necesita la aplicación Servicios de Google Play v. 15.0.0 o posteriores en Android y el SDK de anuncios de Google para móviles v. 7.30.0 o posteriores en iOS.

Para usar funciones de MRAID en sus creatividades de anuncios, debe importar mraid.js a su creatividad. Para ello, incluya <script src="mraid.js"> en la creatividad. El SDK de anuncios de Google para móviles, compatible con MRAID, busca ese fragmento de código de la creatividad y lo sustituye por una URL real que dirige a una implementación MRAID. Otros SDK compatibles con MRAID hacen lo mismo, pero con URL diferentes.

Tiene la posibilidad de incluir en una misma creatividad las bibliotecas de MRAID y las funciones del SDK de anuncios de Google para móviles.

La función mraid.resize() y otras similares solo tienen efecto después de que se haga clic en un anuncio; de este modo, se evita que una creatividad maliciosa cambie de tamaño automáticamente y ocupe toda la pantalla.

Consulte más información sobre la compatibilidad de MRAID con Android o iOS.

Selecciona una sección sobre la que enviar comentarios

¿Te ha resultado útil esta información?

¿Cómo podemos mejorar esta página?

Desarrollar anuncios para el SDK de anuncios de Google para móviles

Secciones de esta página:

Identificar IDs de aplicación de anuncios de Google para móviles

Identificar IDs y tamaños de bloques de anuncios

Funciones adicionales de JavaScript

Comportamiento y elementos de interfaz de usuario

Comportamiento y elementos de interfaz de usuario

Comportamiento y elementos de interfaz de usuario

Gestionar URLs de destino a partir de una unidad a pantalla completa

Compatibilidad con MRAID

¿Te ha resultado útil esta información?

¿Necesitas más ayuda?

Prueba estos pasos:

¿Cuál es el problema de esta selección?

Compartir más información o sugerencias