Versions Compared

Version Old Version 11 New Version Current
Changes made by

jdigrazia (Unlicensed)

jdigrazia (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Anchor
indice
indice

Excerpt

Este documento explica como implementar en diferentes escenarios Header Bidder para una optima monetización del sitio.

...

Warning
titleAtención

En cualquiera de los casos de implementación es importante ademas implementar en el sitio la ultima versión del archivo ads.txt.

Puedes ver como implementar correctamente ads.txt desde este aquí

 ¿Cómo realizo una implementación Display directa en el sitio?

...

Expand
titleVer un ejemplo...


Tip
titleEjemplo

<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 ↑


¿Cómo realizo una Implementación Display mediante Google Tag Manager?

...

  •     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
titleAtención

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)?

...

Expand
titleVer un ejemplo...


Tip
titleEjemplo

Supongamos que poseemos originalmente implementado el siguiente tag del Adserver DFP:

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

Luego, extraemos de la plataforma de E-Planning Header Bidder el siguiente Tag:

https://ads.us.e-planning.net/vhb/1/18f66/

Reemplazaremos entonces el tag original del Adserver DFP por el siguiente:

https://ads.us.e-planning.net/vhb/1/18f66/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 ↑

¿Cómo realizo una implementación Display en sitios AMP?,

...

Como ultimo paso para utilizar  Header Bidder en sitios AMP, debemos crear en nuestra cuenta DFP un lineitem de callback. Podemos ver un instructivo completo sobre como realizar esta activación desde este Link


↑ Regresar a la tabla de contenido ↑

¿Cómo realizo una Implementación mediante Prebid?

...

Expand
titleVer un ejemplo...


Tip
titleEjemplo

Asumiendo un que nuestro id de cliente es 18f66 este seria un ejemplo de placement donde esta implementado E-Planning y AppNexus

Code Block
languagejs
 pbjs.que.push(function() {
	var adUnits = [
		{
			code: 'div-gpt-ad-1438287399331-0',
			sizes: [
				[300, 250],
				[300, 600]
			],
			bids: [
				{ 
					bidder: 'appnexus',
					params: { placementId: '4799418'}
				},
				{
					bidder: 'eplanning',
					params: { ci: '18f66' }
				}
			]
		}
	];
});




↑ Regresar a la tabla de contenido ↑


Cómo realizo una Implementación mediante Prebid Server?

...

Si no se contaba con uno, primero, debemos crear un nuevo archivo Stored Request especifico para la configuración de  E-Planning:

stored_requests/data/by_id/stored_imps/<id>.json

Siendo <id> un identificador arbitrario que asignaremos  para el Stored Request.

...

Expand
titleVer un ejemplo...


Tip
titleEjemplo

Asumiendo un que nuestro id de cliente es 18f66, y que ya contábamos con un stored request creado, solo debemos incorporar el bidder correspondiente a E-Planning, dentro del primer elemento de "imp", en el atributo "ext". Debemos utilizar como nombre del nuevo atributo "eplanning", y como valor un objeto que contenga un atributo "ci", cuyo valor sea el id de cliente respectivo:

Code Block
languagejs
 {
    "imp": [
        {
            "ext": {
				"appnexus": {
                    "placementId": '4799418'
                },
                "eplanning": {
                    "ci": "18f66"
                }
            },
            "banner": {
                "format": [
                    {
                        "h": 250,
                        "w": 300
                    },
                    {
                        "h": 90,
                        "w": 728
                    }
                ]
            },
            "id": "test-imp-id"
        }
    ],
    "ext": {
        "prebid": {
            "cache": {
                "bids": {}
            },
            "targeting": {
                "pricegranularity": "dense"
            }
        }
    },
    "id": "123456789",
    "site": {
        "page": "mydomain.com"
    }

}




↑ Regresar a la tabla de contenido ↑

¿Cómo doy soporte  AMP a Prebid Server?

Para dar soporte AMP a Prebid Server, debe implementarse como atributo en los tags  AMP-AD de DFP que queramos monetizar, dentro de su configuración AMP Real Time Config, el   se deben cumplir dos etapas, la sincronizacion de usuarios, y la configuracion rtb de los slots.


Sincronización de usuarios en Prebid Server

Para sincronizar los usuarios en prebid server, es necesario dar soporte al componente amp-iframe implementando en el header de la pagina el tag de la libreria correspondiente.

Expand
titleVer un ejemplo...


Tip
titleEjemplo

Asumiendo la librería de amp-iframe como:

Code Block
languagexml
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

La misma debe colocarse en el header de la pagina:

Code Block
languagexml
<html amp lang="en">
<head>
	<meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <title>Hello, AMPs</title>
	
...




Luego, al inicio del body, se debe implementar el siguiente código:

Code Block
languagexml
<amp-iframe width="1" title="User Sync" height="1" sandbox="allow-scripts allow-same-origin" frameborder="0" src="https://ads.us.e-planning.net/uspd/1/?du=https%3A%2F%2Fads.us.e-planning.net%2Fgetuid%2F1%2F5a1ad71d2d53a0f5%3Fhttps%3A%2F%2Fib.adnxs.com%2Fprebid%2Fsetuid%3Fbidder%3Deplanning%26gdpr%3D0%26gdpr_consent%3D%26uid%3D%24UID"><amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img></amp-iframe>


Expand
titleVer un ejemplo...


Tip
titleEjemplo


Code Block
languagexml
<!doctype html>
<html amp lang="en">
<head>
	<meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <title>Hello, AMPs</title>
	<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
	<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Pixel Sync AMP</h1>

	<amp-iframe width="1" title="User Sync"
	  height="1"
	  sandbox="allow-scripts allow-same-origin"
	  frameborder="0"
	  src="https://ads.us.e-planning.net/uspd/1/?du=https%3A%2F%2Fads.us.e-planning.net%2Fgetuid%2F1%2F5a1ad71d2d53a0f5%3Fhttps%3A%2F%2Fib.adnxs.com%2Fprebid%2Fsetuid%3Fbidder%3Deplanning%26gdpr%3D0%26gdpr_consent%3D%26uid%3D%24UID">
	  <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img>
	</amp-iframe>
  </body>
</html>
</body>
</html>



Configuración RTB de los slots

Una vez implementado el código de sincronización de los usuarios, debe implementarse como atributo en cada uno de los tags  AMP-AD de DFP que queramos monetizar, la configuración AMP Real Time Config de Prebid Server. La misma, consta de indicar el vendor PrebidAppNexus, cuyo objeto de configuración debe contener el atributo PLACEMENT_ID con valor respectivo al id indicado en el Stored Request configurado.

Expand
titleVer un ejemplo...


Tip
titleEjemplo

Supongamos que en nuestro sitio tenemos el siguiente tag AMP-AD de DFP que deseamos monetizar:

Code Block
languagexml
<amp-ad width=300 height=250
    type="doubleclick"
    data-slot="/77069040/Right1"
    >
</amp-ad>

Y que en el Stored Request que queremos utilizar especificamos el siguiente id: 123456789

Debemos completar la configuración RTC de la siguiente manera:

Code Block
languagexml
<amp-ad width=300 height=250
    type="doubleclick"
    data-slot="/77069040/Right1"
    rtc-config='{"vendors": {"PrebidAppNexus": {"PLACEMENT_ID": "123456789"}}, "timeoutMillis": 950}'
    >
</amp-ad>



↑ Regresar a la tabla de contenido ↑ 


...

Contenido

Table of Contents
excludeContenido
 

...