Header bidding beépítése Prebid használatával

Csentes Zoltán    2019-08-08
elolvasom

Főoldal > ADOPS

Ha kiadónál vagy AdOps és szeretnél RTB hirdetéseket megjeleníteni az oldaladon, akkor jó helyen jársz. Ebben a posztban azt mutatom be, hogyan implementáld a Prebid-et és hogyan kösd össze az adszervereddel. Erősen technikai poszt következik. Ha azt se tudod mi az a header bidding, akkor előbb olvasd el a korábbi posztot.

Mi az a Prebid

A Prebid egy open-source fejlesztés, ami lehetővé teszi a publishereknek, hogy implementálják a header biddinget a weboldalaikra vagy alkalmazásaikba. Jelenleg a Prebid a legszélesebb körben használt "wrapper", több mint 60+ partnerrel. A platform előnye, hogy ingyenes, szinte az összes nagy header bidding szolgáltató benne van, asynchronous kiszolgálás nem akasztja meg az oldalt és különböző analitikai eszközöket is nyújt.

Hogyan működik

  1. oldal betöltéskor az adszerver tagek megállításra kerülnek egy időzítő által
  2. ez idő alatt a Prebid lefolytatja az aukciókat, begyűjti a bideket, kreatívokat az SSP-ktől
  3. ezután továbbítja az összes kapott információt (beleértve az árat is) az adszerver tagjának, ami ezt továbbítja az adszervernek query stringben
  4. az adszerver sorba rendezi a beérkezett bideket
  5. ha az adszerver úgy dönt, hogy a Prebid nyert, akkor megadja a jelet a Prebidnek a kreatív megjelenítésére

A Prebid két részből áll. Egy core-ból és több adapterből. A core végzi az összes alap műveletet: elküldi a kérelmet a partnereknek, kezeli a visszajött bideket, küldi az adatokat adszervernek. Az adapter határozza meg, hogy a kiadó, milyen partnerekkel kíván együtt dolgozni. Kétfajta adapter létezik: demand és analitika. A demand adapterek a tényleges SSP-k akikkel dolgozni fogunk. Jelenleg több mint 60 ilyen van a rendszerben. Az analitika adapter pedig azt teszi lehetővé, hogy pl összekössük a Prebid adatainkat Google Analyticsel. Erről bővebb infót itt olvashatsz.

Beépítés az oldalba

Először is ki kell választanunk, hogy mely szolgáltatókat engedjük be a versenybe, majd ezeket kipipálva töltsük le a prebid.js fájlt innen és másoljuk fel a szerverre.

A beépítésnek az oldalban így kell kinéznie, magyarázatot alatta találsz:


