¿Qué es el Header Bidding y cómo implementarlo?

HatumSEO
Publicidad Programática
¿Qué es el Header Bidding y cómo implementarlo?

Publicidad Programática

Contenidos

La oferta de encabezado es una tecnología en la que los editores ofrecen su inventario de anuncios a muchos intercambios de anuncios. Aprende a automatizarlo paso a paso.

La tecnología de header bidding comenzó a desarrollarse en 2015 y desde entonces ha ayudado a muchos editores a aumentar sus ingresos hasta en un 40% (e incluso, en algunos casos, a niveles del 100% o más). 40%

¿Qué es la oferta de encabezado?

La oferta de encabezado es una técnica en la que los editores ofrecen su inventario de anuncios a muchos intercambios de anuncios, también llamados plataformas del lado de la oferta (o SSP), simultáneamente antes de realizar llamadas a sus servidores de anuncios.

Estos son los pasos que debe seguir un editor para que esta tecnología impulse su monetización.

Postúlate como socio del SSP y obtén aprobación.
Implementar Prebid.JS en el sitio web.
Configurar el servidor de anuncios.
Elija un sistema de gestión de consentimiento.
Probar y depurar.

Solicitud de socios SSP

Hay cientos de socios SSP disponibles en la lista para postularse, pero me gustaría mencionar los que creo que son los más populares: SSP

Triple elevación.
Intercambio de índices.
Amazon UAM/TAM.
Xandr (anteriormente AppNexus).
Teads.
Pubmático.
Soberano.
Verizon.
Magnita (anteriormente Rubicón).
OpenX.
Sonobi.
Goma de chicle.
Compartir a través de.
Inútil.

Es necesario encontrar su formulario de solicitud en línea y pasar por el proceso de verificación de la empresa. Por ejemplo, en el caso de Xandr, la página de contacto tiene este aspecto: the contact page

Preste atención al tamaño mínimo de inventario requerido para ser elegible para presentar la solicitud.

Sí, eso es la asombrosa cifra de 50 millones de impresiones de anuncios al mes.

Es posible que necesite un sitio web bastante impresionante para poder postularse a algunas de las redes publicitarias. Les llamaremos más postores, ya que pujan por el inventario en tiempo real.

Sin embargo, no todos los SSP tienen umbrales de aplicación tan altos. Por ejemplo, Sharethrough solo requiere 20 millones de impresiones de anuncios.

Además, también consideran la calidad de la audiencia, la geolocalización del tráfico, el tiempo que pasan los usuarios en el sitio web, etc.

Por lo general, se necesitan algunas semanas después de la solicitud para ser aprobado e incorporado, por lo que puede ser un proceso bastante lento que incluso puede tardar meses en finalizar.

¿Cómo funciona Prebid.js?

En pocas palabras, así es como funciona Prebid.js.

Cuando un usuario abre una página web, se realiza una solicitud de anuncio a todos los postores (socios SSP).

Los postores responden con sus ofertas de CPM (digamos 1 dólar y 1,50 dólares) y Prebid.js realiza una solicitud al servidor de anuncios, con la orientación de CPM más alta. En este caso, sería $1,50.

En el servidor de anuncios, en nuestro caso Google Ad Manager, se recibe la solicitud y se sabe que alguien está pagando $1,50 USD CPM por un anuncio. Realiza otra subasta con Google Adsense o AdX.

Si Google ofrece un CPM más alto, se publicará el anuncio de Google.

De lo contrario, nuestro anuncio con un CPM de 1,50 $ ganará y será publicado por nuestro socio SSP.

El truco aquí es que las subastas se realizan en tiempo real, lo que crea presión de compra sobre Google AdX para que pague el CPM más alto posible.

Si Google AdX no tiene competencia, ofrecerá el CPM más bajo posible, ya que quiere comprar inventario al precio más barato posible.

Con las ofertas de encabezado, los postores pueden competir y aumentar los CPM (y, por lo tanto, los ingresos).

Hay dos formas de implementar las ofertas de encabezado:

Del lado del cliente: cuando la subasta se ejecuta a través de JavaScript en el navegador.
Lado del servidor: cuando la subasta se ejecuta en el servidor.

