Guía de creación de lightbox HTML5 adaptable a la pantalla

Las creatividades lightbox HTML5 adaptables a la pantalla usan la API de despliegue de pantalla completa de DoubleClick Studio. Normalmente, una creatividad desplegable 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.

Configuración

  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 CTA "Tocar para desplegar" para smartphones/tablets y la otra imagen debe tener una CTA "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

El despliegue 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 despliegue.
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 el despliegue 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
  • Despliegue de la barra de progresos 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
Android-style image of the author of this page

Sarah es experta en DoubleClick Studio y autora de esta página de ayuda. Ayúdala a mejorar este artículo escribiendo tus sugerencias más abajo.

¿Te ha sido útil este artículo?