Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal

Guía de creación de lightbox HTML5 multipantalla

Las creatividades lightbox HTML5 multipantalla usan la API de expansión de pantalla completa de DoubleClick Studio. Normalmente, una creatividad expandible tiene un estado desplegado con un tamaño predeterminado. Las creatividades lightbox adaptables a la pantalla cambian de tamaño de forma dinámica para llenar la mayor parte del área de visualización disponible del dispositivo o navegador. El área restante fuera de la creatividad aparece cubierta con un fondo gris semitransparente y, en la esquina superior derecha, se muestra un botón de cierre.

Para abarcar todas las pantallas, como mínimo, cree estados de invitación en los tamaños 320 x 50 y 300 x 250. Para obtener una cobertura aún mayor, considere la posibilidad de crear tamaños de invitación populares (enumerados del inventario más disponible al menos): 728 x 90, 160 x 600, 336 x 280, 300 x 600, 468 x 60, 970 x 90, 120 x 600.

Configurar archivos

Descargue los archivos de muestra de la base de datos de plantillas de la galería de Rich Media para utilizarlos como punto de partida o como referencia.

  1. Añada el Enabler y defina la carga progresiva en su archivo HTML.
  2. En todos los estados de invitación con fondos parcialmente negros, blancos o transparentes, se debe añadir un borde que contraste. Por ejemplo, en un estado de invitación con fondo blanco, se deberá añadir un borde negro de un píxel
  3. Defina todas las animaciones y vídeos para que se detengan tras un periodo igual o inferior a 30 segundos tras la carga.
La creatividad terminada debe cumplir los requisitos técnicos de lightbox. Dos de los problemas más habituales de control de calidad que causan retrasos del lanzamiento de campañas son la ausencia de un borde que contraste y que las animaciones no se detengan en los primeros 30 segundos.

Crear una creatividad HTML5 de despliegue a pantalla completa

Las creatividades que se despliegan a pantalla completa lo hacen en todas las direcciones hasta que llenan todo el espacio de la pantalla en la que se muestran. El tamaño contraído más pequeño de una creatividad HTML5 desplegable a pantalla completa encaja dentro de una ubicación de anuncio estándar en sitios web para escritorio o móviles, o en aplicaciones web. Cuando un usuario coloca el cursor sobre él durante dos segundos en un equipo de escritorio o toca un dispositivo, el anuncio se despliega más allá del tamaño contraído para rellenar la mayor parte de la ventana del navegador de escritorio o la pantalla del dispositivo móvil, y siempre está centrado.

Configurar

  1. Cree dos elementos DIV en su archivo HTML, y dé a cada uno un ID lógico. Añada también un botón para desplegar el anuncio y un botón transparente para un clic de destino de fondo. Fragmento de código:
    <body>
        <!-- Invitation (Collapsed) State -->
        <div id="invitation">
          <!-- Add Collapsed content here -->
          <button id="fullscreenBtn"></button>
        </div>
    
        <!-- Engaged (Expanded) State -->
        <div id="engaged">
          <!-- Add Expanded content here -->
          <button id="engagedBgExit"></button>
        </div> 
    </body>
    
  2. Asigne un estilo a los objetos que ha creado en el CSS usando los ID correspondientes. Fragmento de código:
    #invitation {
      background-color: #fff;
      background-repeat: no-repeat;
      display: none;
      height: 250px;
      left: 0;
      position: absolute;
      top: 0;
      width: 300px;
    }
    
    #engaged {
      background-color: #fff;
      display: none;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    
    #fullscreenBtn {
      background-color: transparent;
      color: #666;
      cursor: pointer;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
    }
    
    #engagedBgExit {
      background-color: transparent;
      color: #666;
      cursor: pointer;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
    }
    
    

Defina una imagen de fondo adecuada para el panel de invitación

