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

Guía de creación de creatividades lightbox HTML5

Las creatividades lightbox HTML5 utilizan la API de expansión a pantalla completa de DoubleClick Studio. Normalmente, una creatividad expandible tiene un estado expandido con un tamaño predeterminado. Las creatividades lightbox modifican su tamaño de forma dinámica para ocupar la mayor parte del área de visualización disponible del dispositivo o navegador. El área restante externa a 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. A continuación, se incluyen estos tamaños de mayor a menor inventario disponible: 728x90, 160x600, 336x280, 300x600, 468x60, 970x90, 120x600.

Ciclo de vida de una creatividad ligthbox HTML5

En esta sección, se proporciona una visión general de las diferentes secuencias del ciclo de vida de una creatividad lightbox. Esta guía contiene muchas referencias al Enabler, que es la biblioteca de código principal de DoubleClick Studio. Se puede considerar el cerebro de la creatividad. Todos los componentes y llamadas de la API deben pasar por el Enabler. La biblioteca del Enabler es necesaria para todas las creatividades de rich media. Para obtener más información, consulte esta página sobre el Enabler.

Carga de la página

Ningún componente del anuncio debe ejecutarse hasta que se haya inicializado el Enabler. De esta forma, se garantiza que todos los componentes se han cargado correctamente y se puede acceder a los métodos del Enabler antes de que un usuario interactúe con el anuncio. El gestor de carga de la página debe esperar a que el Enabler se inicialice para cargar todos los módulos adicionales.
Una vez que los módulos se han cargado, la creatividad puede solicitar información sobre el entorno en el que se publica, y debe cargar los elementos e inicializar las funciones y componentes. Cuando la creatividad se hace visible, también puede iniciar todas las animaciones.

Expansión iniciada por el usuario

Las creatividades solo pueden solicitar expandirse en respuesta a la interacción de un usuario, que puede ser un clic, un toque o la colocación del cursor sobre un elemento. Cuando el usuario interactúa, el gestor de eventos de la creatividad debe solicitar al Enabler las dimensiones de pantalla completa disponibles para utilizarlas al solicitar la expansión.

En respuesta a la consulta, el Enabler envía el evento FULLSCREEN_DIMENSIONS a la creatividad. La altura y la anchura disponibles se pueden utilizar para calcular dimensiones de expansión personalizadas, que se pueden transmitir como parámetros a Enabler.requestFullscreenExpand(width, height).

Solicitar la expansión al Enabler no garantiza automáticamente que se vaya a producir. Existe la posibilidad de que el usuario cancele la expansión si no tenía la intención de interactuar con la creatividad. Un evento viewport resize indica cuándo se produce la expansión. La creatividad puede aprovechar esta oportunidad para animar la expansión o mostrar de inmediato el estado expandido.

Modificación adaptable del tamaño para el estado expandido

Si el usuario cambia el tamaño del navegador o la orientación del dispositivo mientras la creatividad se expande, esta puede solicitar un nuevo tamaño para el estado expandido. El evento FULLSCREEN_DIMENSIONS indica a la creatividad que las dimensiones del estado expandido están cambiando. En respuesta a este evento, la creatividad llama a Enabler.setResponsiveSize(width, height) para actualizar las dimensiones de este estado.

Cuando el tamaño del contenedor de la creatividad se actualiza con las nuevas dimensiones, se activa un evento viewport resize. La creatividad aprovecha esta oportunidad para actualizar su diseño expandido con las nuevas dimensiones.

Expansión inicializada externamente

Las solicitudes de expansión pueden originarse fuera de la creatividad si un mecanismo externo a la creatividad determina que se debe producir la expansión. Si el Enabler no tiene dimensiones de expansión que pueda utilizar la creatividad, las solicitará mediante el envío de un evento FULLSCREEN_DIMENSIONS. Al igual que cuando se produce una modificación de tamaño adaptable, la creatividad debe calcular las dimensiones de expansión y establecerlas llamando al evento Enabler.setResponsiveSize(width, height). El resto de la expansión sigue el mismo procedimiento que cuando se inicializa por un usuario. Se llama a un evento viewport resize y, en consecuencia, la creatividad procesa el estado expandido.

