...
| Excerpt |
|---|
Este documento explica como implementar en diferentes escenarios Header Bidder para una optima monetización del sitio. |
Contenido
E-Plannig Header Bidder es un wrapper propietario de E-Planning que permite de forma rapida y simple implementar un sistema de header bidding en un sitio. El mismo consiste en un único código generico que debe ser implementado en cada página y que de forma automatica identifica los espacios publcitarios y los subasta entre las diferentes fuentes disponibles en la red.
| Table of Contents | ||
|---|---|---|
|
...
Obtención del código
El código de E-Planning Header Bidder
...
Cuando la configuración de HB esté lista se podrá proceder a la implementación de los tags que se encuentran en la pestaña IMPLEMENTACIÓN.
...
consiste en una simple etiqueta HTML que debe colocar en su sitio. La misma puede ser extraída desde la plataforma, ingresando a la pestaña Implementación.
En la misma encontrará diferentes versiones del código según donde se implementará:
- Display directa en el sitio
- Implementación Display mediante Google Tag Manager
- Implementación para espacios de : Utilice este código si va a pegarlo directamente en el código HTML de su sitio.
- Google Tag Manager: Utilice este código si va a insertarlo mediante una herramienta de administración de etiquetas como Google Tag Manager.
- Video Instream (VAST)
...
| title | Atención |
|---|
...
- : Utilice este código para subastar inventario de video.
Recuerde que además de implementar el código, debe implementar correctamente las líneas en el archivo ads.txt.
...
Encuentre mas información sobre ads.txt
...
haciendo click aquí
...
.
Implementación
Display directa en el sitio
...
Para realizar una implementación directa en el sitio, primero debemos extraer copie el tag código de la plataforma administrativa, y luego implementarlo en nuestro sitio. En algunos casos excepcionales, quizá debamos aplicar algún modificador del tag.
Extracción del tag
Si deseamos implementar Header Bidder directamente en el sitio, debemos ir a la pestaña IMPLEMENTACIÓN (1), Luego dentro del cuadro Implementación peguelo en el código HTML de su sitio.
Obtención del código
Dirijase a la pestaña Implementación (1). Dentro del cuadro Implementación para display (2) y seleccionar IMPLEMENTACION DIRECTA seleccione Implementación Directa (3) . Por último debemos copiar el código , luego copie el código que se mostrará debajo (4). El mismo código que se muestra en pantalla puede ser copiado también
Puede copiar el código a su portapapeles de forma directa haciendo click en el ícono copiar que se encuentra en la esquina superior derecha botón indicado en (5).
Implementación del
...
código
Una vez extraído el tagcódigo, este código debe brindarse al webmaster para que sea implementado el mismo debe ser implementado en las páginas del sitio o los sitios a monetizar dentro de la etiqueta <head> del header del mismo, mismo. Es importante que el código sea implementado ANTES del comienzo del tag de DFP
...
| title | Ver un ejemplo... |
|---|
...
| title | Ejemplo |
|---|
Ad Manager.
| Info | ||
|---|---|---|
| ||
El tag código funciona de forma asincrónica. Esto permite que el sitio siga código sea descargado sin interrumpir la carga normal y evita del sitio, evitando problemas de latencia. Todo el codigo de Header Bidder es constantemente optimizado para garantizar la mejor experiencia de usuario y performance del sitio |
Implementaciones especiales que requieran modificadores del tag
Si bien el tag fue diseñado para soportar la mayor flexibilidad de casos de implementación posibles, y es extraño que existan inconvenientes ante la correcta implementación, existe la posibilidad de que nuestro sitio utilice una naturaleza de ejecución alternativa a los métodos estandar del mercado. Esto podría llegar a ocasionar resultados finales diferentes a los deseados. En caso de presentarse cualquier tipo de dificultad de implementación, debemos contactar inmediatamente al equipo de soporte de E-Planning para que nos brinde su asistencia. La plataforma posee un acceso directo para ponernos en contacto con el equipo de Soporte mediante el icono de la parte superior derecha de la interfaz:
Luego de evaluar el caso, el equipo de soporte puede indicarnos aplicar uno de los siguientes modificadores sobre el tag para optimizar su función:
| Warning | ||
|---|---|---|
| ||
El uso de estos modificadores solo debe realizarse bajo indicación explícita del equipo de soporte de E-Planning, ya que su incorrecto uso puede afectar severamente la monetización del sitio, tanto por Header Bidder como por DFP |
, demoras que afecten la experiencia del usuario. |
Configuración adicional
El código soporta algunas configuraciones adicionales que pueden adaptarse a situaciones en particulares de distintos sitios, mejorando la experiencia y optimizando los resultados.
Recomendamos ponerse en contacto con nuestra area de soporte antes de aplicar cualquier configuración adicional para obtener correcta asesoria sobre como y en que casos realizarlas. Puede ponerse en contacto con el area de soporte haciendo click en el icono de Soporte ubicado en la esquina superior derecha de la plataforma.
Parametro usedivname
E-Planning Header Bidder identifica los espacios placements de DFP Ad Manager mediante su nombre. Sin embargo, existen métodos de implementación no habituales de DFP donde la detección de espacios mediante el nombre puede presentar inconvenientessi usted utiliza el mismo nombre para diferentes placements pueden presentarse inconvenientes en la correcta identificación de los mismos. En estos casos, el modificador usedivname indica a E-Planning Header Bidder utilizar un método de identificación alternativo basado en el ID del contenedor del espacio.
| Expandcode | ||
|---|---|---|
| ||
| Tip | ||
|
| |
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net" data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-usedivname="true"> |
Parametro timeout
E-Planning aguarda hasta la renderización efectiva de espacios de DFP Header Bidder aguarda el llamado al metodo googletag.display() hasta que la pagina termine de cargar o hasta que todos los espacios definidos de DFP ejecuten su renderización en algún lugar efectivo del sitio. En algunos casos de implementación de DFP, la renderización de los espacios definidos de DFP es condicional, por lo que esperarlos hasta la carga definitiva de la pagina es una perdida de tiempo innecesaria que demora la activación de la publicidad. Para evitar estos casos, E-Planning Header Bidder posee configurado un tiempo máximo de espera para la renderizacion de los slots antes de comenzar la subasta. En caso de ser necesario, este tiempo de espera puede ser modificado mediante el modificador timeout en milisegundos
...
| title | Ver un ejemplo... |
|---|
...
| title | Ejemplo |
|---|
...
placements de Ad Manager sean ejecutados. Si su sitio utiliza llamados condicionales a googletag.display() entonces puede agregarse una latencia adicional lo que puede ocacionar que los anuncios tarden mas de lo normal en ser mostrados. Puede configurar un tiempo de espera especifico para que E-Planning Header Bidder realice este proceso, interrumpiendose si dicho tiempo de espera es superado. Esto es realizado mediante el parametro timeout, el cual es especificado en milisegundos.
| Code Block | ||
|---|---|---|
| ||
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net" data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-timeout="1500"> |
Parametro ma
Por default E-Planning identifica todos los slots definidos para DFP, pero aguarda su renderizacion efectiva para subastarlos. El modificador ma permite limitar el maximo de slots a subastar al numero definido en el ,mismo. En caso de definirse un valor N para este modificador, solo se consideraran los primeros N slots en ser definidos.
...
| title | Ver un ejemplo... |
|---|
...
| title | Ejemplo |
|---|
...
Header Bidder subastara todos los placements de la página. El parametro ma permite limitar la cantidad de placements que se subastaran.
| Code Block | ||
|---|---|---|
| ||
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net" data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-ma="5"> |
Parametro be
En ocasiones es necesario evitar que algún subconjunto de slots sea subastado. Mediante el modificador be se puede especificar una lista de slots que serán ignorados por E-Planning HB y procederan con el tratamiento normal de DFP. Esto se puede especificar mediante un string que describa un json que enumere los identificadores de los slots, o mediante una expresión regular que matchee con los slots a filtrar. En este ultimo caso, la expresión debe delimitarse por el símbolo de admiración ("!").
...
| title | Ver un ejemplo... |
|---|
...
| title | Ejemplo |
|---|
<!-- Ejemplo con listado json de slots -->
...
Puede evitar que determinados placements sean subastados. Para ello, puede listarlos en el parametro be de forma especifica, o puede agregar una expresión regular delimitandola con el símbolo !.
| Code Block | |||||
|---|---|---|---|---|---|
| |||||
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net" data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-be='["/12345/slot1","/12345/slot2"]'>
|
gtimeout
...
Parametro gtimeout
El parametro gtimeout permite extender el tiempo de espera de E-Planning Header Bidder mediante el modificador gtimeouthasta que el setup de Ad Manager sea completado.
| Expandcode | ||
|---|---|---|
| ||
| Tip | ||
|
| |
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net" data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-gtimeout="600"> |
disableinitialload
...
Parametro disableinitialload
Por default el tag de DFP Ad Manager realiza su setup, E-Planning Header Bidder detiene por unos milisegundos su ejecución, subasta los espacios y luego vuelve a activar solo aquellos espacios donde no hubo un mejor comprador. Sin embargo, existe la posibilidad de que en la implementación DFP Ad Manager se encuentre intencionalmente detenido. , o no se desee reactivar hasta que un evento particular del sitio ocurra. En estos casos, el modificador parametro disableinitialload indicara indicara a E-Planning DFP Header Bidder no intervenir en la desactivación, activación y recarga de los espacios de DFPAd Manager.
| Expandcode | ||
|---|---|---|
| ||
| Tip | ||
|
| |
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net" data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-disableinitialload="true"> |
...
Parametro tip
...
En algunos casos, se desea mediante herramientas externas poder contabilizar los anuncios mostrados mediante E-Planning Header Bidder. Este modificador permite incorporar un pixel de conteo que sera invocado ejecutado cada vez que Header Bidder se muestre anunciosun anuncio. Se pueden incorporar mas urls URLs de conteo externas utilizando un indice incremental a partir de 2 al final del modificador, quedando por ejemplo data-tip, data-tip2, data-tip3 .. data-tipN
| Expandcode | ||
|---|---|---|
| ||
| Tip | ||
|
| |
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net"data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-tip="https://unaPrimerUrlDeConteoExterno.com" data-tip2="https://unaSegundaUrlDeConteoExterno unaSegundaUrlDeConteoExterno.com" data-tip3="https://unaTercerUrlDeConteoExterno.com"> |
Parametro ss
En una ejecución normal, E-Planning Header Bidder verifica los espacios implementados de DFP, y realiza un único request a sus servidores para subastarlos. Luego, en base al resultado de esa subasta, renderiza los anuncios ganadores de la subasta deteniendo DFP, o permite a DFP renderizar el slot.
Cuando se incorpora el modificador parametro ss, se activa el modo "Single Slot". En esta modalidad, DFP Ad Manager es detenido, y los espacios placements deben ser activados manualmente invocando el metodo hbepl.callSingleSlot(<slot>), siendo <slot> una referencia a un slot de DFPAd Manager. En el momento en que este método sea invocado, sera subastado el slot placement en cuestion, y según corresponda, renderizado el anuncio ganador o reactivada la renderización de DFP.
Esto permite realizar asincrónicamente la incorporación de espacios placements según vayan siendo requeridos por el sitio.
| Expandcode | ||
|---|---|---|
| ||
| Tip | ||
|
| |
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net" data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-ss="true"> ... var referenciaAUnSlot =<script> var slot = googletag.pubads().slots[0]; ... hbepl.callSingleSlot(referenciaAUnslot slot); </script> |
Parametro dkt
Por defecto, nuestro Header Bidder captura todos los parámetros custom (Key, value) aplicados en los espacios de DFP, y los utiliza para optimizar la sincronización. Ad Manager son capturados y enviados en la subasta. Existen implementaciones en donde estos parámetros se utilizan para la conexión entre la plataforma de un tercero con DFPAd Manager, en cuyo caso el volumen de datos enviado es extenso. Incorporando Si se incorpora el modificador parametro dkt con valor "true", podemos forzar a EPL Header Bidder para ignorar los parámetros custom de DFP y reducir la transferencia de datos necesaria.
...
| title | Ver un ejemplo... |
|---|
...
| title | Ejemplo |
|---|
...
entonces E-Planning Header Bidder ignorará estos valores.
| Code Block | ||
|---|---|---|
| ||
<script src="https://i.e-planning.net/layers/hbdfp.js" id="hbepl" async data-sv="us.img.e-planning.net"data-sv="ads.us.e-planning.net" data-ci="xxxxx" data-dkt="true"> |
↑ Regresar a la tabla de contenido ↑
...
Google Tag Manager
...
Google Tag Manager , aplica determinadas limitaciones que impiden el funcionamiento directo de un tag normal de del código de E-Planning Header Bidder. Por este motivo , primero deberemos utilizar el tag especial diseñado para esta plataforma.
Extracción del tag
Si deseamos implementar Header Bidder mediante GTM, debemos ir a la pestaña IMPLEMENTACIÓN (1), Luego dentro del cuadro Implementación para display (2) y seleccionar GOOGLE TAG MANAGER (3) . Por último debemos copiar el código en la plataforma es posible extraer un código especial para ser insertado dentro de Google Tag Manager.
Obtención del código
Dirijase a la pestaña Implementación (1). Dentro del cuadro Implementación para display (2) seleccione Google Tag Manager (3), luego copie el código que se mostrará debajo (4). El mismo código que se muestra en pantalla puede ser copiado también
Puede copiar el código a su portapapeles de forma directa haciendo click en el icono copiar que se encuentra en la esquina superior derecha botón indicado en (5).
Este tag es multiprotocolo, por lo que funcionara tanto en sitios http como https. Utilizando dinámicamente siempre el protocolo del sitio donde se implemente.
...
Inserción del
...
código en
...
Google Tag Manager
Para insertar el código dentro de Google Tag Manager, ingrese al formulario de alta de un nuevo tag
...
haciendo click en Tags (1.A
...
) y luego en New (1.B
...
).
...
Luego en el campo Tag Configuration, haga click en el icono
...
de selección de tipo de tag.
...
Seleccione la opción HTML personalizado.
...
En el
...
contendor HTML
...
pegue el código de E-Planning Header Bidder para Google Tag Manager extraído de la plataforma.
...
Haga click en el icono Triggering para seleccionar un
...
disparador.
...
En el listado de
...
Triggers seleccione Página vista.
7- Hacer click en SAVE para guardar el nuevo tag
8- En el caso de que sea la primera vez que el tag se guarde, nos solicitará colocar un nombre mas descriptivo
8.A Colocar un nombre mas descriptivo
8.B Hacer click en SAVE para guardar los cambios
9- Hacer click en SUBMIT para aplicar los cambios en producción
10- Incorporar la descripción de los cambios subidos a producción y publicarlos
10.A Colocar un nombre descriptivo a los cambios aplicados
10.B Colocar una descripción sobre los cambios aplicados (opcional)
10.C Hacer click en PUBLICAR para hacer efectivos los cambios.
↑ Regresar a la tabla de contenido ↑
¿Cómo realizo un refresh de los slots en una implementación display con monetización?
Si deseamos realizar un refresh de los anuncios de la pagina, contemplando una nueva monetización mediante las fuentes de demanda de E-Planning Header Bidder, podemos hacerlo ejecutando el siguiente comando javascript:
hbepl.refresh()
Este método recargara todos los espacios de DFP con un nuevo valor de correlator, volviendo a subastarlos.
| Warning | ||
|---|---|---|
| ||
Este metodo se puede utilizar en implementaciones display directas e implementaciones mediante Google Tag Manager. No puede ser aplicado en implementaciones de video o de sitios AMP |
↑ Regresar a la tabla de contenido ↑
¿Cómo realizo una Implementación para espacios de Video Instream (VAST)?
El trafico de video instream producido por los reproductores de video, debe ser administrado mediante el protocolo de comunicación VAST, por lo que requiere un tipo de tag especial. El mismo, consta únicamente de una url con la cual el player establecerá comunicación para solicitar publicidad. Header Bidder, provee una solución de monetización que permite subastar también este trafico. Para esto, debemos proceder de la siguiente manera:
Extracción del tag
Para extraer el tag de Header Bidder Video, debemos ir a la pestaña IMPLEMENTACIÓN (1), Luego dentro del cuadro Implementación para video (2) . Por último debemos copiar el código Haga click en Save para aplicar los cambios
La plataforma le pedirá que ingrese un nombre descriptivo del código. Ingrese "E-Planning Header Bidder" y haga click nuevamente en Save.
Haga click en el botón Submit para aplicar los cambios en producción.
Incorpore la descripción de los cambios y publiquelos. Para ello coloque una descripción de los cambios aplicados (10.A), en este caso "Inserción de E-Planning Header Bidder". Puede colocar una observación mas extensa de forma opcional en (10.B). Por último, haga click en Publish para aplicar los cambios (10.C)
Video Instream (VAST)
Puede implementar E-Planning Header Bidder para mostrar anuncios de video mediante VAST y VPAID.
Obtención del código
Dirijase a la pestaña Implementación (1). Dentro del cuadro Implementación para video (2) copie el código que se mostrará debajo (3). El mismo código que se muestra en pantalla puede ser copiado también
Puede copiar el código a su portapapeles de forma directa haciendo click en el icono copiar que se encuentra en la esquina superior derecha botón indicado en (4).
Implementación del
...
código
Para implementar el tag obtenido, debemos reemplazar los tags implementados del adserver que utilicemos por la un nuevo tag formado por el extraido desde la plataforma de E-Planning inmediatamente continuado por el tag original.
TAG_ORIGINAL → TAG_HB+TAG_ORIGINAL
...
| title | Ver un ejemplo... |
|---|
...
| title | Ejemplo |
|---|
...
código, peguelo delante de las URLs VAST ingresadas a en su reproductor de video. Por ejemplo, si la URL de VAST ingresada en su reproductor de video es:
https://pubads.g.doubleclick.net/gampad/ads?sz=320x180|640x360|240x156&iu=/28253248/Placement_Video&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1
...
Pegue justo delante la URL extraida de la plataforma
...
:
https://ads.us.e-planning.net/vhb/1/
...
Reemplazaremos entonces el tag original del Adserver DFP por el siguiente:
...
xxxxx/https://pubads.g.doubleclick.net/gampad/ads?sz=320x180|640x360|240x156&iu=/28253248/Placement_Video&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1
...
↑ Regresar a la tabla de contenido ↑
Refrescar anuncios
Si deseamos realizar refrescar los anuncios de la pagina (Refresh) para las implementaciónes de Display, ejecute el siguiente metodo en Javascript:
| Code Block | ||
|---|---|---|
| ||
hbepl.refresh() |
Este método recargara todos los espacios de E-Planning Header Bidder junto con Ad Manager, generando un nuevo valor de correlator.