Skip to content

Instantly share code, notes, and snippets.

@cwbeck
Created Aug 5, 2016
Embed
What would you like to do?
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);
}
}
}
}
});
@brondsem
Copy link

brondsem commented Aug 5, 2016

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');
}

@mkendall07
Copy link

mkendall07 commented Aug 5, 2016

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

@levjad
Copy link

levjad commented Dec 2, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment