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, hasta niveles del 100 % o más).

¿Qué es la oferta de encabezado?

La oferta de encabezado es una técnica de vanguardia 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 potencie su monetización.

• Solicite a los socios de SSP y obtenga la 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 de SSP

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

• TripleLift.
• Intercambio de índices.
• AmazonUAM/TAM.
• Xandr (anteriormente AppNexus).
• tés
• pubmático.
• Sovrn.
• Verizon.
• Magnite (anteriormente Rubicón).
• AbrirX.
• Sonobi.
• Goma de chicle.
• Compartir a través.
• Unurly.

Uno necesita 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 se ve así:

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

Sí, eso es un asombroso máximo de 50 millones de impresiones de anuncios al mes.

Es posible que necesite un sitio web bastante impresionante para poder aplicar a algunas de las redes publicitarias. Los llamaremos postores adicionales, 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 tienen en cuenta la calidad de la audiencia, la geolocalización del tráfico, el tiempo que los usuarios pasan en el sitio web, etc.

Por lo general, toma algunas semanas después de la solicitud para ser aprobado e incorporado con ellos, por lo que puede ser un proceso bastante lento que incluso puede demorar meses en completarse.

¿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 de SSP).

Los postores responden con sus ofertas de CPM, digamos $ 1 y $ 1,50, 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 sabe que alguien está pagando $1.50 USD CPM por un anuncio. Ejecuta 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 de SSP.

El truco aquí es que las subastas ocurren en tiempo real, lo que crea presión de compra en Google AdX para pagar 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 bajo 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 header bidding:

• 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 las ofertas de encabezado del lado del cliente

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

Implemente Prebid.js en su sitio web

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

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

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.

<html>

    <head>        
        <script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
        <script async src="https://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>

Vamos a desglosar el código de arriba.

• 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 los espacios publicitarios, puede ver los nombres y los ID de los socios de SSP que se le proporcionarán cuando los incorpore.
• googletag.pubads().disableInitialLoad(); se llama para inhabilitar el envío de solicitudes de anuncios a Google Ad Manager hasta que Prebid.js finalice la subasta.
• La función pbjs.requestBids llama a los socios de SSP y determina el ganador.
• Se llama a la función initAdserver() para enviar una solicitud de anuncio a Google Ad Manager 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 deba 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 las ofertas de encabezado.

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 usar la API Intersection Observer para determinar cuándo cargar el anuncio en la etiqueta HTML

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] );

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

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"

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";
}

php ConnexionTest.php

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

}

Con información de Search Engine Journal.

Leer la nota Completa > ¿Qué es la oferta de encabezado?