Comprimir la creatividad

Para que la creatividad empiece a comprimirse, se puede llamar al evento Enabler.requestFullscreenCollapse(), aunque también es frecuente que se inicialice de forma externa. En ambos casos, se activa el evento FULLSCREEN_COLLAPSE_START. En este punto, la creatividad podría animar la compresión. Una vez que concluya la animación, la creatividad se contrae llamando al evento Enabler.finishFullscreenCollapse(). Este método activa una modificación del tamaño de la ventana gráfica para que la creatividad vuelva a tener las dimensiones comprimidas. La creatividad debe procesar el estado comprimido si todavía no lo ha hecho.

Configurar los archivos

Descargue las plantillas de la galería de Rich Media para utilizarlas como base. Las plantillas incluyen código estándar, que se utiliza para implementar el ciclo de vida de la expansión a pantalla completa, y los sitios en los que se debe utilizar el código que procesa la creatividad. También puede utilizar las plantillas de Google Web Designer para crear su creatividad. Incluyen una guía de creación independiente.

  1. Añada el Enabler al 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 provocan retrasos en el lanzamiento de campañas son la ausencia de un borde que contraste y animaciones que no se detienen transcurridos 30 segundos.

Crear una creatividad lightbox HTML5

Las creatividades lightbox se expanden en todas las direcciones para ocupar la pantalla en la que se muestran. Cuando una creatividad lightbox está comprimida (tamaño más pequeño) cabe en una ubicación de anuncio estándar de una aplicación móvil, un sitio web móvil o un ordenador. Cuando un usuario coloca el cursor sobre un anuncio durante dos segundos en un ordenador o lo toca en un dispositivo, se expande más allá del tamaño comprimido para ocupar la mayor parte de la ventana del navegador del ordenador o de la pantalla del dispositivo móvil, y siempre está centrado.

En esta guía, principalmente se explica cómo crear una creatividad lightbox con los métodos de las plantillas de la galería de Rich Media. Al final de la guía, se incluye una sección opcional que explica en mayor profundidad el código estándar que aparece en la parte final de las plantillas. Este código no debería necesitar cambios.

Configuración

  1. Cree dos elementos div en el archivo HTML y proporcione a cada uno un ID adecuado.
    Fragmento de código
    <body>
      <!-- Estado (comprimido) de la invitación -->
      <div id="invitation-state">
        <!-- Añada aquí el contenido contraído -->
        <span id="expand-cta"></span>
      </div>
    
      <!-- Estado (expandido) de interacción -->
      <div id="lightbox-state">
        <!-- Añada aquí el contenido expandido -->
      </div> 
    </body>
    
  2. Aplique estilo a los objetos que ha creado en el archivo CSS con los ID que les haya asignado.
    Fragmento de código
    #invitation-state {
      background-color: #fff;
      background-repeat: no-repeat;
      display: none;
      height: 250px;
      left: 0;
      position: absolute;
      top: 0;
      width: 300px;
    }
    
    #lightbox-state {
      background-color: #fff;
      display: none;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    
    #expand-cta {
      color: #666;
      cursor: pointer;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    
  3. Indique eventos intersticiales facturables. Estos eventos deben ser un subconjunto de los que se registran a través del evento Enabler.counter(eventName) cuando el usuario interactúa con la creatividad. Las creatividades que se pagan según el modelo de puja de coste por interacción se cobran de la siguiente manera:

    1. En el caso de los espacios publicitarios expandibles lightbox, las creatividades se cobran por expansión. 

    2. En el caso de los espacios publicitarios no expandibles (por ejemplo, los anuncios intersticiales), las creatividades se cobran por interacción del usuario. En el inventario de anuncios intersticiales, la creatividad debe registrar los nombres de contador de los eventos que se activan por interacciones del usuario (incluidas las salidas) para que puedan facturar esos eventos en la creatividad.

      En las plantillas, indique los eventos facturables en la matriz chargeableInterstitialEvents. Si la creatividad se publica como un intersticial, estos eventos se registran cuando se cargue el Enabler.

       

      Fragmento de código

      // Actualice la línea siguiente para especificar todos los eventos de contador del
      // estado expandido del anuncio que se activan por la interacción del usuario.
      var chargeableInterstitialEvents = [
        'Clic en el fondo',
        'Un evento inicializado por el usuario',
        'Otro evento inicializado por el usuario'
      ];
  4. Cargue todos los módulos adicionales. Por ejemplo, debe cargar el módulo de GDN para comprobar si la creatividad se publica en una aplicación o como un intersticial. Si utiliza el módulo de vídeo de Studio, debe añadir studio.module.ModuleId.VIDEO a la lista de módulos que se deben cargar.
     

    Fragmento de código

    // Añada a la lista los módulos de Studio adicionales que quiera cargar.
    // No quite el módulo de GDN.
    var modulesToLoad = [studio.module.ModuleId.GDN];