En el caso de anuncios lightbox que se ejecutarán en dispositivos móviles y de escritorio, es importante disponer de dos imágenes de fondo, una para cada estado de invitación. Una imagen de fondo debe incluir una FI "Tocar para desplegar" para smartphones/tablets y la otra imagen debe tener una FI "Cursor por encima para ampliar" para las pantallas de escritorio.

  1. Cree una función que determine si la creatividad se encuentra en un navegador para móviles o no, y defina la imagen de fondo en función del valor booleano devuelto. Fragmento de código:
    var isMobile = {
      Android: function() {
        return navigator.userAgent.match(/Android/i);
      },
      BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
      },
      iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
      },
      Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
      },
      Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
      },
      any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
      }
    };
    
  2. Llame al método de detección del entorno definido anteriormente en su gestor para el evento StudioEvent.PAGE_LOADED de su archivo HTML o JavaScript. Fragmento de código:
    var colState = document.getElementById("invitation");
      if (isMobile.any()){
        // Mostrar imagen de botón de móvil.
        colState.style.backgroundImage="url('Invitation300x250_Tap.jpg')";
      } else {
        // Mostrar imagen de botón de escritorio.
        colState.style.backgroundImage="url('Invitation300x250_Hover.jpg')";
      }
    

Añadir métodos y procesadores de despliegue

La expansión de un anuncio es un proceso asíncrono que sigue este orden exacto:

  1. La creatividad solicita el despliegue de pantalla completa usando el método requestFullscreenExpand().
  2. Esta solicitud coordina el evento FULLSCREEN_EXPAND_START, que permite a la creatividad solicitar la animación del despliegue.
  3. La creatividad solicita completar el despliegue usando el método finishFullscreenExpand().
  4. Esta solicitud coordina el evento FULLSCREEN_EXPAND_FINISH, que permite a la creatividad solicitar animaciones o funciones adicionales en el panel desplegado.
  5. (Opcional) Para determinar el tamaño máximo disponible para el despliegue, si desea desplegar a un tamaño igual o inferior a las dimensiones máximas, llame al método queryFullscreenDimensions().
Fragmento de código:
// Definir un procesador de eventos adecuado para el botón de despli.
var supportsTouch = 'ontouchstart' in window && isMobile.any();
var invitationBtn = document.getElementById('fullscreenBtn');

if (supportsTouch) {
  invitationBtn.addEventListener('click', handleExpandEvent);
} else {	
  invitationBtn.addEventListener('mouseover', handleExpandEvent);
}

function handleExpandEvent(event){
  Enabler.queryFullscreenDimensions();
};

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS,
    function(event) {
    // Computar dimensiones desplegadas según el máximo de
    // dimensiones disponibles (event.width, event.height).  Si desea permitir que el Enabler elija
    // las dimensiones desplegadas óptimas según el espacio disponible, llame a
    // requestFullscreenExpand() sin parámetros.
    Enabler.requestFullscreenExpand();

    // En lugar de ello, para desplegar a las dimensiones máximas disponibles, transfiera las dimensiones
    // devueltas como parámetros de requestFullscreenExpand.
    // Enabler.requestFullScreenExpand(event.width, event.height);
    }
);

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
    function() {
      document.getElementById('engaged').style.display = 'block'
      document.getElementById('invitation').style.display = 'none';
      Enabler.finishFullscreenExpand(); 
    }
);

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
    function() { 
      /* Llamar a la función necesaria, si la hay. */
    }
);

Añadir métodos y procesadores de contracción

Al igual que la expansión de un anuncio, la contracción es un proceso asíncrono que sigue este orden exacto:

  1. La creatividad solicita la contracción usando el método requestFullscreenCollapse().
  2. Esta solicitud coordina el evento FULLSCREEN_COLLAPSE_START que permite a la creatividad solicitar la animación de contracción.
  3. La creatividad solicita completar la contracción usando el método finishFullscreenCollapse().
  4. Esta solicitud coordina el evento FULLSCREEN_COLLAPSE_FINISH, que permite a la creatividad solicitar animaciones o funciones adicionales en el panel contraído.