Analicemos las ofertas de encabezado del lado del cliente.

Cómo implementar la oferta de encabezado del lado del cliente

Para configurar las ofertas de encabezado, debemos implementar Prebid.js en nuestro sitio web y configurar nuestro Google Ad Manager (o servidor de anuncios). Prebid.js

Implemente Prebid.js en su sitio web

Prebid.js es una plataforma de header bidding que tiene más de 200 fuentes de demanda integradas. Prebid.js

Debe seleccionar los socios de SSP con los que está trabajando en la página de personalización y descargar la biblioteca creada para su configuración específica. customize page

No olvide seleccionar los módulos de Gestión de consentimiento para cumplir con los estándares de privacidad GDPR y GPP.

A continuación se muestra el código de muestra tomado de la documentación oficial. documentation

<html>

    <head>        
        <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
        <script async src="//your-customized-prebid.js"></script>
        <script>
            var div_1_sizes = [
                [300, 250],
                [300, 600]
            ];
            var div_2_sizes = [
                [728, 90],
                [970, 250]
            ];
            var PREBID_TIMEOUT = 1000;
            var FAILSAFE_TIMEOUT = 3000;

            var adUnits = [
                {
                    code: '/19968336/header-bid-tag-0',
                    mediaTypes: {
                        banner: {
                            sizes: div_1_sizes
                        }
                    },
                    bids: [{
                        bidder: 'appnexus',
                        params: {
                            placementId: 13144370
                        }
                    },
                     { 
                      bidder: "conversant",
                       params: {site_id:"122869",secure:1}
                     }
                   ]
                },
                {
                    code: '/19968336/header-bid-tag-1',
                    mediaTypes: {
                        banner: {
                            sizes: div_2_sizes
                        }
                    },
                    bids: [{
                        bidder: 'appnexus',
                        params: {
                            placementId: 13144370
                        }
                    },
                    { 
                     bidder: "conversant",
                     params: {site_id:"122869",secure:1}
                    }
                     ]
                }
            ];
            
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            googletag.cmd.push(function() {
                googletag.pubads().disableInitialLoad();
            });

            var pbjs = pbjs || {};
            pbjs.que = pbjs.que || [];

            pbjs.que.push(function() {
                pbjs.addAdUnits(adUnits);
                pbjs.requestBids({
                    bidsBackHandler: initAdserver,
                    timeout: PREBID_TIMEOUT
                });
            });

            function initAdserver() {
                if (pbjs.initAdserverSet) return;
                pbjs.initAdserverSet = true;
                googletag.cmd.push(function() {
                    pbjs.que.push(function() {
                        pbjs.setTargetingForGPTAsync();
                        googletag.pubads().refresh();
                    });
                });
            }
            // in case PBJS doesn't load
            setTimeout(function() {
                initAdserver();
            }, FAILSAFE_TIMEOUT);

            googletag.cmd.push(function() {
                googletag.defineSlot('/19968336/header-bid-tag-0', div_1_sizes, 'div-1').addService(googletag.pubads());
                googletag.pubads().enableSingleRequest();
                googletag.enableServices();
            });
            googletag.cmd.push(function() {
                googletag.defineSlot('/19968336/header-bid-tag-1', div_2_sizes, 'div-2').addService(googletag.pubads());
                googletag.pubads().enableSingleRequest();
                googletag.enableServices();
            });

        </script>

    </head>

    <body>
        <h2>Basic Prebid.js Example</h2>
        <h5>Div-1</h5>
        <div id='div-1'>
            <script type='text/javascript'>
                googletag.cmd.push(function() {
                    googletag.display('div-1');
                });

            </script>
        </div>

        <br>

        <h5>Div-2</h5>
        <div id='div-2'>
            <script type='text/javascript'>
                googletag.cmd.push(function() {
                    googletag.display('div-2');
                });

            </script>
        </div>

    </body>

</html>

Analicemos el código anterior.