Inicializar los componentes del anuncio

El método preInit() de las plantillas se llama automáticamente en el evento page load del marco del anuncio y se encarga de llamar a parte del código estándar interno y configurar el DOM.  

Fragmento de código

function preInit() {
  // No modifique estas líneas.
  internalPreInit();
  setupDom();
};

El método setupDom() llamado en el fragmento de código anterior se utiliza para configurar referencias a los componentes del DOM de la creatividad como, por ejemplo, el contenedor principal. También se puede utilizar para realizar algunos pasos de inicialización necesarios para componentes o funciones personalizados. Las plantillas también configuran variables como, por ejemplo, creative.isInterstitial y creative.isTouchable, que se pueden utilizar durante la inicialización del anuncio.

Los anuncios lightbox se ejecutan tanto en ordenadores como en dispositivos móviles, por lo que necesita dos imágenes de fondo para los dos diferentes estados de invitación. Una imagen de fondo debe incluir una CTA "tap to expand" (tocar para expandir) para smartphones y tablets y la otra imagen debe contener una CTA "hover to expand" (colocar el cursor sobre el elemento para expandir) para las pantallas de ordenadores. Utilice la variable creative.isTouchable para diferenciar entre estos dos casos.

También debe indicar al Enabler la acción del usuario que activa la expansión de la creatividad cuando se visualiza en ordenadores. Añada una de estas líneas de código en función de la acción que debe expandir la creatividad:

  • Para expandir la creatividad cuando se coloque el cursor sobre ella, añada: 
    Enabler.setHint('expansionTrigger', 'onHover');
  • Para expandir la creatividad por un clic del ratón, añada:
    Enabler.setHint('expansionTrigger', 'onClick');

Fragmento de código

function setupDom() {
  // Configure las referencias a los componentes del DOM.
  creative.dom = {};
  creative.dom.mainContainer = document.getElementById('main-container');
  creative.dom.lightboxExit = document.getElementById('lightbox-exit');
  creative.dom.lightboxState = document.getElementById('lightbox-state');
  creative.dom.lightboxFeature = document.getElementById('lightbox-feature');
  creative.dom.invitationState = document.getElementById('invitation-state');
  creative.dom.expandCta = document.getElementById('expand-cta');

  // No es seguro utilizar otros campos creative.* hasta después de que se haya llamado al método init(),
  // que indica que el Enabler ha inicializado
  // y cargado los módulos adicionales.
  if (creative.isTouchable) {
    creative.dom.expandCta.textContent = 'Tap to expand';
  } else {
    creative.dom.expandCta.textContent = 'Hover to expand';
  }

}

Parte del código estándar que se ha ejecutado al cargarse (internalPreInit()) procesa eventos que indican que se han inicializado el Enabler y los módulos adicionales del Enabler. Una vez que se hayan inicializado el Enabler y los módulos, se llama al método init().

Fragmento de código

function init() {
  // No modifique estas líneas.
  internalInit();
  addListeners();
  show();
}

Añadir procesadores de eventos

Después de configurar el DOM de la creatividad, el siguiente paso consiste en añadir procesadores de eventos a la creatividad. Todos los gestores de interacciones del usuario con el estado expandido de la creatividad deben informar de las interacciones al Enabler.