Fragmento de código:
var engagedBgExit = document.getElementById('engagedBgExit');

engagedBgExit.addEventListener('click', handleEngagedExitEvent);

function handleEngagedExitEvent(event) {
  Enabler.exit('Engaged Background Exit');
};

Enabler.addEventListener(studio.events.StudioEvent.EXIT, function(event) {   
  Enabler.requestFullscreenCollapse(); 
});

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
    function() {
      document.getElementById('invitation').style.display = 'block'
      document.getElementById('engaged').style.display = 'none';
      Enabler.finishFullscreenCollapse(); 
    }
);

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
    function(){ 
      /* Llamar a la función necesaria, si la hay. */
    }
);

Definir el modo de despliegue de lightbox

Se dará cuenta de que no hay botón de cierre añadido al contenido. Se muestra automáticamente un botón de cierre de lightbox estándar en la creatividad cuando se publica. Para ver su creatividad como lightbox en el entorno de vista previa de Studio, añada la siguiente línea de código después de que se haya inicializado el componente Enabler:
Enabler.setHint('expansionMode', 'lightbox');

Definir el modo de despliegue como lightbox garantiza que se implementan las siguientes funcionalidades de lightbox cuando la etiqueta se publique en un entorno de GDN.

  • Retraso de dos segundos al pasar el cursor por encima
  • Expansión de la barra de progreso en el estado de invitación (contraído)
  • Despliegue del estado de interacción en el centro de la página web
  • Botón de cierre (esquina superior derecha) en el estado de interacción
  • Fondo translúcido gris en el estado de interacción

Corregir salidas de in-app de iOS

Cuando se publican creatividades in-app en entornos de iOS, existe un problema conocido por el cual al llamar a la contracción de una salida, la página de destino se cierra de forma inmediata.

Cómo corregir las salidas in-app de iOS
  1. Compruebe el entorno de publicación antes de que se llame a una salida. En Google Web Designer, utilice un evento "pageactivated" en una función personalizada o de forma inmediata antes de la llamada a la salida.

    Código de muestra de la detección del entorno

    
    var standalone = window.navigator.standalone,
        userAgent = window.navigator.userAgent.toLowerCase(),
        safari = /safari/.test(userAgent),
        ios = /iphone|ipod|ipad/.test(userAgent);
    
    if (ios) {
      if (!standalone && safari) {
        gwd.iOSEnvironment = "web";
      } else if (standalone && !safari) {
        gwd.iOSEnvironment = "fullscreen";
      } else if (!standalone && !safari) {
        gwd.iOSEnvironment = "app";
      }
    }
  2. Antes de cada llamada de salida, compruebe si el anuncio se está publicando dentro de una aplicación de iOS. 
    1. En Google Web Designer, si usa componentes de Área Sensible, cambie el código de forma manual en la vista de códigos. El nombre de la función de área sensible incluye el ID de área sensible, por ejemplo, un área sensible denominada "ExpandExitTaparea" tiene una función llamada "gwd.auto_ExpandExitTapareaAction".

      Función de área sensible predefinida de Google Web Designer

      
      if (gwd.iOSEnvironment == "app") {
        gwd.actions.gwdDoubleclick.exit('gwd-ad', 'My Exit', 'http://google.com', false, true);
      } else {
        gwd.actions.gwdDoubleclick.exit('gwd-ad', 'My Exit', 'http://google.com', true, true);
      }
      El método de salida incluye dos parámetros booleanos al final. El primer parámetro consiste en decidir si se va a ocultar la salida, que debería ser falso para las creatividades in-app. El segundo parámetro consiste en decidir si se va a detener la reproducción del contenido multimedia (vídeo o sonido), que debería ser verdadero para todas las creatividades.
  3. Suba y pruebe la creatividad para asegurarse de que la página de destino permanece abierta.

¿Te ha sido útil este artículo?