prebid/prebid.github.io

Example for using Prebid without an Ad Server

kelvinbiffi opened this issue · 3 comments

kelvinbiffi commented

Hi, I'm trying to disable the Google Ad Server as Default Ad Server, however, I couldn't find documentation about that.

I found this example https://github.com/prebid/prebid.github.io/blob/master/examples/video/outstream/pb-ve-outstream-no-server.html about a video with no ad server, but the explanation text looks like be a Lorem Ipsum.

I tried to use the example code on the page, but I guess I'm doing something wrong, or the example is incomplete.

bretg commented

There's no such thing as a default ad server, so no need to disable GAM.

I'll assume you're looking for a better example on how to run without an ad server. That question came up recently, so happen to have a test file that won't take much work to round out.

  • 👍1
kelvinbiffi commented

Hi @bretg ,

After I asked about the example of how to render ads without adserver #3162

I found out some examples that together give me an idea of how to do it, then I created that example https://kelvins.cc/noserver-iframe.html

Maybe this could help the documentation

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script async src="//acdn.adnxs.com/prebid/not-for-prod/prebid.js"></script>
  <script>
    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];
        
    var sizes = [[300, 250], [320, 50], [728, 90], [300, 250]];

    bidders = [{
        bidder: 'appnexus',
        params: {
            placementId: 13144370
        }
    }];

    var adUnits = [
        {
            code: 'banner-300x250-ads',
            mediaTypes: {
                banner: {
                    sizes: sizes
                }
            },
            bids: bidders
        },{
            code: 'div-gpt-ad-1622936218622-0',
            mediaTypes: {
                banner: {
                    sizes: sizes
                }
            },
            bids: bidders
        }
    ];

    function createIframeAd(code) {
        var iframe = document.createElement('iframe');
        iframe.id= code + '_iframe' ;
        iframe.FRAMEBORDER="0";
        iframe.SCROLLING="no";
        iframe.MARGINHEIGHT="0";
        iframe.MARGINWIDTH="0";
        iframe.TOPMARGIN="0" ;
        iframe.LEFTMARGIN="0" ;
        iframe.ALLOWTRANSPARENCY="true";
        iframe.WIDTH="0";
        iframe.HEIGHT="0";
        iframe.scroll="false";

        return iframe;
    }

    function renderNonServer(code) {
        var adElement = document.getElementById(code);
        
        var iframe = createIframeAd(code);

        adElement.insertAdjacentElement('afterBegin', iframe);

        var iframeDoc = iframe.contentWindow.document;
        var adServerTargeting = pbjs.getAdserverTargetingForAdUnitCode(code);
        console.log(adServerTargeting, 'adServerTargeting');

        if (adServerTargeting && adServerTargeting['hb_adid']) {
            pbjs.renderAd(iframeDoc, adServerTargeting['hb_adid']);
        }

        iframeDoc.querySelector('head').insertAdjacentHTML('afterBegin', '<style>html,body{margin:0;padding:0;overflow:hidden;}</style>');
    }

    pbjs.que.push(function() {
        pbjs.addAdUnits(adUnits);
        pbjs.requestBids({
            timeout: 2000,
            bidsBackHandler: function(bids) {
                for (var unit in adUnits) {
                    var adUnit = adUnits[unit];
                    renderNonServer(adUnit.code);
                }
            }
        });
    });

</script>
</head>
<body>
  <h1>Heeader 1</h1>
  <p>Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem</p>
  
  <div id='banner-300x250-ads'>
  </div>

  <p>Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem</p>
  <p>Lorem ipsum doemet imus Lorem ipsum doemet imuss </p>
  
  <p>Lorem ipsum doemet imus Lorem ip</p>
  <div id='div-gpt-ad-1622936218622-0'>
  </div>
  <p>Lorem ipsum doemet imus Lorem ipsum doemet imus Lorem ipsum doemet imu</p>
</body>
</html>
bretg commented

This works too! The team discussed and has a slight preference for documenting the approach that doesn't use targeting. Closing the issue.

  • 👍1