Cómo posicionar un anuncio en la página y establecer la dirección de expansión
Dos de las funciones básicas de una creatividad expandible es ayudar al sitio web a identificar el objeto de su archivo que representa el panel contraído y determinar la dirección de la expansión. Dado que el objeto principal del archivo es mayor que el área del panel contraído y que la expansión puede configurarse para que tenga lugar en cualquier dirección es importante definir el área contraída, de manera que la página sepa dónde procesar el anuncio.
Cuando el anuncio se publica en la página de un sitio, la página posiciona la creatividad en función de la desviación de píxeles superior e izquierda que establece y hace coincidir el tamaño de su creatividad con el espacio publicitario. A continuación, determina la dirección de expansión. Para ello, debe configurar sus archivos en consecuencia:
- En el HTML, cree tres paneles:
- Panel principal: contiene tanto paneles contraídos como expandidos.
- 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, utilice el método de Enabler
setExpandingPixelOffsetspara alinear el panel contraído con la ubicación del anuncio. En el ejemplo que se muestra a continuación, el desplazamiento hacia la izquierda corresponde a 200 píxeles.
300 x 250 = contraído
500 x 300 = expandido
Para asegurarse de que el anuncio se expanda correctamente cuando se muestra dentro de una aplicación, debe diseñar la creatividad de forma que se expanda hacia abajo, o bien para ocupar la pantalla completa. Información sobre cómo habilitar la expansión a pantalla completa
Cree tres objetos en su archivo HTML mediante etiquetas <div> y asígneles los ID correspondientes.
Fragmento de código:
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Añada contenido contraído aquí. -->
</div>
<div id="expanded-panel">
<!-- Añada contenido expandido aquí. -->
</div>
</div>
</body>
Diseñe los objetos que ha creado en el CSS usando los ID que les ha asignado.
- El panel principal debe tener las mismas dimensiones que el panel desplegado y debe posicionarse siempre en 0,0.
- La posición del panel contraído depende de la dirección de expansión:
- Despliegue a la derecha o derecha y abajo
- izquierda = 0 px
- parte superior = 0 px
- Despliegue a la izquierda o izquierda y abajo
- izquierda = ancho del panel desplegado [menos] ancho del panel contraído (por ejemplo, 500 px - 300 px = 200 px)
- parte superior = 0 px
- Despliegue a la derecha y arriba
- izquierda= 0 px
- parte superior = altura del panel expandido [menos] altura del panel contraído (por ejemplo, 300 px - 250 px = 50 px)
- Expansión a la izquierda y arriba
- izquierda = ancho del panel expandido [menos] ancho del panel contraído (por ejemplo, 500 px - 300 px = 200 px)
- parte superior = altura del panel expandido [menos] altura del panel contraído (por ejemplo, 300 px - 250 px = 50 px)
- Despliegue a la derecha o derecha y abajo
- Posicione siempre el panel expandido en 0,0.
#main-panel {
position: absolute;
left: 0px;
top: 0px;
width: 500px;
height: 300px;
}
#collapsed-panel {
position: absolute;
left: 200px;
top: 0px;
width: 300px;
height: 250px;
}
#expanded-panel {
position: absolute;
left: 0px;
top: 0px;
width: 500px;
height: 300px;
}
Establezca los desplazamientos de píxeles del panel contraído en el anuncio y defina los tamaños de las dimensiones del panel expandido. Esto ayuda a Studio a identificar la posición del anuncio en la página del sitio web en el que se está publicando y la dirección de expansión. Para ello, utilice el método setExpandingPixelOffsets.
Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);
- Al igual que ocurre con los estilos de los paneles contraídos, los valores que defina para los parámetros
leftytopdependen de la dirección de expansión:- Expansión a la derecha o derecha y abajo
- izquierda= 0 px
- parte superior = 0 px
- Expansión a la izquierda o izquierda y abajo
- izquierda = ancho del panel expandido [menos] ancho del panel contraído (por ejemplo, 500 px - 300 px = 200 px)
- parte superior = 0 px
- Expansión a la derecha y arriba
- izquierda= 0 px
- parte superior = altura del panel expandido [menos] altura del panel contraído (por ejemplo, 300 px - 250 px = 50 px)
- Expansión a la izquierda y arriba
- izquierda = ancho del panel expandido [menos] ancho del panel contraído (por ejemplo, 500 px - 300 px = 200 px)
- parte superior = altura del panel expandido [menos] altura del panel contraído (por ejemplo, 300 px - 250 px = 50 px)
- Expansión a la derecha o derecha y abajo
- Defina
opt_expandedWidthyopt_expandedHeightpara que coincidan con las dimensiones del panel expandido.
// Se puede invocar antes del evento INIT del Enabler.
Enabler.setExpandingPixelOffsets(
200, // Desplazamiento hacia la izquierda del anuncio expandido.
100, // Desplazamiento hacia arriba del anuncio expandido.
700, // Anchura en expansión del anuncio.
450); // Altura en expansión del anuncio.