Si se admite la expansión a pantalla completa, el método onExpandHandler() se debe vincular con eventos click o mouseover. El gestor solicita al Enabler las dimensiones de pantalla completa antes de solicitar la expansión. Tenga en cuenta que no se deben utilizar eventos touchstart ni touchend para activar la expansión, ya que puede que los usuarios toquen sin darse cuenta el anuncio mientras se desplazan por la página. Este tipo de interacción no debe activar la expansión.

El método addFullscreenExpansionListeners() añade todos los procesadores de eventos que sean necesarios para la expansión a pantalla completa. No es necesario modificar este método o añadir procesadores de eventos adicionales para que funcione el ciclo de vida de la expansión a pantalla completa.

Fragmento de código

Añada procesadores al método addListeners().

function addListeners() {
  // Añada procesadores en el estado expandido para informar de las interacciones.
  creative.dom.lightboxFeature.addEventListener('click', function() {
    Enabler.counter('Background Click');
  }, false);

  // Añada más procesadores a los elementos del estado expandido.
  creative.dom.lightboxExit.addEventListener('click', exitClickHandler);

  if (creative.isFullscreenSupported) {
    if (creative.isTouchable) {
      // No utilice eventos touchstart ni touchend para activar
      // la expansión en dispositivos en los que se toque la pantalla. Las creatividades que utilizan esos eventos activan
      // la expansión cuando los usuarios tocan el anuncio mientras se desplazan por la pantalla, lo que se considera una
      // infracción de las políticas de las creatividades lightbox. En su lugar, utilice un evento click,
      // que no activa la expansión cuando el usuario toca el anuncio mientras se desplaza por la pantalla.
      creative.dom.expandButton.addEventListener(
          'click', onExpandHandler, false);
    } else {
      creative.dom.expandButton.addEventListener(
          'mouseover', onExpandHandler, false);
    }

    internalAddFullscreenExpansionListeners();
  }
}

Calcular dimensiones de expansión de pantalla completa personalizadas

Siempre que el usuario interactúa con la creatividad, el método onExpandHandler() solicita las dimensiones de pantalla completa disponibles al Enabler. La anchura y la altura disponibles se transmiten al método  calculateCustomDimensions(), en caso de que quiera expandir la creatividad utilizando un valor igual o inferior a las dimensiones máximas. Esta práctica puede resultar útil para mantener la proporción en el estado expandido. Si expande la creatividad hasta las dimensiones de pantalla completa disponibles, el método puede devolver la anchura y la altura disponibles.

El método calculateCustomDimensions() también se puede llamar fuera del ciclo de vida de la expansión, por ejemplo, si el Enabler detecta que el usuario ha cambiado la orientación del dispositivo o ha modificado el tamaño de la ventana del navegador. También se llama a este método cuando se produce una solicitud de expansión externa. Este método ofrece la posibilidad de volver a calcular el tamaño del contenedor expandido de la creatividad. Esta debe proporcionar las nuevas dimensiones de expansión independientemente de que en ese momento esté expandida o comprimida.

Tenga en cuenta que cuando la creatividad se publica en una aplicación, el Enabler utiliza las dimensiones de pantalla completa disponibles al expandirse aunque se proporcionen dimensiones personalizadas. Se puede utilizar la variable creative.isInApp para detectar este estado.

Fragmento de código

El método calculateCustomDimensions() devuelve un objeto con las propiedades "width" (anchura) y "height" (altura), que indican las dimensiones de expansión de la creatividad.

function calculateCustomDimensions(availableWidth, availableHeight) {
  // Cuando las creatividades se publican en una aplicación, ignoran estos valores de anchura y altura y
  // utilizan las dimensiones de la pantalla para expandirse.
  var dimensions = {
    'width': availableWidth,
    'height': availableHeight
  };
  return dimensions;
}

Gestionar eventos viewport resize

