Este artículo explica cómo desarrollar anuncios para el SDK de anuncios de Google para dispositivos móviles. En él se analiza qué información se necesita para tu desarrollador. Luego, se abarca cómo se utiliza esa información para crear etiquetas que especifiquen el comportamiento del anuncio.
Hay diferentes formatos de anuncios disponibles, incluidos banners en la app, banners expandibles y anuncios de pantalla completa. Cada formato de anuncio tiene sus propios recursos de creatividad y funciones. Por ejemplo, los banners expandibles pueden cambiar de tamaño y de color de fondo cuando se hace clic en ellos. El SDK de anuncios de Google para dispositivos móviles es compatible con los estándares de MRAID.
Si deseas usar el SDK de anuncios de Google para dispositivos móviles, debes recopilar el ID de aplicación, los IDs de las unidades de anuncios y los tamaños de anuncio para tu desarrollador.
En esta página, encontrarás lo siguiente:
- Cómo buscar los IDs de aplicación para los anuncios de Google para dispositivos móviles
- Cómo buscar los IDs y tamaños de las unidades de anuncios
- Funciones adicionales de JavaScript
- Compatibilidad con MRAID
Cómo buscar los ID de aplicación para los anuncios de Google para dispositivos móviles
- Accede a Google Ad Manager.
- Haz clic en Inventario y, luego, en Aplicaciones.
- Busque la aplicación de la que necesita el ID o reclame una nueva aplicación para dispositivos móviles.
- Haga clic en para copiar el "ID de aplicación" en su portapapeles (por ejemplo,
ca-app-pub-3940256099942544~3347511713
). - Envíe esta información a su desarrollador.
Cómo buscar los IDs y tamaños de las unidades de anuncios
- Haz clic en Inventario y, luego, en Unidades de anuncios.
- Haga clic en el nombre de la unidad para la que desea crear una etiqueta de anuncio o cree una unidad de anuncios nueva.
- Haga clic en Etiquetas.
- Seleccione el tipo de "Etiqueta de aplicación para dispositivos móviles" y haga clic en Continuar.
- En "Resultados de etiqueta", copie el "ID de la unidad de anuncios" y los "Tamaños de la unidad de anuncios". Envíe esta información a su desarrollador.
Funciones adicionales de JavaScript
Si desea aprovechar la funcionalidad del SDK de anuncios de Google para dispositivos móviles, consulte la documentación para desarrolladores.
Estas son algunas funciones destacadas para modificar la sección <head>
de la creatividad.
El SDK expone las funciones de los navegadores integrados en la aplicación disponibles en iOS y Android. De esta manera, los desarrolladores pueden acceder a ciertas funciones del dispositivo, como el acelerómetro, el giroscopio y la brújula, mediante HTML5 si la plataforma los admite.
Los eventos de aplicaciones le permiten ejecutar códigos personalizados en su aplicación cuando una creatividad envía uno de dichos eventos. Además, le brindan la posibilidad de incorporar ejecuciones de anuncios personalizados que interaccionen con la aplicación, como cambiar su color de fondo.
Si descubre que su anuncio de pantalla completa solo ocupa parte de ella, inserte el siguiente código en la sección <head>
de la creatividad:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
.
Esta plantilla es una unidad de anuncios de banner que comienza como un banner en la parte inferior de la pantalla. Si un usuario hace clic en él, su aplicación de calendario predeterminada creará un evento nuevo con su consentimiento.
Comportamiento y elementos de la IU
La creatividad incluye los siguientes elementos de la IU:
- La imagen del banner y su altura y ancho
- Información obligatoria acerca del evento, como el resumen, la descripción, la ubicación y la fecha de inicio y finalización
Nombre | Tipo | Obligatorio | Descripción |
---|---|---|---|
Archivo de la imagen del banner | Archivo | Sí | Imagen del anuncio de banner |
Ancho de la imagen del banner | Número | Sí | Ancho de la imagen del banner |
Altura de la imagen del banner | Número | Sí | Altura de la imagen del banner |
Resumen del evento | Texto | Sí | Resumen del evento |
Descripción del evento | Texto | Sí | Descripción del evento |
Ubicación del evento | Texto | No | 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". Por ejemplo, esta fecha corresponde al 22 de octubre de 2016 desde las 12:00 a.m. hasta las 5:00 a.m. |
Fecha de finalización del evento | Texto | Sí | La fecha de finalización del evento. Debe tener el siguiente formato: "2016-10-22T00:00-05:00". Por ejemplo, esta fecha corresponde al 22 de octubre de 2016 desde las 12:00 a.m. hasta las 5:00 a.m. |
<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 de la unidad de anuncios de prueba: ali_Calendar
Esta plantilla es una unidad de anuncios de dos componentes que comienza como un anuncio de banner en la parte inferior de la pantalla. Si un usuario hace clic en él, el anuncio cambiará de tamaño a dimensiones expandidas específicas. Si el usuario hace clic en el anuncio con las dimensiones expandidas, se lo redireccionará a la URL definida como la URL de clic.
El ancho puede corresponder al tamaño del banner o bien ocupar todo el ancho de la pantalla (si el valor de FullWidthResize
es "Sí").
Comportamiento y elementos de la IU
La creatividad incluye los siguientes elementos de la IU:
- Recursos de creatividades (para cada uno de estos recursos, se debe incluir el archivo, la altura y el ancho)
- Componente de la imagen del banner
- Componente de banner que cambió el tamaño
- Ícono del botón Cerrar
- Se puede ajustar la posición del botón "Cerrar" de modo que esté en la parte superior derecha o izquierda de la pantalla.
- Se puede modificar el color de fondo del anuncio.
Nombre | Tipo | Obligatorio | Descripción |
---|---|---|---|
Archivo de la 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 |
Ancho de la imagen del banner | Número | Sí | El ancho de la imagen del banner |
Color de fondo | Texto | Sí | El color de fondo del espacio que ocupan la imagen que cambió de tamaño y el banner |
URL de clic | URL | Sí | La URL a la que se redireccionará al usuario cuando haga clic en el anuncio que cambió de tamaño |
Archivo de imagen al que se le cambió el tamaño | Archivo | Sí | La imagen que se mostrará cuando se haga clic en el banner |
Altura de la imagen a la que se le cambió el tamaño | Número | Sí | La altura de la imagen a la que se le cambió el tamaño |
Ancho de la imagen a la que se le cambió el tamaño | Número | Sí | El ancho de la imagen a la que se le cambió el tamaño |
Ícono de cierre | Archivo | Sí | El archivo de imagen para el botón "Cerrar" |
Ancho del ícono del botón "Cerrar" | Número | Sí | El ancho del botón "Cerrar". (30 es el ancho promedio) |
Altura del ícono del botón "Cerrar" | Número | Sí | La altura del botón "Cerrar". (30 es la altura promedio) |
Posición del botón "Cerrar" | Lista | No | Se puede ajustar la posición del botón "Cerrar" de modo que esté en la parte superior derecha o izquierda de la pantalla. Los valores posibles son "Derecha" o "Izquierda". Si el valor queda en blanco, el botón "Cerrar" se posicionará en la parte superior derecha de la pantalla. |
Cambio de tamaño a pantalla completa | Lista | No | Puedes cambiar el tamaño de un anuncio de modo que ocupe el ancho completo de la pantalla si el valor es "Sí". Si el valor es "No", el ancho tendrá el mismo tamaño que el banner original. Los valores posibles son "Sí" y "No", 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 de la unidad de anuncios de prueba: ali_resizeBanner
Esta plantilla es una unidad de anuncios de dos componentes que comienza como un anuncio de banner en la parte inferior de la pantalla. Si un usuario hace clic en él, el anuncio cambiará de tamaño para ocupar toda la pantalla. Si el usuario hace clic en el anuncio con las dimensiones expandidas, se lo redireccionará a la URL definida como la URL de clic.
Esta plantilla utiliza el botón "Cerrar" predeterminado de MRAID.
Comportamiento y elementos de la IU
La creatividad incluye los siguientes elementos de la IU:
- Recursos de creatividades:
- Componente de la imagen del banner (debe indicarse la altura y el ancho)
- Componente para expandir el banner
- Se puede modificar el color de fondo del anuncio de banner y del anuncio expandido.
Nombre | Tipo | Obligatorio | Descripción |
---|---|---|---|
Archivo de la 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 |
Ancho de la imagen del banner | Número | Sí | El ancho de la imagen del banner |
Color de fondo | Texto | Sí | El color de fondo del espacio que ocupa la imagen del banner |
URL de clic | URL | Sí | La URL a la que se redireccionará al usuario cuando haga clic en el anuncio que cambió de tamaño |
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 |
Ancho de la imagen expandida | Número | Sí | El ancho 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 de la unidad de anuncios de prueba: ali_expandDefaultClose
Si desea cerrar un anuncio intersticial luego de un período establecido, haga lo siguiente:
- Incluya código en la creatividad para cerrar el instersticial luego de transcurrido un período determinado. Con este fin, puede usar el siguiente código como plantilla:
<!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>
Mediante admob.opener.openOverlay()
, puede abrir un navegador superpuesto en pantalla completa con animación en la parte inferior de la pantalla. Este navegador no incluye una barra de estado y siempre muestra un botón para cerrar en la esquina superior izquierda. Esta opción es ideal para un anuncio expandible en el que la creatividad de pantalla completa se aloja en una página aparte.
A continuación encontrará un código de muestra para un banner que permite que la unidad de pantalla completa se cargue en la ventana superpuesta del navegador. Reemplace los siguientes marcadores de posición con sus propios valores. Si la opción está disponible en su red, puede usar el código de muestra para crear una plantilla de creatividad.
[BANNER_UNIT]
: Es la URL de la creatividad del banner.[WIDTH]
: Es el ancho de la creatividad del banner.[HEIGHT]
: Es la altura de la creatividad del banner.[FULLSCREEN_UNIT]
: Es la URL de la creatividad de pantalla completa. Nota: La unidad de pantalla completa debe incluir código JavaScript para analizar la URL de destino y redireccionar al usuario a la páginas de destino luego de recibir la acción de clic. Para obtener más detalles, consulte Cómo administrar la URL de destino de una unidad de pantalla completa.[DESTINATION_URL]
: Es la URL de la página de destino.[FALLBACK_URL]
: Es la URL de destino de resguardo que puede usarse en caso de que no se ejecute la función JavaScript.[ORIENTATION]
: Es la orientación compatible para la URL de destino (use "p" para vertical, "l" para horizontal o bien omita este valor para permitir cualquier orientación).
A continuación, se incluye un código de creatividad de muestra:
<!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>
Cómo administrar la URL de destino de una unidad de pantalla completa
La función admob.opener.openOverlay()
no incluye la opción para especificar la URL de destino del contenido HTML.
Si usted pasó la URL de destino como un par clave-valor cuando especificó la unidad de pantalla completa, por ejemplo, "https://link.to.fullscreen.unit?destination=https://my.destination.url
", puede escribir una función JavaScript y agregar un fragmento de código HTML para capturar el clic y redireccionar al usuario a la página de destino.
A continuación, se incluye una fuente de página de muestra:
<!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>
Compatibilidad con MRAID
El SDK de anuncios de Google para dispositivos móviles es compatible con el estándar de definiciones de la interfaz de anuncios rich media para dispositivos móviles (MRAID) de IAB, utilizado en el ámbito de la publicidad en aplicaciones para ese tipo de dispositivos. Puedes establecer una línea de pedido como MRAID v1 o MRAID v2 a través de la configuración de la segmentación de líneas de pedido en Agregar segmentación y Funciones del dispositivo.
Requisitos de MRAID:
- MRAID v2 requiere la versión 7.8 (o posterior) de los Servicios de Google Play para Android, y la versión 7.4.0 (o posterior) del SDK de anuncios de Google para dispositivos móviles iOS.
- MRAID v3 requiere la versión 15.0.0 (o posterior) de los Servicios de Google Play para Android, y la versión 7.30.0 (o posterior) del SDK de anuncios de Google para dispositivos móviles iOS.
Si desea usar las funciones de MRAID en las creatividades de sus anuncios, debe importar mraid.js
a su creatividad. Para ello, incluya en ella <script src="mraid.js">
. El SDK de anuncios de Google para dispositivos móviles, que es un SDK compatible con MRAID, buscará ese código en la creatividad y lo reemplazará por la URL real que dirija a una implementación de MRAID. Otros SDK compatibles con MRAID harán lo mismo, pero las URL reales serán distintas.
De manera opcional, puede incluir las bibliotecas de MRAID, así como las funciones del SDK de anuncios de Google para dispositivos móviles, en la misma creatividad.
mraid.resize()
y otras funciones similares no tendrán efecto hasta que se haga clic en el anuncio. De esta manera, se evita que una creatividad maliciosa cambie de tamaño automáticamente y ocupe toda la pantalla.