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

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

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

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

Identifique IDs y tamaños de bloques de anuncios

  1. Haga clic en Inventario y luego Bloques de anuncios.
  2. Haga clic en el nombre del bloque de anuncios cuya etiqueta quiera crear o cree un bloque de anuncios.
  3. Haga clic en Etiquetas.
  4. Seleccione el tipo "Etiqueta de aplicación móvil" y haga clic en Continuar.
  5. 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.

Acceder a las funciones de los dispositivos

El SDK muestra las funciones de los navegadores integrados en aplicaciones disponibles en iOS y Android. Esto permite a los desarrolladores acceder a funciones de dispositivos, como el acelerómetro, el giroscopio y la brújula mediante HTML5, donde la plataforma las admita.

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

Eventos de aplicaciones

Los eventos de aplicaciones le permiten ejecutar código personalizado en una aplicación. Para ello, la creatividad tiene que procesarlos. Con los eventos de aplicaciones, puede introducir ejecuciones de anuncios personalizadas que interactúen con la aplicación. Con estas interacciones puede, por ejemplo, cambiar el color de fondo de la aplicación.

Ampliar la imagen a pantalla completa

Si ve que el anuncio de pantalla completa solo cubre una parte de ella, introduzca el siguiente fragmento de 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 ejemplo de anuncio en la aplicación: clic al calendario con MRAID v. 2.0 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 La imagen que se mostrará en el anuncio de banner.
Anchura de la imagen del banner Número La anchura de la imagen del banner.
Altura de la imagen del banner Número La altura de la imagen del banner.
Resumen del evento Texto El resumen del evento.
Descripción del evento Texto La descripción del evento.
Ubicación del evento Texto No La ubicación del evento.
Fecha de inicio del evento Texto La fecha de inicio 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".
Fecha de finalización del evento Texto 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".
 

Nombre del bloque de anuncios de prueba: ali_Calendar

Código de ejemplo de anuncio de display: plantilla de pie de página desplegable con la versión 2.0 de MRAID

Esta plantilla es un bloque de anuncios de dos componentes que al principio es un banner situado en la parte inferior de la pantalla. No obstante, cuando los usuarios hacen clic en el banner, el anuncio pasa a tener unas dimensiones específicas. Si vuelven a hacer clic en el anuncio, se les redirige a un sitio web concreto.

La anchura puede ser el tamaño del banner o la 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 cierre
  • Puede hacer que el botón de cierre 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 Imagen que se mostrará en el anuncio de banner.
Altura de la imagen del banner Número La altura de la imagen del banner.
Anchura de la imagen del banner Número La anchura de la imagen del banner.
Color de fondo Texto 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 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 La imagen que se mostrará cuando se haga clic en el banner.
Altura de la imagen con el tamaño modificado Número La altura de la imagen con el tamaño modificado.
Anchura de la imagen con el tamaño modificado Número La anchura de la imagen con el tamaño modificado.
Icono de cierre Archivo El archivo de imagen del botón para cerrar el anuncio.
Anchura del icono de cierre Número La anchura del botón para cerrar el anuncio (la anchura media es de 30 píxeles).
Altura del icono de cierre Número 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 tamaño modificado ocupe la anchura completa de la pantalla, debe tener el valor "Yes" (Sí). Si su valor es "No" (No), la anchura será la misma que la del banner original. Los valores posibles son "Yes" y "No". El valor predeterminado es "No".
 

Nombre del bloque de anuncios de prueba: ali_resizeBanner

Código de ejemplo de anuncio en aplicaciones: banner expandible para móviles (MRAID 2.0) con el botón de cierre predeterminado

Esta plantilla es un bloque de anuncios de dos componentes que al principio es un banner situado en la parte inferior de la pantalla.

No obstante, cuando los usuarios hacen clic en él, el anuncio se expande hasta ocupar toda la pantalla. Si vuelven a hacer clic en el anuncio, se les redirige a un sitio web concreto. Esta plantilla utiliza el botón de cierre predeterminado de MRAID.

Comportamiento y elementos de interfaz de usuario

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

  • Recursos de creatividades:
    • 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 Imagen que se mostrará en el anuncio de banner.
Altura de la imagen del banner Número La altura de la imagen del banner.
Anchura de la imagen del banner Número La anchura de la imagen del banner.
Color de fondo Texto El color de fondo del espacio que ocupa la imagen del banner.
URL de destino URL 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 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.
Anchura de la imagen expandida Número La anchura de la imagen expandida.
 

Nombre del bloque de anuncios de prueba: ali_expandDefaultClose

Código de ejemplo para cerrar un anuncio intersticial de forma automática
Solo se pueden cerrar automáticamente los anuncios intersticiales reservados directamente; los que se hayan servido a través de la asignación dinámica (es decir, Ad Exchange, AdSense o AdMob) solo pueden cerrarlos los usuarios.

Para que un intersticial se cierre tras un periodo determinado:

  • Incluya el código en la creatividad para cerrar el anuncio intersticial después de que haya transcurrido un periodo de tiempo dado. Puede usar el siguiente fragmento de código como plantilla de este método:

<!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 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 luego Capacidad en dispositivos.

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 utilizar funciones MRAID en sus creatividades de anuncio, debe importar mraid.js a la creatividad, para lo que tiene que incluir <script src="mraid.js"> en ella. 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 con MRAID en la documentación para desarrolladores de Android o iOS.

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?

¿Necesitas más ayuda?

Inicia sesión si quieres ver otras opciones de asistencia para solucionar tu problema.