Last active
October 10, 2015 08:57
-
-
Save al3xandr3/3665292 to your computer and use it in GitHub Desktop.
Elements Tracking Debug
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Bookmark: | |
// javascript:(function(){var d=document,s=d.createElement('scr'+'ipt'),b=d.body,l=d.location;s.setAttribute('src','https://raw.github.com/gist/3665292/elements_tracking_debug.js');b.appendChild(s)})(); | |
// loads javascript and executes some code when jQuery is loaded | |
// note that callback function needs be before calling loadJS(or inline) | |
// loadJS("http://code.jquery.com/jquery-latest.js", function() { $('my_element').hide(); }); | |
var loadJS = function (url, callback) { | |
var head = document.getElementsByTagName("head")[0]; | |
var script = document.createElement("script"); | |
script.src = url; | |
// Attach handlers for all browsers | |
var done = false; | |
script.onload = script.onreadystatechange = function() { | |
if( !done && ( !this.readyState || | |
this.readyState == "loaded" || | |
this.readyState == "complete")) { | |
done = true; | |
// Continue your code | |
callback(); | |
// Handle memory leak in IE | |
script.onload = script.onreadystatechange = null; | |
head.removeChild( script ); | |
} | |
}; | |
head.appendChild(script); | |
} | |
// Loading CSS with Callback | |
// $('head').append('<link rel="stylesheet" href="http://cdn.sstatic.net/stackoverflow/all.css?v=d4a5c7ca0d4c" type="text/css" />'); | |
// check if css loaded | |
//var fakeListener = setInterval(function(){ | |
// if($("body").css("text-align")=== "center"){ | |
// clearInterval(fakeListener) | |
// // What you want to do after it loads | |
// } | |
//},50) | |
var findAttributesUp = function (el, attribute) { | |
var attr = []; | |
while (el) { | |
if (typeof el.getAttribute !== "undefined" && | |
el.getAttribute(attribute) !== null) { | |
attr.push(el.getAttribute(attribute)); | |
} | |
el = el.parentNode; | |
} | |
return attr; | |
}; | |
var getClickData = function (el, json) { | |
var _i, | |
_json = json || s_el || null, | |
_attrs = findAttributesUp(el, "data-sc"), | |
_data; | |
for (_i in _attrs.reverse()) { | |
if (_json[_attrs[_i]]) { | |
_json = _json[_attrs[_i]]; | |
} | |
} | |
if (typeof _json.click == 'function'){ | |
_json.click = _json.click.call(); | |
} | |
if (typeof _json.click !== "undefined") { | |
if (typeof _json.click.track !== "undefined" && | |
_json.click.track === false) { | |
return false; | |
} | |
_data = _json.click; | |
delete _data.track; | |
} | |
return _data; | |
}; | |
var endsWith = function (str, suffix) { | |
return str.indexOf(suffix, str.length - suffix.length) !== -1; | |
}; | |
var tip_content = function(el) { | |
var _sc = ($(el).attr('data-sc') || ""); | |
var _el = (findAttributesUp(el, "data-sc").reverse().join('.') || ""); | |
var _data = getClickData(el); | |
var _error = false; | |
var table = '<table id="#tip">'; | |
table += '<tr><td>data-sc</td><td>' + _sc +'</td></tr>'; | |
table += '<tr><td>s_el</td><td>s_el.' + _el +'.click</td></tr>'; | |
if (typeof _data === "undefined" || $.isEmptyObject(_data)) { | |
table += '<tr><td></td><td style="color: red"><strong>s_el.'+ _el + '.click data is missing</strong></td></tr>'; | |
_error = true; | |
} else { | |
var value = ""; | |
$.each( _data, function(k, v){ | |
// clean v | |
value = $('<div/>').text(v).html(); | |
// Error Catching Logic | |
// evar1 ending with -_- | |
if ($.trim(k) === "eVar1" && endsWith($.trim(v), "-_-")) { | |
table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'<strong style="color: red">?MISSING?</strong></td></tr>'; | |
_error = true; | |
// evar19 ending with : | |
} else if ($.trim(k) === "eVar19" && endsWith($.trim(v), ":")) { | |
table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'<strong style="color: red">?MISSING?</strong></td></tr>'; | |
_error = true; | |
// evar19 containing template data: | |
} else if ( ($.trim(k) === "eVar19" || $.trim(k) === "products" || $.trim(k) === "eVar1") && | |
( v.indexOf("<POSITION>") !== -1 || v.indexOf("<CAMPAIGN_ID>") !== -1 || | |
v.indexOf("<OTHER_CTA>") !== -1 || | |
v.indexOf("<PRODUCT CODE>") !== -1 || v.indexOf("<PRODUCT TYPE>") !== -1 || | |
v.indexOf("<DWNL_PRODUCT>") !== -1) || v.length < 3) { | |
table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'<strong style="color: red"> ?TEMPLATE NOT REPLACED?</strong></td></tr>'; | |
_error = true; | |
} else if ((typeof v.indexOf !== "undefined" ) && ( v.indexOf("<PAGE DESCRIPTOR>") !== -1 || v.indexOf("<CTA DESCRIPTION>") !== -1 || v.indexOf("<NO TEMPLATE>") !== -1)) { | |
table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'<strong style="color: red"> !!AUTOMATED PLACEHOLDERS FAILED. CONSULT DEVELOPERS!!</strong></td></tr>'; | |
_error = true; | |
// When OK | |
} else { | |
table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'</td></tr>'; | |
} | |
}); | |
} | |
table += '</table>'; | |
return {sc: _sc, el: _el, content: table, hasError: _error}; | |
}; | |
// Qtip CSS Include | |
$('head').append('<link rel="stylesheet" href="http://qtip2.com/v/nightly/jquery.qtip.css" type="text/css" />'); | |
// Table CSS | |
var table_css = "table { width: auto; box-shadow: 0 0 4px #CCCCCC; border-collapse: collapse; border-spacing: 0; border-color:#CCCCCC; border-style:solid; border-width:1px; } th, td, caption { padding: 0px 10px 4px 5px; font-weight: 300; } ul { margin-bottom: 3em; } thead tr, thead th { background: none repeat scroll 0 0 #F0F0F0; } tbody tr:nth-child(2n) td, tbody tr.odd td { background: none repeat scroll 0 0 #F0F0F0; }"; | |
table_css += " .qtip-default, .qtip-titlebar { font-size: 12.5px !important; background-color: #FFFFFF !important; border-color: #CCCCCC !important} "; | |
$("<style type='text/css'>" + table_css + "</style>").appendTo("head"); | |
// Qtip CSS | |
var qtip_css = ".largeWidth.ui-tooltip { max-width: 500px; }"; | |
$("<style type='text/css'>" + qtip_css + "</style>").appendTo("head"); | |
// search the html elements with data-sc and build qtip2 on them | |
var data_sc_tag = function() { | |
$('a[data-sc]').each(function() { | |
var tip = tip_content(this); | |
if (tip.hasError) { | |
$(this).css("background-color","rgba(229, 20, 0, 0.9)"); | |
} else { | |
$(this).css("background-color","rgba(140, 191, 38, 0.5)"); | |
} | |
$(this).qtip({ | |
content: { | |
title: function(api) { | |
return (tip.sc || ""); | |
}, | |
text: function(api) { | |
// this is a jquery selector, pass only 1st | |
return (tip.content || ""); | |
} | |
}, | |
position: { | |
my: 'top left', | |
target: 'mouse', | |
viewport: $(window), // Keep it on-screen at all times if possible | |
adjust: { | |
x: 15, y: 15 | |
} | |
}, | |
hide: { | |
fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking! | |
}, | |
style: { | |
classes: 'ui-tooltip-shadow ui-tooltip-bootstrap my-ui-tooltip largeWidth' | |
} | |
}); // qtip | |
}); // a[data-sc] | |
}; // data_sc_tag | |
// load qtip and call data_sc_tag when ready | |
loadJS('http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.js', data_sc_tag); | |
// any click on the body refreshes the taging | |
if (typeof $(document).on == "function") { | |
$(document).on('click.scDebug','body', data_sc_tag); | |
} | |
// sc_debug | |
// Generated by CoffeeScript 1.3.3 | |
(function() { | |
var get_sc_pix, src2obj; | |
get_sc_pix = function() { | |
var elem, result; | |
result = []; | |
if (typeof window === "undefined") { | |
throw "only runs within a browser window"; | |
} | |
for (elem in window) { | |
if ((elem.substring(0, 9) === "s_i_skype") && window[elem].src) { | |
result.push(window[elem].src); | |
} | |
} | |
return result; | |
}; | |
src2obj = function(src) { | |
var elem, key, obj, value, _i, _len, _ref; | |
obj = {}; | |
_ref = src.split('?')[1].split('&'); | |
for (_i = 0, _len = _ref.length; _i < _len; _i++) { | |
elem = _ref[_i]; | |
key = elem.split('=')[0]; | |
value = elem.split('=')[1]; | |
obj[key] = decodeURIComponent(value); | |
} | |
return obj; | |
}; | |
window.s = window.s || {}; | |
window.s.get_sc_pix = get_sc_pix; | |
window.s.src2obj = src2obj; | |
window.s.debug = function(num) { | |
return s.src2obj(s.get_sc_pix()[num]); | |
}; | |
}).call(this); | |
// Sidebar Page Tracking | |
var alert_page = function() { | |
var pix = s.debug(0); | |
var table = '<table id="#pix">'; | |
$.each(pix, function(k, v){ | |
table += '<tr><td><strong>' + k +'</strong></td><td>' + v +'</td></tr>'; | |
}); | |
table += '</table>'; | |
createGrowl("trackPage", table, false); | |
}; | |
// assure loads first qtip, then loads jgrowl.js | |
loadJS('http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js', function(){ | |
loadJS('https://cdn.rawgit.com/al3xandr3/3736933/raw/jgrowl.js', alert_page); | |
}); | |
// update @Virgo 17 Jan 2013 - fix the data-sc detection | |
// update @Alexandre 22 April 2013 - improve colors on the Qtip | |
// update @Alexandre 26 April 2013 - Qtip hiccups: loads and toggle + new error |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment