Skip to content

Instantly share code, notes, and snippets.

@djrosenbaum

djrosenbaum/GPT_Debug_Bookmarklet.js

Last active March 26, 2018 01:21
Show Gist options
  • Save djrosenbaum/2676aa0d5915441190ffc7c868ec161b to your computer and use it in GitHub Desktop.
Save djrosenbaum/2676aa0d5915441190ffc7c868ec161b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
GPT_Debug_Bookmarklet.js
// GPT Bookmarklet
// javascript:function init(){let n,e;function t(){const n=$(this).attr("id");e.text(n)}function i(){const n=$(this).text(),e=(t=n,function(n,e){for(let t=0;t<n.length;t++)if(e(n[t]))return n[t]}(window.googletag.pubads().getSlots(),n=>n.getSlotElementId()===t));var t;if(e){const n=e.getResponseInformation();!function(n){const{slot:e,slotId:t,adUnitPath:i,advertiserId:o,campaignId:l,lineItemId:d,creativeId:a,sizes:r,slotTargetingKeys:g,serviceTargetingKeys:s,networkId:p}=n;$("#gpt_debug_overlay").html(`\n <div id="gpt_debug_underlay"></div>\n <ul>\n <button id="gpt_debug_close_overlay">CLOSE X</button>\n <li><b>Slot ID:</b> ${t}</li>\n <li><b>Ad Unit Path:</b> ${i}</li>\n <li><b>Advertiser ID: </b><a href="https://www.google.com/dfp/${p}#delivery/ListOrders/companyId=${o}" target="_blank">${o}</a></li>\n <li><b>Campaign ID: </b><a href="https://www.google.com/dfp/${p}#delivery/OrderDetail/orderId=${l}" target="_blank">${l}</a></li>\n <li><b>Line Item ID: </b><a href="https://www.google.com/dfp/${p}#delivery/LineItemDetail/lineItemId=${d}" target="_blank">${d}</a></li>\n <li><b>Creative ID: </b><a href="https://www.google.com/dfp/${p}#delivery/CreativeDetail/creativeId=${a}" target="_blank">${a}</a></li>\n <li><b>Sizes:</b></li>\n <li style="list-style: none;">\n <ol>\n ${r.reduce(function(n,e){return n+=`<li>${e.getWidth()}x${e.getHeight()}</li>`},"")}\n </ol>\n </li>\n <li><b>Service Targeting:</b></li>\n <li style="list-style: none;">\n <ol>\n ${s.reduce(function(n,e){return n+=`<li><b>${e}:</b> ${googletag.pubads().getTargeting(e)}</li>`},"")}\n </ol>\n </li>\n <li><b>Slot Targeting:</b></li>\n <li style="list-style: none;">\n <ol>\n ${g.reduce(function(n,t){return n+=`<li><b>${t}</b> ${e.getTargeting(t)}</li>`},"")}\n </ol>\n </li>\n </ul>\n `),$("#gpt_debug_overlay").show()}({slot:e,slotId:e.getSlotElementId(),adUnitPath:e.getAdUnitPath(),advertiserId:n.advertiserId,campaignId:n.campaignId,lineItemId:n.lineItemId,creativeId:n.creativeId,sizes:e.getSizes(),slotTargetingKeys:e.getTargetingKeys(),serviceTargetingKeys:googletag.pubads().getTargetingKeys(),networkId:e.getAdUnitPath().match(/\d+/)[0]})}}function o(){$("#gpt_debug_overlay").hide()}$("body").append("\n <style>\n #gpt_debug_header_bar {\n position: fixed;\n width: 100vw;\n height: 60px;\n font-family: 'helvetica', 'arial';\n font-size: 14px;\n background: rgba(255, 255, 255, 0.9);\n margin: 0;\n padding: 0;\n top: 0;\n left: 0;\n z-index: 9999999;\n box-shadow: 0px 1px 6px #444;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #gpt_debug_header_bar select {\n\n }\n\n #gpt_debug_slot_name {\n cursor: pointer;\n display: inline-block;\n }\n\n #gpt_debug_overlay {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n font-family: helvetica, arial;\n margin: 0;\n overflow-x: auto;\n overflow-y: scroll;\n z-index: 2147483646;\n }\n\n #gpt_debug_underlay {\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-color: rgba(0, 0, 0, 0.5);\n margin: 0;\n }\n\n #gpt_debug_overlay ul {\n width: 600px;\n margin: 10vh auto 0px;\n font-size: 16px;\n line-height: 40px;\n background-color: #fff;\n color: #333;\n padding: 50px;\n border-radius: 6px;\n box-shadow: 1px 1px 8px rgb(0, 0, 0);\n position:relative;\n word-wrap: break-word;\n list-style: disc;\n }\n\n #gpt_debug_overlay ol {\n list-style-type: decimal;\n text-indent: 10px;\n list-style-position: inside;\n }\n\n #gpt_debug_close_overlay {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: #ccc;\n border: none;\n color: #333;\n padding: 8px 12px;\n display: inline-block;\n font-size: 13px;\n border-radius: 3px;\n cursor: pointer;\n box-shadow: 0px 1px 1px #333;\n line-height: 13px;\n }\n </style>"),$("body").append('\n <div id="gpt_debug_header_bar">\n <div>\n <button id="gpt_debug_slot_name">Hover an Ad Slot</button>\n </div>\n </div>\n <div id="gpt_debug_overlay" style="display:none;">\n '),n=$("#gpt_debug_header_bar"),e=$("#gpt_debug_slot_name"),$("body").on("mouseover","div[data-google-query-id]",t),$("body").on("click","#gpt_debug_slot_name",i),$("body").on("click","#gpt_debug_close_overlay, #gpt_debug_underlay",o)}!function(){console.log("GPT Debugger Loaded!");let n=document.createElement("script");n.src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js",n.id="jquery",n.onload=init,document.getElementById(n.id)||document.getElementsByTagName("head")[0].appendChild(n)}();
// SOURCE
function init() {
const state = {};
let $headerBar;
let $slotName;
function find(list, fn) {
for (let i = 0; i < list.length; i++) {
if (fn(list[i])) {
return list[i];
}
}
return undefined;
}
function getSlot(slotId) {
const slots = window.googletag.pubads().getSlots();
return find(slots, slot => slot.getSlotElementId() === slotId);
}
function displayAdSlotInfo(adSlotInfo) {
const { slot, slotId, adUnitPath, advertiserId, campaignId, lineItemId, creativeId, sizes, slotTargetingKeys, serviceTargetingKeys, networkId } = adSlotInfo;
function getServiceTargeting(accumulator, targetingKey) {
accumulator += `<li><b>${targetingKey}:</b> ${googletag.pubads().getTargeting(targetingKey)}</li>`;
return accumulator;
}
function getSlotTargeting(accumulator, targetingKey) {
accumulator += `<li><b>${targetingKey}</b> ${slot.getTargeting(targetingKey)}</li>`;
return accumulator;
}
function getSizes(accumulator, size) {
accumulator += `<li>${size.getWidth()}x${size.getHeight()}</li>`;
return accumulator;
}
$('#gpt_debug_overlay').html(`
<div id="gpt_debug_underlay"></div>
<ul>
<button id="gpt_debug_close_overlay">CLOSE X</button>
<li><b>Slot ID:</b> ${slotId}</li>
<li><b>Ad Unit Path:</b> ${adUnitPath}</li>
<li><b>Advertiser ID: </b><a href="https://www.google.com/dfp/${networkId}#delivery/ListOrders/companyId=${advertiserId}" target="_blank">${advertiserId}</a></li>
<li><b>Campaign ID: </b><a href="https://www.google.com/dfp/${networkId}#delivery/OrderDetail/orderId=${campaignId}" target="_blank">${campaignId}</a></li>
<li><b>Line Item ID: </b><a href="https://www.google.com/dfp/${networkId}#delivery/LineItemDetail/lineItemId=${lineItemId}" target="_blank">${lineItemId}</a></li>
<li><b>Creative ID: </b><a href="https://www.google.com/dfp/${networkId}#delivery/CreativeDetail/creativeId=${creativeId}" target="_blank">${creativeId}</a></li>
<li><b>Sizes:</b></li>
<li style="list-style: none;">
<ol>
${sizes.reduce(getSizes, '')}
</ol>
</li>
<li><b>Service Targeting:</b></li>
<li style="list-style: none;">
<ol>
${serviceTargetingKeys.reduce(getServiceTargeting, '')}
</ol>
</li>
<li><b>Slot Targeting:</b></li>
<li style="list-style: none;">
<ol>
${slotTargetingKeys.reduce(getSlotTargeting, '')}
</ol>
</li>
</ul>
`);
$('#gpt_debug_overlay').show();
}
function handleMouseOverAdSlot() {
const slotId = $(this).attr('id');
// set slot name to the hovered ad slot
$slotName.text(slotId);
}
function handleSlotNameClicked() {
const slotId = $(this).text();
const slot = getSlot(slotId);
if (slot) {
const responseInformation = slot.getResponseInformation();
const adSlotInfo = {
slot,
slotId: slot.getSlotElementId(),
adUnitPath: slot.getAdUnitPath(),
advertiserId: responseInformation.advertiserId,
campaignId: responseInformation.campaignId,
lineItemId: responseInformation.lineItemId,
creativeId: responseInformation.creativeId,
sizes: slot.getSizes(),
slotTargetingKeys: slot.getTargetingKeys(),
serviceTargetingKeys: googletag.pubads().getTargetingKeys(),
networkId: slot.getAdUnitPath().match(/\d+/)[0],
};
displayAdSlotInfo(adSlotInfo);
}
}
function handleCloseOverlay() {
$('#gpt_debug_overlay').hide();
}
/*
<select>
<option selected="selected" disabled="disabled">Select an Option</option>
<option value="Highlight Ad Slots">Highlight Ad Slots</option>
<option value="Unhighlight Ad Slots">Unhighlight Ad Slots</option>
<option value="Log Data to Console">Log Data to Console</option>
</select>
*/
function appendHeaderBar() {
$('body').append(`
<div id="gpt_debug_header_bar">
<div>
<button id="gpt_debug_slot_name">Hover an Ad Slot</button>
</div>
</div>
<div id="gpt_debug_overlay" style="display:none;">
`);
$headerBar = $('#gpt_debug_header_bar');
$slotName = $('#gpt_debug_slot_name');
}
function appendStyleSheet() {
const styles = `
<style>
#gpt_debug_header_bar {
position: fixed;
width: 100vw;
height: 60px;
font-family: 'helvetica', 'arial';
font-size: 14px;
background: rgba(255, 255, 255, 0.9);
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 9999999;
box-shadow: 0px 1px 6px #444;
display: flex;
align-items: center;
justify-content: center;
}
#gpt_debug_header_bar select {
}
#gpt_debug_slot_name {
cursor: pointer;
display: inline-block;
}
#gpt_debug_overlay {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
font-family: helvetica, arial;
margin: 0;
overflow-x: auto;
overflow-y: scroll;
z-index: 2147483646;
}
#gpt_debug_underlay {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
}
#gpt_debug_overlay ul {
width: 600px;
margin: 10vh auto 0px;
font-size: 16px;
line-height: 40px;
background-color: #fff;
color: #333;
padding: 50px;
border-radius: 6px;
box-shadow: 1px 1px 8px rgb(0, 0, 0);
position:relative;
word-wrap: break-word;
list-style: disc;
}
#gpt_debug_overlay ol {
list-style-type: decimal;
text-indent: 10px;
list-style-position: inside;
}
#gpt_debug_close_overlay {
position: absolute;
top: 10px;
right: 10px;
background-color: #ccc;
border: none;
color: #333;
padding: 8px 12px;
display: inline-block;
font-size: 13px;
border-radius: 3px;
cursor: pointer;
box-shadow: 0px 1px 1px #333;
line-height: 13px;
}
</style>`;
$('body').append(styles);
}
function addListeners() {
$('body').on('mouseover', 'div[data-google-query-id]', handleMouseOverAdSlot);
$('body').on('click', '#gpt_debug_slot_name', handleSlotNameClicked);
$('body').on('click', '#gpt_debug_close_overlay, #gpt_debug_underlay', handleCloseOverlay);
}
appendStyleSheet();
appendHeaderBar();
addListeners();
}
(function(){
console.log('GPT Debugger Loaded!');
let script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
script.id = 'jquery';
script.onload = init;
if (!document.getElementById(script.id)) {
document.getElementsByTagName('head')[0].appendChild(script);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment