Guía de compilación de creatividades desplegables HTML5

Configurar una creatividad expandible en varias direcciones

Siguiente: Cómo llamar directamente a métodos de MRAID

Puede configurar una creatividad para que se expanda en diferentes direcciones dependiendo del lugar de la página en que se publique el anuncio. Programará la creatividad para que detecte su posición y determine en qué dirección debe expandirse. Por ejemplo, al habilitar la función de expansión en varias direcciones (MDE), puede hacer que la misma creatividad se expanda hacia la derecha cuando se publique en el lateral izquierdo de la página y que lo haga hacia la izquierda cuando esté en el lateral derecho de la página.

2 expanding ad images, one on left with inpage ad that expands right, and one on right with inpage ad that expands left

Expansión a la derecha Expansión a la izquierda

Configuración

En el HTML, cree tres paneles:
1. Panel principal: contiene tanto paneles contraídos como expandidos, incluidas las diferentes direcciones de expansión.
2. Panel contraído: tiene contenido de panel contraído.
3. Panel expandido: tiene contenido de panel expandido.
En el archivo CSS, diseñe los tres objetos para reflejar la posición del anuncio y la dirección de expansión.
En el archivo JavaScript, haga lo siguiente:
1. Utilice el método de Enabler setExpandingPixelOffsets para definir los desplazamientos del panel contraído. Este desplazamiento no afecta al entorno de pruebas local. Sin embargo, cuando se publica el anuncio, la parte contraída del anuncio se mostrará en las coordenadas 0, 0. Este método define las propiedades de CSS marginLeft y marginTop del elemento de cuerpo con una posición relativa.
2. Utilice el método de Enabler setIsMultiDirectional para activar las expansiones en varias direcciones.
3. Utilice el método de Enabler getExpandDirection para determinar la dirección de expansión del anuncio y modificar dinámicamente la posición y la animación del panel expandido en consecuencia.

Ejemplo de diseño de panel

Multidirectional: Main page in bright green 700x350; collapsed inpage in brown 300x250; expanding in turquoise bottom and left, 500x300

_{700 x 350: panel principal

300 x 250: panel contraído

500 x 300: panel expandido}

Crear objetos

Cree tres objetos en el archivo HTML con etiquetas <div> y, a continuación, asígneles un ID a cada uno.

HTML de ejemplo

<body>
  <div id="main-panel">
     <div id="collapsed-panel">
       <!-- Añada aquí el contenido contraído. -->
     </div>
     <div id="expanded-panel">
       <!-- Añada aquí el contenido expandido. -->
     </div>
   </div>
</body>

Diseñar los objetos

Diseñe los objetos que ha creado en el CSS usando los ID que les ha asignado.

Posicione siempre el panel principal en 0,0 y asegúrese de que el tamaño es lo suficientemente grande para contener el panel contraído y todas las direcciones de expansión posibles. Calcule el tamaño del panel principal de la siguiente manera:
- Ancho del panel principal = ancho del panel expandido + (ancho del panel expandido - ancho del panel contraído)
- Altura del panel principal = altura del panel expandido + (altura del panel expandido - altura del panel contraído)
- Ejemplo
  Se usa la imagen mostrada anteriormente:
  - ancho = 500 px + (500 px - 300 px) = 700 px
  - altura = 300 px + (300 px - 250 px) = 350 px
Posicione siempre el panel contraído en el centro del panel principal. Calcule esta posición del siguiente modo:
- Panel contraído en la izquierda = ancho del panel expandido [menos] ancho del panel contraído
- Panel contraído en la parte superior = altura del panel expandido [menos] altura del panel contraído
- Ejemplo
  Se usa la imagen mostrada anteriormente:
  - izquierda = 500 px - 300 px = 200 px
  - parte superior = 300 px - 250 px = 50 px
La posición del panel expandido depende de la dirección de expansión, pero debe cambiarse dinámicamente usando JavaScript. En este ejemplo, se añadieron clases para cada posible dirección, incluidas las posiciones izquierda y superior. Más adelante, se accede a estas clases en el archivo JavaScript dependiendo de la dirección que detecte el Enabler.

Estilos de ejemplo

#main-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 700px;
  height: 350px;
}
   
#collapsed-panel {
  position: absolute;
  left: 200px;
  top: 50px;
  width: 300px;
  height: 250px;
}
      
#expanded-panel {
  position: absolute;
  width: 500px;
  height: 300px;
}
      