<html>
<head>
  <!-- Prebid Config Section START -->
  <!-- Make sure this is inserted before your GPT tag -->
  <script> 
    var PREBID_TIMEOUT = 700;

    var adUnits = [{
        code: ' div-gpt-ad-1460505748561-0',
        sizes: [[300, 250], [300,600]],
        bids: [{
            bidder: 'appnexus',
            params: {
               placementId: '10433394'
            }
        }]
    },{
        code: ' div-gpt-ad-1460505661639-0',
        sizes: [[728, 90], [970, 90]],
        bids: [{
            bidder: 'appnexus',
            params: {
               placementId: '10433394'
            }
        }]
    }];

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

    pbjs.que. push(function() {
        pbjs. enableSendAllBids();
    });

  </script>
  <!-- Prebid Config Section END -->
  
  <!-- Prebid Boilerplate Section START. No Need to Edit. -->
  <script type="text/javascript" src="//acdn.adnxs.com/prebid/ not-for-prod/prebid.js" async></script>
  <script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    googletag.cmd.push(function() {
        googletag.pubads(). disableInitialLoad();
    });

    pbjs.que.push(function() {
        pbjs.addAdUnits (adUnits);
        pbjs.requestBids({
            bidsBackHandler: sendAdserverRequest
        });
    });

    function sendAdserverRequest() {
        if (pbjs.adserverRequestSent) return;
        pbjs.adserverRequestSent = true;
        googletag.cmd.push( function() {
            pbjs.que.push(function() {
                pbjs.setTargetingForGPTAsync();
                googletag.pubads(). refresh();

                var targetingParams = pbjs.getAdserverTargeting();
                var container = document.getElementById ('container');
                container.innerHTML = JSON.stringify (targetingParams, null, 2);
            });
        });
    }

    setTimeout(function() {
        sendAdserverRequest();
    }, PREBID_TIMEOUT);

  </script>
  <!-- Prebid Boilerplate Section END -->

  <script>
    (function () {
        var gads = document.createElement ('script');
        gads.async = true;
        gads.type = 'text/javascript';
        var useSSL = 'https:' == document.location. protocol;
        gads.src = (useSSL ? 'https:' : 'http:') +
                '//www.googletagservices.com/ tag/js/gpt.js';
        var node = document. getElementsByTagName ('script')[0];
        node.parentNode. insertBefore(gads, node);
    })();
  </script>

  <script>
    googletag.cmd.push (function () {
        googletag.defineSlot ('/ 19968336/header-bid-tag-0', [[300, 250], [300, 600]], 'div-gpt-ad-1460505748561-0') .addService(googletag.pubads());

        googletag.defineSlot( '/ 19968336/header-bid-tag1', [[728, 90], [970, 90]], 'div-gpt-ad-1460505661639-0') .addService(googletag.pubads());

        googletag.pubads(). enableSingleRequest();
        googletag.enableServices();
    });
  </script>
</head>

<body>
<h2>Prebid.js Test</h2>

<div id="container">pbjs. getAdserverTargeting() Response</div>

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

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

</body>
</html>

Magyarázat:

var PREBID_TIMEOUT = 700; // itt állítjuk be hogy a header biddingre mennyi ms időt szánunk, eddig akasztja meg az adszervert

var adUnits // itt kell definiálnunk az oldal minden reklámzóna div-jét, a méreteket és a biddereket. Ezt a részt minden oldalnál be kell állítanunk. Célszerű ezt külön js-ben kiszolgálni.

Innentől lefelé már nem kell semmit sem változtatni a kódon.

A prebid.js-t asynkron futással illesszük be, ez teszi lehetővé, hogy az oldal tovább töltődjön és ne akadjon meg a js-nél:

<script async src="//acdn.adnxs.com/ prebid/ not-for-prod/prebid.js"></script>

endAdserverRequest() // ha minden bid megvan, vagy lejárt az idő, elküldjük az adatokat adszervernek

Beállítás adszerver oldalon

Ha mindent jól építettünk be az oldalba, akkor a prebid.js egy query stringben átadja az adszervernek az összes biddert. Ahhoz, hogy az adszerver el tudja dönteni kinek adja a hirdetési zónát, line itemet kell létrehoznunk adszerverben méghozzá annyit ahány árat kezelünk.

Ha pl. a bideket 1 centenként nézzük egészen 10$-ig, akkor az 1000 sor. Ha 10 kreatív méretünk van és 5 biddert engedünk be, akkor az összesen 50.000 sor lenne az adszerverben!!! Nyilván ez nem járható út, ezért a prebid.js annyiban segít nekünk, hogy egy sort használ minden bidderre és minden kreatívra. Így már csak 1.000 sorrol beszélünk.

Jó persze ez sem lehet opció, mert nincs az az adszerveres aki ezt végigjátszaná. Ezért javasolt nagyobb bontásban felvenni a sorokat pl. ne centenként, hanem fél vagy 1 dolláronként. Így máris letornáztuk 20 sorra.

Itt egy leírás és egy videó, hogyan kell egy line itemet felvinni DFP-ben:

Megosztani ér:

Kérjen Google Analytics Auditot

Ne hagyja elveszni az értékes adatokat! Ha nem jól működik az Analitika lehetőséget és pénzt veszít. Kérjen Google Analytics auditot és átnézem a teljes fiók beállítását.