Las primeras líneas cargan todos los archivos JS necesarios y nuestro archivo Prebid.JS personalizado.
Los espacios publicitarios se definen en la variable de matriz adUnits.
En las definiciones de espacios publicitarios, puede ver los nombres y los ID de los socios de SSP que se le proporcionarán al incorporarlos.
googletag.pubads().disableInitialLoad();
La función pbjs.requestBids llama a los socios del SSP y determina el ganador.
Se llama a la función initAdserver() para enviar una solicitud de anuncio al Administrador de anuncios de Google con la clave hb_pb, que contiene el valor de CPM ganador, por ejemplo. hb_pb=”1.5″ (Este paso está relacionado con la configuración de Google Ad Manager en el siguiente paso).
Cuando Google Ad Manager recibe la solicitud con la oferta ganadora, ejecuta su propia subasta en Google AdX y devuelve el anuncio de AdX con un CPM más alto o el anuncio del SSP ganador.

Para su caso específico, es posible que necesite codificar de manera diferente y cambiar la configuración, pero el principio sigue siendo el mismo.

Aparte de eso, me gustaría repasar rápidamente cómo implementar la carga diferida, porque es un poco diferente.

Cómo implementar la carga diferida

La etiqueta de Google para editores tiene un marco de carga diferida que no funcionará en el caso de ofertas de encabezado. loading framework

Esto se debe a que necesita realizar una subasta y determinar y establecer valores clave antes de enviar una solicitud al servidor de anuncios.

Por eso, recomendaría utilizar la API de Intersection Observer para determinar cuándo cargar el anuncio en la etiqueta HTML

cuando está a punto de ingresar a la ventana gráfica.

options = {
root: null, // relative to document viewport
rootMargin: '1500px', // margin around root. Values are similar to css property. Unitless values not allowed
threshold: 0 // visible amount of item shown in relation to root
};

your_observer = new IntersectionObserver( observer_handler, options );
your_observer.observe( goog_adslots[i] );

En la función de devolución de llamada del controlador del observador, puede ejecutar la subasta previa a la oferta y llamar al servidor de anuncios.

function observer_handler( entries, observer ) {

dynamicAdUnit =[{
code: 'your_html_div_id',
mediaTypes: {
banner: {
sizes: [728,90]
}
},
bids: [{ bidder: 'appnexus', params: { placementId: 13144370 } }, { bidder: "conversant", params: {site_id:"122869",secure:1} } ]
}];

pbjs.addAdUnits(dynamicAdUnit);

slot = window.googletag.defineSlot('/1055389/header-bid-tag-0', [728,90], 'your_html_div_id' ).addService(googletag.pubads());

lazySlotPrebid(slot, 'your_html_div_id')

}

function lazySlotPrebid(slot, div_id) {

pbjs.que.push(function() {
pbjs.request bids({
timeout: PREBID_TIMEOUT,
adUnitCodes: [div_id],
bidsBackHandler: function() {
pbjs.setTargetingForGPTAsync([div_id]);
googletag.pubads().refresh(slot);

});
});

} 
}// endd of initDynamicSlotPrebid

Ahora, pasemos a configurar el servidor de anuncios utilizando Google Ad Manager.

Cómo configurar GAM para ofertas de encabezado

Los servidores de anuncios deben tener docenas de líneas de pedido con prioridad de precio con la clave hb_pb orientada a todos los valores de CPM posibles, como hb_pb=0,04, hb_pb=0,03, etc.

Este es el punto clave que hace que el motor de ofertas de encabezado funcione.

La subasta se ejecuta en el navegador al cargar la página.
El socio SSP ganador se envía a GAM con un valor clave dirigido a hb_pb = 2,62.
Como la orden tiene el mismo valor de CPM, GAM entiende que hay una puja de 2,62$.
GAM realiza una subasta de AdX y tiene que pagar más de 2,62 dólares para ganar la oferta y mostrar un anuncio de Google.

Como mencioné anteriormente, necesitaría crear líneas de pedido en GAM con cierta granularidad, digamos 0,01, y para el rango de CPM de $0 a $20, necesitaría crear 2000 líneas de pedido, lo cual es imposible de hacer manualmente. manually

Para eso, necesitarías usar la API de GAM.

Desafortunadamente, no existen soluciones sólidas que pueda simplemente descargar y ejecutar con un solo clic.

