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.
Expansión a la derecha Expansión a la izquierda
Configuración- En el HTML, cree tres paneles:
- Panel principal: contiene tanto paneles contraídos como expandidos, incluidas las diferentes direcciones de expansión.
- Panel contraído: tiene contenido de panel contraído.
- 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:
- 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 CSSmarginLeft
ymarginTop
del elemento de cuerpo con una posición relativa. - Utilice el método de Enabler
setIsMultiDirectional
para activar las expansiones en varias direcciones. - 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.
- Utilice el método de Enabler
Ejemplo de diseño de panel |
700 x 350: panel principal |
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ñ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.
#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;
}
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
ytop
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
yopt_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)
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.
}
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.
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);
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.