Part 2: Technical Implementation

Edited

Quick Start

The easiest way to get started with Header-Bidding is to use the following example.

<script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script src="//connectad.io/stage/adapter/prebid2270.js" async></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: 'connectad',
                        params: {
                            siteId: 123456,
                            networkId: 123456,
                            bidfloor: 0.10
                        }
                    }]
                },
                {
                    code: '/19968336/header-bid-tag-1',
                    mediaTypes: {
                        banner: {
                            sizes: div_2_sizes
                        }
                    },
                    bids: [{
                        bidder: 'connectad',
                        params: {
                            siteId: 123456,
                            networkId: 123456,
                            bidfloor: 0.10
                        }
                    }]
                }
            ];

            // ======== 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();
            });
            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>

1. Register bidder tag IDs
In a simple JSON config, define a mapping of the bidders’ tag Ids to your ad units. Load prebid.js library async. Call pbjs.requestBids() to send header bidding requests async to all bidders you’ve specified.

<script src="//connectad.io/stage/adapter/prebid2270.js" async></script>
pbjs.que.push(function() {
  var adUnits = [{
	code: "div-gpt-ad-1438287399331-0",
    mediaTypes: {
        banner: {
             sizes: div_1_sizes
             }
    },
	bids: [{
	  bidder: "connectad",
	  params: {
      networkId: '10047',
      siteId: '123456'
	  }
	}, {
	  bidder: 'TO ADD',
	  params: { tagId: 'TO ADD' }
	}, {
	  bidder: "TO ADD",
	  params: { placementId: "TO ADD" }
	}]
  }];
  pbjs.addAdUnits(adUnits);

  pbjs.requestBids({
	bidsBackHandler: function() {
	  // callback when requested bids are all back
	}
  });
});

Good to know

code = Google DFP AdSlot DIV-ID
mediatype.banner.sizes = Requested AdSlot sizes
bids = Header-Bidding Adapter Configuration
siteID = please ask your ConnectAd Accounter Manager for your siteID

2. Set the ad server timeout
Define the timeout to let your ad server wait for a few hundred milliseconds, so the bidders can respond with bids.

PREBID_TIMEOUT = 1000;
function sendAdserverRequest() {
    (function() {
        // Send ad server ad request here
    })();
};
setTimeout(initAdserver, PREBID_TIMEOUT);

3. Set bid targeting
Call the helper function setTargetingForGPTAsync() to handle all the targeting for all bidders in your Google DFP Setup.

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

Working Demo

To get a better understanding how Header-Bidding works, please find below a working ConnectAd/Google DFP integration.

<html>
<head>
<link rel="icon" type="image/png" href="/favicon.png">
<script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script src="//connectad.io/stage/adapter/prebid2270.js" async></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: 'connectad',
                        params: {
                            siteId: 123456,
                            networkId: 123456,
                            bidfloor: 0.10
                        }
                    }]
                },
                {
                    code: '/19968336/header-bid-tag-1',
                    mediaTypes: {
                        banner: {
                            sizes: div_2_sizes
                        }
                    },
                    bids: [{
                        bidder: 'connectad',
                        params: {
                            siteId: 123456,
                            networkId: 123456,
                            bidfloor: 0.10
                        }
                    }]
                }
            ];

            // ======== 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();
            });
            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>