Es una tarea algo compleja, pero gracias a los contribuyentes que crearon herramientas API (aunque no las apoyan activamente), aún podemos modificarla un poco y hacer que funcione.

Profundicemos en cómo configurar Google Ad Manager y comprendamos lo siguiente:

Crea credenciales de GAM.
Instale PHP (use XAMPP, que es gratuito).
Compositor.
Herramienta de configuración de elementos de línea de oferta previa.
Git (opcional).

Paso 1: habilite el acceso a la API

En la sección Configuración general > Global del Administrador de anuncios de Google, asegúrese de que el acceso a la API esté habilitado.

Haga clic en el botón Agregar cuenta de servicio y cree un usuario con el nombre de muestra «USUARIO DE API GAM» y envíe un correo electrónico a «gam-api-user@sej-dfp.iam.gserviceaccount.com» con derechos de administrador.

Paso 2: crea un nuevo proyecto

Navegue a la página Credenciales de la consola API de Google. Google API Console Credentials

En el menú desplegable del proyecto, elija Crear un nuevo proyecto, ingrese un nombre para el proyecto y, opcionalmente, edite el ID del proyecto proporcionado.

Haga clic en Crear.

En la página Credenciales, seleccione Crear credenciales y luego seleccione Clave de cuenta de servicio.

Seleccione Nueva cuenta de servicio y seleccione JSON.

Haga clic en Crear para descargar un archivo que contiene una clave privada.

Asigne el rol de «propietario» y cree las credenciales OAuth2 de la cuenta de servicio. OAuth2 credentials

Luego, haga clic en el usuario creado, cree la clave de tipo JSON y descárguela.

Paso 3: Descargar Proyecto

Descargue el archivo zip del proyecto y descomprímalo en el directorio (alternativamente, puede usar la herramienta de comando git para clonar el repositorio). zip file

Instale Composer para su sistema operativo para poder construir el proyecto. composer

Paso 4: cambia tu PHP.INI

Cambie su archivo php.ini (ubicado en /xampp/php/php.ini) y habilite «extension=soap» eliminando «;»

Paso 5: cree subcarpetas y cree el proyecto

Una vez que haya configurado y descomprimido todo, abra el archivo compositor.json y cambie “googleads/googleads-php-lib”: “^44.0.0” para usar la última versión “googleads/googleads-php-lib”: “^59.0

Busque la versión más reciente en el momento de realizar esto. version

Busque y reemplace en la carpeta /app/ del proyecto “v201911” con “v202202”, porque ese proyecto git no se actualizó desde 2019, para usar la ruta de la última versión de las bibliotecas.

Abra la línea de comando de su PC y cambie al directorio donde descomprimió los archivos (usando el comando cd o haga clic derecho dentro de la carpeta «Git bash aquí» si tiene git instalado) y ejecute la actualización del compositor en la terminal de la PC.

Creará subcarpetas y construirá el proyecto.

Paso 6: configure sus credenciales de Google Ad Manager

Mueve el archivo de clave JSON descargado «gam-api-54545-0c04qd8fcb.json» a la carpeta raíz del proyecto que has creado.

A continuación, descargue el archivo adsapi_php.ini y configure sus credenciales de Google Ad Manager en él. adsapi_php.ini

networkCode = "899899"
applicationName = "My GAM APP"
jsonKeyFilePath = "D:\xampp\htdocs\dfp-prebid-lineitems\gam-api-54545-0c04qd8fcb.json"
scopes = "https://www.googleapis.com/auth/dfp"
impersonatedEmail = "gam-api-user@sej-dfp.iam.gserviceaccount.com"

jsonKeyFilePath es la ruta absoluta del directorio al archivo de clave JSON en la raíz de la carpeta.

Paso 7: establezca el contenido del archivo

Finalmente, navegue hasta el archivo /script/tests/ConnexionTest.php y configure el contenido del archivo como se muestra a continuación:

putenv('HOME='.dirname(__DIR__)."/../");
require __DIR__.'/../../vendor/autoload.php';

$traffickerId = (new \App\AdManager\UserManager())->getUserId();

