Desarrolle anuncios para el SDK de anuncios de Google para dispositivos móviles

Si desea usar el SDK de anuncios de Google para dispositivos móviles, debe recopilar el ID de aplicación, los ID de los bloques de anuncios y los tamaños de anuncio para su desarrollador.

Cómo buscar los ID de aplicación para los anuncios de Google para dispositivos móviles

  1. Acceda a Google Ad Manager.
  2. Haga clic en Inventario y, luego, Aplicaciones.
  3. Busque la aplicación de la que necesita el ID o reclame una nueva aplicación para dispositivos móviles.
  4. Haga clic en Copiar para copiar el "ID de aplicación" en su portapapeles (por ejemplo, ca-app-pub-3940256099942544~3347511713).
  5. Envíe esta información a su desarrollador.

Cómo buscar los ID y tamaños de los bloques de anuncios

  1. Haga clic en Inventario y, luego, Bloques de anuncios.
  2. Haga clic en el nombre del bloque para el que desea crear una etiqueta de anuncio o cree un bloque de anuncios nuevo.
  3. Haga clic en Etiquetas.
  4. Seleccione el tipo de "Etiqueta de aplicación para dispositivos móviles" y haga clic en Continuar.
  5. En "Resultados de etiqueta", copie el "ID del bloque de anuncios" y los "Tamaños del bloque 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.

Acceso a las funciones del dispositivo

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.

Consulte la documentación de iOS y Android para obtener más información sobre estas funciones.

Eventos de aplicaciones

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.

Obtenga información sobre cómo implementar eventos de aplicaciones.

Cómo ajustar el tamaño de la imagen a pantalla completa

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"/>.

Código de muestra para anuncios en la aplicación: clics en aplicaciones de calendario para dispositivos móviles con la versión 2.0 de MRAID

Esta plantilla es un bloque 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 Imagen del anuncio de banner
Ancho de la imagen del banner Número Ancho de la imagen del banner
Altura de la imagen del banner Número Altura de la imagen del banner
Resumen del evento Texto Resumen del evento
Descripción del evento Texto Descripción del evento
Ubicación del evento Texto No Ubicación del evento
Fecha de inicio del evento Texto 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 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.
 

Nombre del bloque de anuncios de prueba: ali_Calendar

Código de muestra para anuncios gráficos: plantilla de pie de página expandible con la versión 2.0 de MRAID

Esta plantilla es un bloque de anuncios de dos componentes que comienza como un banner en la parte inferior de la pantalla. Si un usuario hace clic en él, el anuncio cambiará de tamaño a dimensiones específicas. Si se hace clic en el anuncio más grande, se redirecciona al usuario a un sitio web específico.

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:

  • Elementos de creatividades (para cada uno de estos elementos, 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 Imagen que se mostrará en el anuncio de banner
Altura de la imagen del banner Número La altura de la imagen del banner
Ancho de la imagen del banner Número El ancho de la imagen del banner
Color de fondo Texto El color de fondo del espacio que ocupan la imagen que cambió de tamaño y el banner.
URL de clic URL 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 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 La altura de la imagen a la que se le cambió el tamaño
Ancho de la imagen a la que se le modificó el tamaño Número El ancho de la imagen a la que se le modificó el tamaño
Ícono del botón "Cerrar" Archivo El archivo de imagen del botón "Cerrar"
Ancho del ícono del botón "Cerrar" Número El ancho del botón "Cerrar" (el promedio es de 30)
Altura del ícono del botón "Cerrar" Número La altura del botón "Cerrar" (el promedio es de 30)
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 "Right" o "Left". 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 Si el valor es "Yes", puede cambiar el tamaño de un anuncio de modo que ocupe todo el ancho de la pantalla. Si el valor es "No", el ancho tendrá el mismo tamaño que el banner original. Los valores posibles son "Yes" y "No", y el predeterminado es "No".
 

Nombre del bloque de anuncios de prueba: ali_resizeBanner

Código de muestra para anuncios en la aplicación: banner expandible para dispositivos móviles (MRAID 2.0) con botón "Cerrar" predeterminado

Esta plantilla es un bloque de anuncios de dos componentes que comienza como un banner en la parte inferior de la pantalla.

Si un usuario hace clic en él, el anuncio se expandirá para ocupar toda la pantalla. Si se hace clic en el anuncio más grande, se redirecciona al usuario a un sitio web específico. 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:

  • Elementos 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 Imagen que se mostrará en el anuncio de banner
Altura de la imagen del banner Número La altura de la imagen del banner
Ancho de la imagen del banner Número El ancho de la imagen del banner
Color de fondo Texto El color de fondo del espacio que ocupa la imagen del banner
URL de clic URL 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 La imagen que se mostrará cuando se haga clic en el banner
Altura de la imagen expandida Número La altura de la imagen expandida.
Ancho de la imagen expandida Número El ancho de la imagen expandida
 

Nombre del bloque de anuncios de prueba: ali_expandDefaultClose

Código de muestra para cerrar un anuncio intersticial automáticamente
Solo se pueden cerrar automáticamente los anuncios intersticiales con reserva directa. Con respecto a los intersticiales que se publican mediante asignación dinámica (es decir, Ad Exchange, AdSense o AdMob), solo puede descartarlos el usuario.

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>
Ventana de orientación: ventana superpuesta dentro de la aplicación

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. Usted puede establecer una línea de pedido como MRAID v1 o MRAID v2 mediante la configuración de la segmentación de líneas de pedido en Agregar segmentación y, luego, 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.

Obtenga más información sobre la compatibilidad con MRAID en la documentación de Android o iOS para desarrolladores.

¿Te resultó útil esto?
¿Cómo podemos mejorarla?

¿Necesitas más ayuda?

Accede para ver las opciones de asistencia adicionales y resolver tu problema rápidamente