Header Bidding

From LoopMe Wiki
Jump to: navigation, search

Header bidding allows you to integrate LoopMe ad spot via Prebid.js technology if you already use it. For more details about Prebid.js please visit http://prebid.org/overview/intro.html.
This solution allows you to run:

  • Out-stream VAST/VPAID video
  • MPU banner RichMedia and Static ads

Step 1. Prebid.js file

1. Download the prebid.js file from here: http://prebid.org/download.html
2. Make sure you've selected LoopMe adaptor to be included
LoopMe checkbox.png


3. Download the configured package:
DownLoad button.png


4. Store the file on your server/site. You will need this path in the next step.

Step 2. Insert LoopMe tag

Insert LoopMe ad spot tag into your page. The example below uses the MPU size (300x250) ad spot.

...
var adUnits = [{
  code: 'div-prebid',
  mediaTypes: {
    banner: {
      sizes: [[300, 250]]
    }
  },
  bids: [{
    bidder: 'loopme',
    params : {
      ak : "3df93a0f34" //test ak, please replace to yours after the test
    }
  }]
}];
...


For more details on LoopMe adaptor parameters please see: http://prebid.org/dev-docs/bidders.html#loopme
If you don't have a test page you can use the code below in http://jsfiddle.net
Test page example:

<html>

    <head>
        <link rel="icon" type="image/png" href="/favicon.png">
        <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
        <script async src="REPLACE_WITH_THE_PATH_TO_THE_PREBID_JS_FROM_STEP_1"></script>
        <script>
            var div_1_sizes = [
                [300, 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: 'loopme',
                        params: {
                            ak: '3df93a0f34'
                        }
                    }]
                }
            ];

            // ======== DO NOT EDIT BELOW THIS LINE =========== //
            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();
            });            

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

    </body>

</html>


More examples of integration Prebid.js adaptors can be seen here: http://prebid.org/dev-docs/examples/basic-example.html

Step 3. Confirm you see the test ad

If you see the test video:
Test Video.png

then you can replace the test value '3df93a0f34' in the LoopMe tag with your real app key received from LoopMe account manager and consider the tech part of the integration complete.