if (is_numeric($traffickerId)) {
echo "\n====Connexion OK====\n\n";
} else {
echo "\n===Connexion KO====\n\n";
}

En su terminal (o consola git bash), pruebe la conexión ejecutando el comando (si está en la carpeta /script/tests/).

php ConnexionTest.php

Deberías ver un mensaje “====Conexión OK====”

Paso 8: configurar los parámetros

Navegue hasta el archivo /script/tests/ConnexionTest.php en su proyecto y ábralo.

Copie y pegue el siguiente código en ese archivo y configure los parámetros en las matrices $entry y $buckets según sus necesidades.

putenv('HOME='.dirname(__DIR__)."/../");
require __DIR__.'/../../vendor/autoload.php';

use App\Scripts\HeaderBiddingScript;

$bucket_range = array();
$Your_Advertiser_Name = 'Sample_Advertiser';
$buckets =
["buckets" =>[
['precision' => 2, 'min' => 0, 'max' => 4.00, 'increment' => 0.01],
['precision' => 2, 'min' => 4.01, 'max' => 8.00, 'increment' => 0.05],
]
];

foreach ( $buckets["buckets"] as $k => $bucket ){

$request_bucket = array( 'buckets' => array( $bucket ) );

$order_name = 'Your_Order_name '.$bucket['min'].'-'.$bucket['max'];
// echo $order_name.'<br/><br/>';


$entry = [
'priceGranularity' => $request_bucket, // can be 'low', 'med', 'high', 'auto','dense', 'test'
'currency' => 'USD',
//'sizes' => [ [1,1] ,[160, 600], [250, 250], [300, 250], [300, 600], [320, 50], [320, 100], [300, 100], [336, 280], [728, 90], [970, 90], [970, 250]],
'sizes' => [ [250, 250] ],
'orderPrefix' => $Your_Advertiser_Name, //prebid advertiserName
'orderName' => $order_name
];
$script = new HeaderBiddingScript();
$script->createGlobalAdUnits($entry);

}

Opcionalmente, también puede especificar ‘geoTargetingList’ => “dz, pk, ke, pt” o un valor de clave personalizado orientado a customTargeting’ => [‘amp_pages’ => yes’] si desea que su oferta de encabezado funcione solo cuando la clave personalizada

Ejecute el siguiente comando y comenzará a crear líneas de pedido según la configuración del depósito que haya especificado.

php ConexiónTest.php

Existe una herramienta que usa Python y que se usa de manera similar; using Python

Depuración

Para la depuración, existen algunos complementos del navegador que puede utilizar para ver si la subasta se ejecuta sin errores.

Alternativamente, abra la URL de su página web usando el parámetro “/?pbjs_debug=true” al final de la URL y observe los mensajes de registro de la consola.

Debe asegurarse de que los valores clave hb_pb se pasen a Google Ad Manager. Utilice “/?google_console=1” al final de la URL para abrir la consola GAM y haga clic en “Diagnóstico de entrega” de cada bloque de anuncios.

Debería ver que los valores hb_pb están configurados y pasados al servidor de anuncios.

Elija un sistema de gestión del consentimiento

La privacidad de los usuarios es uno de los factores más importantes y usted desea asegurarse de cumplir tanto con GDPR como con GPP.

Las instrucciones detalladas sobre cómo configurar un sistema de gestión de consentimiento en su contenedor se encuentran aquí. here.

Hay muchos proveedores que cumplen con los últimos estándares de IAB y estos son algunos de los más populares: IAB’s

Conclusión

Puede que le resulte sorprendente que configurar las ofertas de encabezado implique tantos pasos, pero realmente vale la pena implementarlo. Puede aumentar fácilmente sus ingresos en un +30% o más al crear presión de venta en Google Ads.

Esta guía es para usuarios con conocimientos técnicos, pero si tiene preguntas o problemas, existe un canal de Adops Slack al que puede suscribirse y hacer preguntas a la comunidad. Adops slack channel

Espero que después de leer este artículo, le resulte más fácil configurar las ofertas de encabezado y mejorar la monetización de su sitio web.

Más recursos:

Imagen destacada: Diario del motor de búsqueda

Leer el articulo original en Search Engine Journal.