Los eventos viewport resize se producen cuando la creatividad se expande y se comprime. Estos eventos indican a la creatividad cómo procesar el estado expandido y comprimido. También se producen cuando se modifica el tamaño de la ventana del navegador o cambia la orientación del dispositivo y cuando varían las dimensiones de expansión. Estos casos se pueden diferenciar de la siguiente forma:

  • Cuando la creatividad se comprime, se asigna el valor true a la variable creative.isCollapsing. Para procesar el estado comprimido, la creatividad llama al método renderCollapsedView().
  • Cuando se asigna el valor false a la variable creative.isCollapsing, la creatividad se está expandiendo o se ha producido un evento viewport resize mientras la creatividad se expandía. Estos dos casos se combinan porque la creatividad debe responder a ambos procesando el estado expandido a través del método renderExpandedView(). Si quiere añadir una animación antes de la expansión, también puede asignar el valor false a la variable creative.isExpanded cuando la creatividad se esté expandiendo.

Durante la expansión y la compresión, asegúrese de iniciar y detener el temporizador "Panel Expansion" (Expansión del panel).

Fragmento de código

function viewportResizeHandler() {
  if (creative.isCollapsing) {
    Enabler.stopTimer('Panel Expansion');
    Enabler.counter('Collapse Ctr');
    renderCollapsedView();
  } else {
    if (!creative.isExpanded) {
      // También puede animar la expansión antes de procesar el diseño expandido.         
      Enabler.startTimer('Panel Expansion');
      Enabler.counter('Expanded Ctr');
    }
    renderExpandedView();
  }
}

Procesar la creatividad

Los métodos renderExpandedView() y renderCollapsedView() se utilizan para mostrar las vistas expandidas y comprimidas de la creatividad, así como para actualizar la variable de estado creative.isExpanded. El método renderCollapsedView() también se utiliza para mostrar la creatividad cuando se hace visible en la página por primera vez.

Fragmento de código

function renderExpandedView() {
  creative.dom.lightboxState.style.display = 'block';
  creative.dom.lightboxExit.style.display = 'block';
  creative.dom.invitationState.style.display = 'none';
  creative.isExpanded = true;
}

function renderCollapsedView() {
  creative.dom.lightboxState.style.display = 'none';
  creative.dom.lightboxExit.style.display = 'none';
  creative.dom.invitationState.style.display = 'block';
  creative.isExpanded = false;
  creative.isCollapsing = false;
}

(Opcional) Añadir una animación de compresión

A diferencia de las animaciones de expansión, las animaciones de compresión deben producirse antes de que se modifique el tamaño del marco de la creatividad de acuerdo con las dimensiones comprimidas. Las animaciones de compresión se pueden añadir en el método collapseStartHandler(), que marca el comienzo del proceso de compresión de la creatividad.

Fragmento de código

function collapseStartHandler() {
  // También puede producirse una animación antes de la compresión.

  // Tenga en cuenta que la creatividad se comprime para que el método viewportResizeHandler sepa cómo
  // volver a dibujar la creatividad.
  creative.isCollapsing = true;
  Enabler.finishFullscreenCollapse();
}

Gestionar clics de salida

El método exitClickHandler() controla los clics de salida del estado expandido de la creatividad.

Hay problema conocido que se produce cuando se publican creatividades en una aplicación en entornos iOS: si se llama a la comprensión en un salida, la página de destino se cierra inmediatamente. Según la política, el anuncio lightbox se debe comprimir cuando el usuario hace clic en una página de destino. Sin embargo, cuando la creatividad se publica en una aplicación en entornos iOS, esta acción evita que el usuario acceda realmente a la página de destino, por lo que se permite que el anuncio se mantenga expandido.

Fragmento de código

function exitClickHandler() {
  // Problema conocido de creatividades que se publican en una aplicación en entornos iOS: cuando se llama a la comprensión en una salida,
  // la página de destino se cierra inmediatamente, por lo que la creatividad se deja expandida
  // al salir.
  // En otros entornos, se requiere comprimir el anuncio al hacer clic para salir
  // de acuerdo con la política.
  if (!(creative.isInApp && isMobile.iOS())) {
    Enabler.requestFullscreenCollapse();
  }

  Enabler.stopTimer('Panel Expansion');
  Enabler.exit('Background Exit');
}

 


Este es el final de la sección de la guía que cubre el código que los desarrolladores deben rellenar. El resto de la guía ofrece una descripción general del código estándar que incluyen las plantillas. 

 

