Issuu on Google+

IMPLEMENTACION BANNERS LATERALES EN EL SITIO La implementación de 2 espacios laterales, permitirá utilizar en el sitio los formatos: Múltiple Impact y Triple Impact. El sitio debe ser adaptado sólo una vez para correr este tipo de creatividades y funcionen correctamente. Importante: PARA REALIZAR ESTOS CAMBIOS DEBE PONERSE EN CONTACTO CON EL WEBMASTER DE SU SITIO El div contenedor del sitio debe tener un estilo position relative para que cualquier elemento dependiente creado con position absolute tome sus coordenadas en función de la posición de este div. PASO 1: Div del Sitio Revisar los estilos del div contenedor del sitio para que incluya el estilo indicado <div id=”contenedorSitio” style="position:relative”> … </div> PASO 2: Div Laterales y Layer Dentro del div contenedores debe haber 2 divs (para cada uno de los banners laterales) que serán los que se posicionarán a los costados del sitio (div contenedor). Los divs contenedores laterales de los banner deben tener position absolute. <div id="XXX" style="position:absolute> </div> Para que los laterales se posicionen a la altura del comienzo del sitio, se deben posicionar en el punto 0 del contenedor; pero de esta forma quedaría sobre el contenido del sitio y no en su costado. Por eso, los laterales deben tener un margen negativo, por ejemplo: si el lateral izquierdo mide 120 pixeles de ancho debe tener left: -120px y el derecho right: -120px. Esta configuración sirve para que las creatividades se visualicen correctamente en todas las resoluciones de pantalla. La creatividad se va a ir “recortando” y no se va a ver sobre el sitio en resoluciones de pantallas menores a 1024. Estos divs (contenedores de los laterales y layer) deben tener como ids nombres claros que luego se identificarán al momento de crear la campaña. El sistema identificará estos div por medio de su ID y servirá los anuncios correctamente. <div id=" epl_impact_div1" style="position:absolute></div> En el caso en que se desee que los banners laterales queden fijos cuando se hace scroll, dentro de cada uno de los divs es necesario colocar otro div con position:fixed. En éste caso, estos divs internos son los que tienen que tener los ids de epl. Esto quedaría estructurado de la siguiente manera:


Lateral Izquierdo <div id="epl_impact_div2" style="position:absolute;left:-140px;> <div id="epl_impact_div2" style="position:fixed;" > </div> </div> Lateral Derecho <div id="epl_impact_div" style="position:absolute;right:-140px;> <div id="epl_impact_div" style="position:fixed;"> </div> </div> Para los formatos múltiple impact y laterales a layer, se sugiere incluir un div adicional para posicionar el layer. Por ejemplo: una de las implementaciones más utilizadas es posicionar el layer para que quede a la misma altura de los laterales y su posición es absoluta al igual que los laterales. El layer tiene su propio contenedor, es un div independiente a los laterales.

Layer <div id="epl_impact_layer" style="position:absolute> </div> Hay que tener en cuenta que los anuncios deben ser asociados a una posición (espacio en eplanning) por lo tanto, esa posición debe tener el llamado Javascript para mostrar correctamente el tag Rich Media de e-planning. Si está utilizando códigos Ajax V4, la llamada javascript es del tipo <script type="text/javascript">eplAD4M("lateral");</script> El código final para el Lateral Izquierdo será del tipo <div id="epl_impact_div2" style="position:absolute;left:-140px;> <div id="epl_impact_div2" style="position:fixed;"> <script type="text/javascript">eplAD4M("lateral");</script> </div> </div>


En nuestro ejemplo, vamos a utilizar tanto para el Triple Impact como para el Múltiple Impact el lateral izquierdo como espacio para asociar nuestro anuncio.

IMPLEMENTACIÓN DE LAS PIEZAS EN LA INTERFAZ 1. Múltiple Impact Al momento de agregar el anuncio, seleccionar: Formato: Múltiple Impacto Completar los campos solicitados.

NOTA: El anuncio que se muestre a la izquierda hará el llamado al script del espacio para que sea mostrado en dicha posición.


Luego ingresar a â&#x20AC;&#x153;Editar atributos del Anuncioâ&#x20AC;? e indicar los ids de los divs utilizados. AquĂ­ se deben agregar los 3 divs para ser colocados en el sitio: banner top, banner lateral derecho y layer.


2. Triple Impact NOTA: El anuncio que se muestre a la izquierda har谩 el llamado al script del espacio para que sea mostrado en dicha posici贸n. Al momento de agregar el anuncio, seleccionar: Formato: Triple Impacto Completar los campos solicitados.


Luego ingresar a â&#x20AC;&#x153;Editar atributos del Anuncioâ&#x20AC;? e indicar los ids de los div utilizados. AquĂ­ se deben agregar los 2 divs para ser colocados en el sitio: Banner lateral derecho y layer.


El posicionamiento del layer tambiĂŠn se puede hacer desde la plataforma sin necesidad de aplicar el contenedor DIV, aunque es lo mĂĄs recomendable. Al momento de subir cualquiera de los 2 formatos, encontraremos la opciĂłn del posicionamiento que deseamos darle.


MĂşltiple Impact


Triple Impact


Multiple Impacto