.direction-tl {
  left: 0px;
  top: 0px;
}
      
.direction-tr {
  left: 100px;
  top: 0px;
}
      
.direction-bl {
  left: 0px;
  top: 200px;
}
      
.direction-br {
  left: 100px;
  top: 200px;
}

Definir desplazamientos de posicionamiento

Defina los desplazamientos de píxeles del panel contraído en el anuncio y las dimensiones del panel expandido. Esto ayuda a Studio a identificar la posición del anuncio en la página del sitio en el que se está publicando y la dirección de expansión. Para ello, utilice el método setExpandingPixelOffsets después de que se inicialice Enabler:

Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);

Como en el diseño de panel contraído, los valores que defina para los parámetros left y top deben posicionar el área del panel contraído en el centro del panel principal. Calcule estas posiciones del siguiente modo:
- left = el ancho del panel expandido menos el ancho del panel contraído
- top = la altura del panel expandido menos la altura del panel contraído
Definir los valores de opt_expandedWidth y opt_expandedHeight para la expansión en varias direcciones es distinto a establecer la función de expansión básica. En lugar de definirlos para que coincidan con las dimensiones del panel expandido, debe definir los valores para que coincidan con las dimensiones del panel principal. Calcule estos valores del siguiente modo:
- opt_expandedWidth = ancho del panel expandido + (ancho del panel expandido - ancho del panel contraído)
- opt_expandedHeight = altura del panel expandido + (altura del panel expandido - altura del panel contraído)

Código de ejemplo

Enabler.setExpandingPixelOffsets(
    200,  // Desplazamiento hacia la izquierda del anuncio expandido.
    100,  // Desplazamiento hacia arriba del anuncio expandido.
    700,  // Anchura en expansión del anuncio.
    350); // Altura en expansión del anuncio.
      
// Indica si el anuncio comenzará en estado expandido. El valor predeterminado es false.
Enabler.setStartExpanded(false);

// Habilita la expansión multidireccional en la mejor
// dirección disponible, según la posición del anuncio en la página.
// El valor predeterminado es false.
Enabler.setIsMultiDirectional(true);

if (Enabler.isInitialized) {
  enablerInitHandler();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}

function enablerInitHandler() {
  // Añade código para cargar los elementos de la creatividad una vez que se inicializa
  // el Enabler.
}

También puede establecer estos parámetros en la interfaz de usuario de Studio tras subir los elementos. Consulte también Propiedades de la vista previa de las creatividades expandibles.

Cambiar dinámicamente la posición del panel expandido

Debe cambiar la posición del panel expandido en el panel principal dependiendo de la dirección de expansión. Para ello, determine la dirección de expansión mediante el método de Enabler getExpandedDirection y cambie la creatividad en consecuencia cuando se active el evento EXPAND_START. En el ejemplo de CSS anterior, se han definido diferentes clases para cada dirección de expansión. En el siguiente fragmento de código, se ha asignado un className al objeto del panel expandido en función de la dirección de expansión.

Código de ejemplo

function expandAd(e) {
  Enabler.requestExpand();
  Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START,
      function() {
        document.getElementById('expanded-panel').className = 'direction-' + Enabler.getExpandDirection();
        // Añade código para la animación de la expansión deseada.
        Enabler.finishExpand();
  });

  Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH,
      function() {
        // Añade código para mostrar el panel expandido y cargar los elementos o
        // iniciar la animación.
  });
}

document.getElementById('expand-button').addEventListener('click', expandAd, false);

Obtener una vista previa

Al abrir una vista previa de la creatividad MDE de forma local aparecen todas las direcciones de expansión posibles cada vez que expande el anuncio. Se muestran en el siguiente orden:

tl: superior izquierda
tr: superior derecha
bl: inferior izquierda
br: inferior derecha

Al abrir una vista previa en Studio, solo se muestra la dirección que detecta Studio. Para probar y obtener la vista previa de las diferentes direcciones, debe posicionar la creatividad en la pestaña de vista previa para probar dicha dirección.

¿Te ha resultado útil esta información?

¿Cómo podemos mejorar esta página?

Guía de compilación de creatividades desplegables HTML5

Configurar una creatividad expandible en varias direcciones

Ejemplo de diseño de panel

Artículos relacionados

¿Te ha resultado útil esta información?

¿Necesitas más ayuda?

Prueba estos pasos: