recoveryArea

Front End Development & UX Optimization

Pascal Louwes

JavaScript /

Track That!

This function tracks every event with all its attributes in the div that’s set in the caller function. Handy if you need custom tracking for your AB test.


var trackThat = function() {
    
    var t = {},
        r = {},
        a = window.event ? window.event.srcElement : i.target,
        c = document.getElementsByTagName(a.tagName),
        k = "";
    try {
        for (var d = 0; d < c.length; ++d) c[d] == a && (r.tag = a.tagName, r.index = d, r.text = a.hasChildNodes() ? a.childNodes[0].data : "null"); for (var l, d = 0, o = a.attributes, g = o.length; g > d; d++) l = o[d], t[l.nodeName] = l.nodeValue;
        r.attrs = t, k = JSON.stringify(r);
    } catch (i) {
        k = "error: " + i.message;
    } finally {
        return k;
    }
};

$( 'div.main-holder' ).on('click', function(e){
    console.log(trackThat(e));
});

JavaScript /

A smarter console.info

Here is a little piece of code you can use in your project for slightly smarter console messages. Objects and arrays are handled differently when logged to the console than strings. Firebug gives you a stringified version of the object while console.dir gives you an expandable object. Both give you the expandable object in Chrome. To work around this you can use this little snippet, it will always give you the correct version.


var debug = function(message) {
    "object" === typeof console && ("object" === typeof message || "array" === typeof message ? console.dir(message) : console.info(message));
};