Api Javascript

ARMADO DE PIEZAS:

Es importante cumplir obligatoriamente con todos los siguiente pasos para el armado de piezas Rich Media tanto para autogestión como para enviar el material a programar a nuestro sector de soporte Rich Media:

- El anuncio junto con todos sus archivos y recursos que utilice deben ser enviados o cargado en formato zip.

- El anuncio dentro del zip debe contener obligatoriamente el nombre de “index.html”.

- Todas las rutas de imágenes, CSS, Javascript, etc. deben ser relativas, por ejemplo:
video.mp4 // ok
http://www.dominio.com/carpeta/video.mp4 // ERROR

En la siguiente imagen, se describe como sería el armado del zip:

IMPORTANTE: dentro del ".zip" deben estar todos los archivos que componen la creatividad.

También deberá estar incluida la librería: "eplBuilder.js".

Descargar Ejemplo

PROGRAMACIÓN DE ANUNCIOS CON JAVASCRIPT:

Toda la documentación hace referencia al lenguaje Javascript aplicado al HTML5 de los anuncios.

Se deberá incluir la librería "eplBuilder.js" en el head del archivo html.

Descarga aquí la librería

Para crear un formato con Javascript:

var EPL = new eplBuilder().create([FORMATO]);

Como parámetro a nuestra función "create" debemos pasar una de las siguiente opciones que corresponden a cada formato:

eplFormats.bannerGenerico
eplFormats.bannerSkin
eplFormats.layerGenerico
eplFormats.bannerLayer
eplFormats.layerBoton
eplFormats.layerScroll
eplFormats.anuncioPrevio
eplFormats.unionLayers
eplFormats.expandibleMultiple
eplFormats.folding
eplFormats.expandiblePush
eplFormats.expandibleRollover
eplFormats.takeover
eplFormats.zocalo
eplFormats.tripleImpacto
eplFormats.multipleImpacto
eplFormats.quintupleImpacto
eplFormats.inline
eplFormats.filmstrip
eplFormats.videoCounterExpandible
eplFormats.videoCounterExpandible2
eplFormats.videoPreview
eplFormats.cornerExpandible
eplFormats.skinCounterExpandible
eplFormats.videoSlider

Ejemplo:

                var EPL = new eplBuilder().create(eplFormats.anuncioPrevio);

La librería debe ser incluida en la etiqueta <head> del anuncio.

                <head>
                    <script src="eplBuilder.js" type="text/javascript"></script>
                </head>

Todas las funcionalidades del anuncio se referirán como métodos al objeto EPL en Javascript, se deberán ejecutar las funciones especificadas por formato.

Las funcionalidades descritas por formato a continuación deben ser ingresadas en las acciones donde el banner realiza la interacción, por ejemplo:

Si un expandible push debe expandir, en la acción donde está programada la creatividad deben agregar la función "EPL.adExpand();", el cual realizará la expansión de epl a nivel gráfico.

Si un layer debe cerrar, al botón de cerrar en la creatividad ejecutar la función "EPL.adClose();".

CLICKTAG:

El clicktag es genérico para todos los tipos de formatos y piezas programadas, la implementación es la siguiente:

               <a onclick="window.open(window.clickTag); return false" href="#!"> </a>

Si requerimos que una área específica (por ejemplo, un <div>) realice el clicktag, realizamos lo siguiente:

                    <a onclick="window.open(window.clickTag); return false" href="#!">
                        <div id="clickTag"> //aquí mi creatividad </div>
                    </a>

Englobamos nuestro elemento html con la etiqueta <a> para que se aplique la zona activa.

Funciones Javascript según el formato:

Banner Genérico

- EPL.adStartTimer(); // indica cuando el anuncio debe iniciar la métrica de permanencia.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo.

Layer Genérico

- EPL.adClose(); // indica que hay que cerrar el layer.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Layer a botón

- EPL.adClose(); // indica que hay que cerrar el layer.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Banner a Layer

- EPL.adExpand(); // indica que hay que expandir y mostrar el layer.

- EPL.adClose(); // indica que hay que cerrar el layer.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Anuncio Previo

- EPL.adClose(); // indica que hay que cerrar el layer.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Expandible Múltiple

- EPL.adExpand(); // indica que hay que expandir y mostrar el anuncio.

- EPL.adShrink(); // indica que hay que replegar el anuncio.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Folding

- EPL.adExpand(); // indica que hay que expandir y mostrar el anuncio.

- EPL.setImages(img1,img2,img3,img4, img5,img6); // recibe los id de las imágenes como parámetros y las carga para la animación. Los id deben ser pasados como Strings, ej: EPL.setImages(“imagen1”,”imagen2”,”imagen3”, ”imagen4”,”imagen5”,”imagen6”);
Las imágenes deben estar ingresadas al html con los mismos id.

- EPL.initAnimation(fps); // Inicia la animación mostrando cada una de las imágenes, recibe como parámetro opcional “fps” que permite darle velocidad deseada en frames por segundo.