Código estándar que no debería necesitar cambios

Las funciones estándar incluidas en las plantillas gestionan gran parte del ciclo de vida de la inicialización y la expansión a pantalla completa. Estos métodos no deberían necesitar cambios, por lo que las notas se proporcionan a modo de referencia.

Módulos de inicialización y carga

El método internalPreInit() es el gestor de carga de la ventana y el primer método que se debe llamar. Configura variables de estado de la creatividad como, por ejemplo, creative.isTouchable y creative.isExpanded, a través del método de ayuda setupCreativeState(). A continuación, una vez que se inicializa el Enabler, se cargan los módulos de la matriz modulesToLoad.

Fragmento de código

function internalPreInit() {
  // Inicialice variables de estado como, por ejemplo, creative.isExpanded.
  setupCreativeState();

  if (Enabler.isInitialized()) {
    // Cargue el módulo de GDN antes de la inicialización.
    Enabler.loadModules(modulesToLoad, modulesLoadedHandler);
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, function() {
      Enabler.loadModules(modulesToLoad, modulesLoadedHandler);
    });
  }
}

Una vez que se hayan terminado de cargar todos los módulos, el Enabler llama al método modulesLoadedHandler(), que se ha proporcionado a modo de devolución de llamada. Se recupera el objeto de configuración de la Red de Display de Google y se utiliza para establecer las variables de estado creative.isInApp y creative.isInterstitial.

Después de que se establezca el modo de expansión, se llama a Enabler.queryFullscreenSupport() para determinar si se admite la expansión a pantalla completa y se establece la variable creative.isFullscreenSupported

Fragmento de código

function modulesLoadedHandler() {
  studio.sdk.gdn.getInitializedConfigByCallback(function(gdnConfig) {
    creative.isInApp =
        (gdnConfig.getClientEnvironment().browserClass ==
         studio.sdk.gdn.BrowserClass.IN_APP);
    // gdnConfig.isInterstitial se establece a través de una función de devolución de llamada.
    gdnConfig.isInterstitial(function(state) {
      creative.isInterstitial = state;
      Enabler.addEventListener(
          studio.events.StudioEvent.FULLSCREEN_SUPPORT, function(e) {
            creative.isFullscreenSupported = e.supported;
            init();
          });
      Enabler.queryFullscreenSupport();
    });
  });
}

A continuación, se llama al método init() (descrito anteriormente), que a su vez llama al método internalInit() para que vincule el procesador viewportResizeHandler() al evento window resize. Asimismo, el modo de expansión se establece en lightbox.

Como se habrá dado cuenta, no se ha añadido un botón de cierre al contenido. Cuando la creatividad se publica, se muestra automáticamente un botón de cierre estándar lightbox sobre ella. , Al establecer el modo de expansión en lightbox, se garantiza la implementación de las siguientes funciones de lightbox cuando la etiqueta se publica 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

Por último, se procesa la creatividad. Si esta se publica como un intersticial, la vista expandida se procesa a través del método renderExpandedView() y los eventos especificados en la matriz chargeableInterstitialEvents se registran como eventos facturables con el Enabler. Si la creatividad no se publica como un intersticial, el estado de la invitación se procesa llamando al método renderCollapsedView() una vez que la creatividad es visible.

Fragmento de código

function internalShow() {
  if (creative.isInterstitial) {
    // Procese la creatividad en el estado expandido dentro del espacio publicitario actual.
    renderExpandedView();
    // Registre los eventos facturables que se hayan especificado anteriormente en la matriz
    // chargeableInterstitialEvents con el Enabler.
    registerChargeableInterstitialEvents();
  } else {
    // Carga progresiva
    if (Enabler.isVisible()) {
      renderCollapsedView();
    }
    else {
      Enabler.addEventListener(
          studio.events.StudioEvent.VISIBLE, renderCollapsedView);
    }
  }
}

Gestores de eventos de expansión y compresión

