render.js

render.js

define(['require','jq','project/ads/request','core/log'],function(require, jq, adRequest, log) {
  return {
    adRenderStack: [],
    processRenderStack: function(){
      var self = require('project/ads/render');
      while(self.adRenderStack.length > 0){
        log.display('Loader: Rendering Won Unit');
        var winData = self.adRenderStack.pop();
        self.render(winData.bid);
      }
    },
    renderFromUrl: function(container, bid){
      var self = require('project/ads/render');
      bid.ad = '<iframe src="'+bid.adUrl+'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="'+bid.width+'" height="'+bid.height+'"><\/iframe>';
      self.renderFromHTML(container, bid);
    },
    renderFromHTML: function(container, bid){

      if(log.isDebugMode()){
        
        var infoClose = jq('<div>')
          .css('float','right')
          .css('margin-right',5)
          .css('margin-top',5)
          .css('color', log.getTextColor())
          .css('font-family','Tahoma, Geneva, sans-serif')
          .css('font-size','12px')
          .css('letter-spacing','2px')
          .css('cursor', 'pointer')
          .on('click', function(){
            jq(this).parent().remove();
          })
          .html('[x]');
        
        var infoContainer = jq('<div>')
          .css('border-left','10px solid '+log.getTextColor())
          .css('width',bid.width-10)
          .css('height',bid.height)
          .css('overflow-y','scroll')
          .css('position','absolute')
          .css('top',0)
          .css('left',0)
          .css('z-index','10000')
          .css('text-align','left')
          .css('background-color','rgba(255, 255, 255, 0.9)')
          .append(infoClose);
          
        infoContainer.append(jq('<div>')
          .css('padding','2px')
          .css('color', '#000000')
          .css('font-family','Tahoma, Geneva, sans-serif')
          .css('font-size','10px')
          .css('font-weight','bold')
          .css('letter-spacing','1px')
          .html('Win from '+bid.bidder+' @ $'+bid.cpm.toFixed(2)));
        
        infoContainer.append(jq('<div>')
          .css('padding','2px')
          .css('color', '#000000')
          .css('font-family','Tahoma, Geneva, sans-serif')
          .css('font-size','10px')
          .css('letter-spacing','1px')
          .html('Placement ID: '+bid.placementId+' | Win Type: '+bid.winType));
        
        if(bid.creative_id){
          infoContainer.append(jq('<div>')
            .css('padding','2px')
            .css('color', '#000000')
            .css('font-family','Tahoma, Geneva, sans-serif')
            .css('font-size','10px')
            .css('letter-spacing','1px')
            .html('Creative ID: '+bid.creative_id));
        }

        for(var i=0; i<bid.landscape.length; i++){
          var landscapeBid = bid.landscape[i];
          var infoPart = jq('<div>')
            .css('padding','2px')
            .css('color', '#000000')
            .css('font-family','Tahoma, Geneva, sans-serif')
            .css('font-size','10px')
            .css('letter-spacing','1px')
            .html('- Bid ['+landscapeBid.bid_width+'x'+landscapeBid.bid_height+'] '+landscapeBid.bidder+' @ $'+landscapeBid.n_cpm.toFixed(2)+' | RT: '+landscapeBid.latency+'ms');
          infoContainer.append(infoPart);
        }

        container
          .css('position','relative')
          .append(infoContainer);

      }
      
      container.css('width', bid.width);
      container.css('height', bid.height);
      container.css('margin', '0px auto');
      
      var loadingFrame = container.find('iframe')
        .attr('width',bid.width)
        .attr('height',bid.height);
      var loadingFrameWindow = (loadingFrame[0].contentWindow) ? loadingFrame[0].contentWindow : (loadingFrame[0].contentDocument.document) ? loadingFrame[0].contentDocument.document : loadingFrame[0].contentDocument;
    
      try{
        if(loadingFrameWindow.parent.frameElement){
          var parentFrameId = jq(loadingFrameWindow.parent.frameElement).attr('id');
          if(parentFrameId.match(/google\_ads/)){
            jq(loadingFrameWindow.parent.frameElement).attr('width',bid.width).attr('height',bid.height);
          }
        }
      } catch(err) { }
    
      var adFrame = jq(loadingFrameWindow.document).find('iframe')
        .attr('width',bid.width)
        .attr('height',bid.height);
      var adFrameWindow = (adFrame[0].contentWindow) ? adFrame[0].contentWindow : (adFrame[0].contentDocument.document) ? adFrame[0].contentDocument.document : adFrame[0].contentDocument;
      adFrameWindow.document.open();
      adFrameWindow.document.write(bid.ad);
      adFrameWindow.document.close();
      
    },
    render: function(bid){
      var self = require('project/ads/render');
      var placementMatch = adRequest.placements[bid.adUnitCode] || null;
      if(placementMatch == null){
        log.display('Loader: Failed to find placement match for: '+bid.adUnitCode);
      } else {
        var container = jq(placementMatch.placementContainer);
        if(container.exists()){
          if(bid.adUrl){
            self.renderFromUrl(container, bid);
          } else if(bid.ad){
            self.renderFromHTML(container, bid);
          } else {
            log.display('Loader: Unsupported rendering type for: '+bid.bidder);
          }
        } else {
          log.display('Loader: Failed to find container for: '+bid.adUnitCode);
        }
      }
    }
  }
});

FWIW, here's one we use with console.table which lets you click on the headers and sort them, which is nice:

var responses = pbjs.getBidResponses();
var output = [];
for (var adunit in responses) {
    if (responses.hasOwnProperty(adunit)) {
        var bids = responses[adunit].bids;
        for (var i = 0; i < bids.length; i++) {
            var b = bids[i];
            output.push({
                'adunit': adunit, 'adId': b.adId, 'bidder': b.bidder,
                'time': b.timeToRespond, 'cpm': b.cpm, 'msg': b.statusMessage
            });
        }
    }
}
if (output.length) {
    if (console.table) {
        console.table(output);
    } else {
        for (var j = 0; j < output.length; j++) {
            console.log(output[j]);
        }
    }
} else {
    console.warn('NO prebid responses');
}

Thanks for sharing! I'm thinking that we might want to have this as an "add on" of sorts, so it doesn't have to be bundled with prebid core. We try to keep that filesize small and really the only people that would use it are troubleshooting...

n00b Question: How's this used with Prebid.js?