half circle

Quick Start


1. Load the Pubfood library

https://github.com/pubfood/pubfood/tree/master/dist
<script src="/pubfood.min.js"></script>
<script>/* Or, inline pubfood.min.js in your code */</script>
  • Line 1 - Load Pubfood

2. Define slots and determine which bid providers will bid on them

var pf = new pubfood();
pf.addSlot({
	name: '18752725/leaderboard_slot',
	elementId: 'div-gpt-ad-5119317744421-0',
	sizes: [[300, 250]],
	bidProviders: ['yieldbot']
});
  • Line 3 - DFP slot name
  • Line 4 - id of the element serving the ad
  • Line 5 - All sizes of the slot
  • Line 6 - Bidders you want to serve on this unit

3. Declare each header bidder you want to integrate into pubfood

pf.addBidProvider({
      name: 'yieldbot',
      libUri: 'http://cdn.yldbt.com/js/yieldbot.intent.js',
      init: function(slots, pushBid, done) {
          ybotq.push(function() {
             yieldbot.psn('0000');
             for (var k = 0; k < slots.length; k++) {
                  var slot = slots[k];
                  yieldbot.defineSlot(slot.getParam('yieldbot').slot, {
                      sizes: slot.sizes
                  });
              }
              yieldbot.enableAsync();
              yieldbot.go();
          });
          ybotq.push(function() {
              var criteria = yieldbot.getPageCriteria(); // e.g. medrec:300x250:300
              if (criteria) {
                  pushBid({
                      targeting: {
                          ybot: criteria
                      }
                  });
              }
              done();
          });
      },
      refresh: function(slots, pushBid, done) {
        }
});
  • Line 2 - Bidder name
  • Line 3 - Bid provider JavaScript library
  • Line 4 - Function to initialize bids
  • Line 15 - Submit a bid with the pushBid({}); callback
  • Line 24 - Notify Pubfood.js with the done(); callback
  • Line 27 - Function to refresh bids

4. Declare DFP

pf.setAuctionProvider({
  name: 'Google',
  libUri: 'http://www.googletagservices.com/tag/js/gpt.js',
  init: function(targeting, done) {
      googletag.cmd.push(function() {
          for (var i = 0; i < targeting.length; i++) {
              var tgtObject = targeting[i];
              var gptObject;
              if (tgtObject.name) {
                  gptObject = googletag.defineSlot(tgtObject.name, tgtObject.sizes, tgtObject.elementId)
                                  .addService(googletag.pubads());
              } else {
                  gptObject = googletag.pubads();
              }
              for (var p in tgtObject.targeting) {
                  gptObject.setTargeting(p, tgtObject.targeting[p]);
              }
          }
      });
      googletag.cmd.push(function() {
          googletag.pubads().enableSingleRequest();
          googletag.enableServices();
          done();
      });
  },
  refresh: function(targeting, done) {
    done();
  }
});
  • Line 2 - The auction provider name
  • Line 3 - The auction provider JavaScript library
  • Line 4 - The function to initialize the auction
  • Line 23 - Notify Pubfood.js with the done(); callback
  • Line 26 - The function to refresh with a new auction
  • Note: Pubfood also supports other ad servers.

5. Start the auction

pf.timeout(1500);
  pf.observe(function(ev) {
    console.log(ev);
  });
  pf.start();
  • Line 1 - Bidders need to respond within this time
  • Line 2 - Observe all events for debugging
  • Line 5 - Start the auction

6. Declare where you will display ads

pf.observe('AUCTION_POST_RUN', function() {
  googletag.cmd.push(function() {
    googletag.display('div-gpt-ad-5119317744421-0');
  });
});
  • Line 1 - Observe the auction provider
  • Line 3 - The auction provider will display the ad

Nicely done. You completed this quick tutorial.
See the API REFERENCE for more.