El ciclo de vida de la expansión a pantalla completa es un proceso asíncrono que progresa a través de eventos. El método internalAddFullscreenExpansionListeners(), al que se llama desde el método addListeners() anterior, añade los métodos adecuados como gestores para los eventos FULLSCREEN_DIMENSIONS, FULLSCREEN_EXPAND_START y FULLSCREEN_COLLAPSE_START. Este método también llama a Enabler.setResponsiveExpanding() para indicar que la creatividad va a comportarse de forma adaptable cuando se expanda a pantalla completa. Es importante llamar a este método antes de que la creatividad se expanda por primera vez, ya que posteriormente se ignorará en caso de que se llame.

Como se ha indicado anteriormente, el método onExpandHandler() está vinculado con las interacciones de los usuarios. Si el usuario interactúa con la creatividad mientras está comprimida, el gestor inicia el proceso de expansión solicitando las dimensiones de pantalla completa.

Fragmento de código

function onExpandHandler() {
  if (creative.isExpanded) {
    // Si la creatividad ya está expandida, no ocurrirá nada.
    return;
  }

  // Solicite las dimensiones disponibles para utilizarlas en la expansión.
  creative.shouldRequestExpansion = true;
  Enabler.queryFullscreenDimensions();
}

El método fullscreenDimensionsHandler() se vincula al evento FULLSCREEN_DIMENSIONS. Recupera las dimensiones disponibles del objeto de evento y las transmite al método calculateCustomDimensions(). Si se produjera una interacción del usuario y se asignara el valor true a creative.shouldRequestExpansion, se solicitaría la expansión. En caso contrario, las dimensiones de expansión actualizadas se transmitirían a Enabler.setResponsiveSize(width, height) como respuesta a una modificación de tamaño adaptable.

Fragmento de código

function fullscreenDimensionsHandler(e) {
  // Cuando se publican en una aplicación, las creatividades siempre se expanden o modifican su tamaño para ocupar la pantalla completa.
  // Se ignoran las dimensiones de expansión personalizadas determinadas anteriormente.
  var availableWidth = e.width;
  var availableHeight = e.height;

  // Calcule las dimensiones personalizadas.
  var dimensions = calculateCustomDimensions(availableWidth, availableHeight);

  // Si se solicitan las dimensiones en respuesta a la interacción de un usuario,
  // la creatividad se expande.
  // Las creatividades que se publican en una aplicación ignoran los valores de anchura y altura especificados.
  if (creative.shouldRequestExpansion) {
    Enabler.requestFullscreenExpand(dimensions.width, dimensions.height);
    creative.shouldRequestExpansion = false;
  } else {
    // Se ha producido un evento responsive resize, por lo que debe actualizar el tamaño del anuncio.
    Enabler.setResponsiveSize(dimensions.width, dimensions.height);
  }
}

El método expandStartHandler() se vincula al evento FULLSCREEN_EXPAND_START y responde llamando a Enabler.finishFullscreenExpand() para completar el proceso de expansión.

Nota: No puede confiar en que el evento FULLSCREEN_EXPAND_START procese el estado expandido de la creatividad. No existen garantías de que este evento vaya a producirse antes de que se modifique el tamaño del marco del anuncio. En su lugar, el estado expandido de la creatividad se debe procesar en respuesta a los eventos window resize, tal y como se indicaba anteriormente en el método viewportResizeHandler().

Fragmento de código

function expandStartHandler() {
  Enabler.finishFullscreenExpand();
}

Se llama al método collapseStartHandler() en respuesta al evento FULLSCREEN_COLLAPSE_START, que marca el comienzo del proceso de compresión. Se explica con más detalle arriba.

Detección móvil

Los métodos de ayuda isMobile y hasTouchScreen() detectan si la creatividad está en un entorno móvil.

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()) &&
        hasTouchScreen();
  }
};

var hasTouchScreen = function() {
  var n = !1, o = function(n) {
    return -1 !== window.navigator.userAgent.toLowerCase().indexOf(n);
  };
  return ('ontouchstart' in window || navigator.maxTouchPoints > 0 ||
          navigator.msMaxTouchPoints > 0) &&
             (o('NT 5') || o('NT 6.1') || o('NT 6.0') || (n = !0)),
         n;
};

¿Te ha sido útil este artículo?