- EPL.endAnimation(fps); // Finaliza la animación replegando cada imagen, recibe como parámetro opcional “fps” que permite darle velocidad deseada en frames por segundo.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Expandible Push

- EPL.adExpand(); // indica que hay que expandir y mostrar el anuncio.

- EPL.adShrink(); // indica que hay que replegar el anuncio.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

- EPL.initExpanded();// indica si el anuncio debe comenzar expandido o no, esta opción es seteada desde la plataforma de e-planning a la hora de cargar el anuncio.

Código de ejemplo para checkear si el anuncio debe comenzar expandido o no:
if(EPL.initExpanded()){
EPL.adExpand();
//Agregar aquí el código que expande el anuncio visualmente en la creatividad.
}

Expandible Rollover

- EPL.adExpand(); // indica que hay que expandir y mostrar el anuncio.

- EPL.adShrink(); // indica que hay que replegar el anuncio.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Filmstrip

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

- EPL.setContent(divContenedor, divContenido); // recibe por parámetros los siguientes datos:

divContenedor:

Id del div que engloba a todo el anuncio, debe tener seteado el ancho y alto en 300x600 y overflow en hidden.

divContenido:

Id del div que contiene todos los elementos del anuncio, es el div que realizara el scroll automático, debe tener seteado el alto real del contenido.

Triple Impacto

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

- EPL.adShowLeft(); // indica que hay que expandir el anuncio izquierdo.

- EPL.adShowRight(); // indica que hay que expandir el anuncio derecho.

- EPL.adShowLayer(); // indica que hay que expandir el Layer.

- EPL.adHideLeft(); // indica que hay que cerrar el anuncio izquierdo.

- EPL.adHideRight(); // indica que hay que cerrar el anuncio derecho.

- EPL.adHideLayer(); // indica que hay que cerrar el Layer.

Múltiple Impacto

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

- EPL.adShowLeft(); // indica que hay que expandir el anuncio izquierdo.

- EPL.adShowRight(); // indica que hay que expandir el anuncio derecho.

- EPL.adShowTop(); // indica que hay que expandir el anuncio superior.

- EPL.adShowLayer(); // indica que hay que expandir el Layer.

- EPL.adHideLeft(); // indica que hay que cerrar el anuncio izquierdo.

- EPL.adHideRight(); // indica que hay que cerrar el anuncio derecho.

- EPL.adHideTop(); // indica que hay que cerrar el anuncio superior.

- EPL.adHideLayer(); // indica que hay que cerrar el Layer.

Quíntuple Impacto

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

- EPL.adShowLeft(); // indica que hay que expandir el anuncio izquierdo.

- EPL.adShowRight(); // indica que hay que expandir el anuncio derecho.

- EPL.adShowTop(); // indica que hay que expandir el anuncio superior.

- EPL.adShowBottom(); // indica que hay que expandir el anuncio inferior.

- EPL.adShowLayer(); // indica que hay que expandir el Layer.

- EPL.adHideLeft(); // indica que hay que cerrar el anuncio izquierdo.

- EPL.adHideRight(); // indica que hay que cerrar el anuncio derecho.

- EPL.adHideTop(); // indica que hay que cerrar el anuncio superior.

- EPL.adHideBottom(); // indica que hay que cerrar el anuncio inferior.

- EPL.adHideLayer(); // indica que hay que cerrar el Layer.

Banner con Skin

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

- EPL.adShowSkin(id, fixed); // indica que hay que mostrar el skin con el id correspondiente que es pasado como primer parámetro. El segundo parámetro indica si el skin debe tener position fixed o no, el valor que se pasa es true o false. Los id pueden ser únicamente los siguientes: 1 o 2 o 3 o 4 ya que solo son permitidos un máximo de 4 imágenes como skin.

Takeover

- EPL.adExpand(); // indica que hay que expandir y mostrar el anuncio.

- EPL.adClose(); // indica que hay que cerrar el layer.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Unión de layers

- EPL.adJoin(); // indica que hay que realizar la animación de unir los 2 laterales.

- EPL.adClose(); // indica que hay que cerrar el layer.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Zócalo

- EPL.adExpand(); // indica que hay que expandir y mostrar el anuncio.

- EPL.adShrink(); // indica que hay que replegar el anuncio.

- EPL.adClose(); // indica que hay que cerrar el layer.

- EPL.adComplete(); // indica cuando el anuncio debe emitir la métrica de completo, debe ir seteado en el layer y automáticamente lo cerrará al completar.

Video

- EPL.setVideo(videoId); // id del video que se requiere contabilizar métricas.

- EPL.adStartTimer(); // indica cuando el anuncio debe iniciar la métrica de permanencia (exclusivo del Video Banner).

- EPL.adClose(); // indica que hay que cerrar el layer (exclusivo del Video Layer).

Inline

- EPL.setVideoInline(videoId); // id del video que se requiere contabilizar métricas.

- EPL.adShrink(); // indica que hay que replegar el anuncio.

VideoPreview:

- EPL.init(direction); // inicializa el layer a pantalla completa y el parámetro direction toma los siguientes valores:

• "RL" - animación de derecha a izquierda (right to left).

• "LR" - animación de izquierda a derecha (left to right).

• "BT" - animación de abajo hacia arriba (bottom to top).

• "TB" - animación de arriba hacia abajo (top to bottom).

De no pasar el parámetro el anuncio no tendrá animación de entrada y se visualizará instantáneamente en la pantalla.

VideoCounter Expandible:

- EPL.init(); // inicializa todo el anuncio y carga la lógica y los videos adjuntados en el zip automaticamente.

IMPLEMENTACIÓN VIDEO ESTÁNDAR:

Para agregar un video al anuncio html, siga las instrucciones respecto a las especificaciones para video:

Para contabilizar métricas en un video primero se debe agregar el tag al html correspondiente, por ejemplo:

               <video id="video1" width="320" height="320" controls autoplay muted>
                    <source src="video.mp4" type=”video/mp4”>
                </video>

Principalmente nos encontramos con el tag <video> y dentro del mismo el se encuentra el tag <source> que corresponde a la dirección del video a cargar.

El tag video debe tener un id especificado, en este ejemplo es: "video1", para poder realizar que contabilice métricas es necesario utilizar la función EPL.setVideo(videoId, trackComplete, callback), la cual recibe como parámetros la siguiente información:

- videoId: String, id del video html5.

- trackComplete: true o false, indica si hay que realizar el Anuncio Completo[EPL.adComplete()] al finalizar el video.

- callback: Function o null, función que se pasa como parámetro para ejecutar una ves que finaliza el video.

Ejemplo:

EPL.setVideo("video1", true, function(){console.log("Video Completo");});

Automáticamente, la librería de Rich Media reconoce el video y ajusta las métricas a sus controles.

También se agregará dinámicamente un clicktag al video.

Métricas de video:

• Sonido On

• Sonido Off

• Start

• Pause

• Restart

• Anuncio Completo

• 1/4 video reproducción

• 1/2 video reproducción

• 3/4 video reproducción

Opciones de video:

Los formatos rich media soportan hasta un máximo de 5 videos inclusive.

En caso de necesitar que un video comience en auto play, pausa, sonido on/off, se debe setear directamente del tag <video> con las propiedades correspondientes.

En el próximo ejemplo mostramos cómo realizar un video que comienza con sonido off, en auto play y con controles visibles:

Las propiedades en la etiqueta marcadas en azul son las seteadas.

IMPLEMENTACIÓN VIDEO YOUTUBE:

Para la implementación de un video de youtube es necesario tener implementado en el anuncio un div con un id definido específicamente para cargar el video de youtube, ejemplo:

               <div id="videoYoutube">
               </div>

Para poder realizar que cargue el video y contabilice métricas es necesario utilizar la función:

EPL.setVideoYoutube(idDiv, idVideo, ancho, alto, autoPlay, sound, loop, trackComplete, callback) la cual recibe como parámetros la siguiente información:

- idDiv: String, id del div donde se debera cargar el vide youtube.

- idVideo: String, id del video de youtube (se obtiene de la url del video en youtube) ejemplo:

www.youtube.com/watch?v=AkA-WK0ORMQ&feature=youtu.be

El idVideo es: AkA-WK0ORMQ

- ancho: Number, ancho del video.

- alto: Number, alto del video.

- autoPlay: true o false, indica si debe comenzar en autoplay o no (true: si, false: no).

- sound: true o false, indica si debe comenzar con sonido on u off (true: si, false: no).

- loop: true o false, indica si el video debe realizar loop (true: si, false: no).

- trackComplete: true o false, indica si se debe ejecutar el Anuncio Completo al finalizar el video.

- callback: Function o null, funcion que se ejecutara cuando finalice el video (Opcional).

Para inicializar los videos se deberá llamar a la función: EPL.initYoutubeVideos();

Métricas de video:

• Sonido On

• Sonido Off

• Start

• Pause

• Restart

• Anuncio Completo

• 1/4 video reproducción

• 1/2 video reproducción

• 3/4 video reproducción

IMPORTANTE: Si un video tiene seteado el parámetro de loop en true, emitirá la métrica de Anuncio Completo pero no se evaluara trackComplete.

Esto genera que en por ejemplo un formato Expandible Push no se repliegue el iframe automaticamente al finalizar el video.

AdConnector:

AdConnector es nueva funcionalidad que realiza una conexión entre anuncios en una misma página web, permitiendo la interración del usuario con la creatividad del banner. Ver demo

Funcionalidad para que un banner EMITA un mensaje:

- EPL.sendMessage(message); message = nombre del mensaje.

Funcionalidad para que un banner RECIBA un mensaje:

- EPL.onMessage(message, callBack); message = nombre del mensaje, callBack = función a ejecutar cuando reciba el mensaje.

¿Cómo se programa?

• Descarga aquí el demo

• Prepara tus piezas con las funcionalidades de EMITIR y RECIBIR mensajes.

• Descarga y agrega la libreria .zip