Mixpanel Engineering

<a href="http://example.com" class="my_link">Click Me</a>

<script type="text/javascript">
    $('.my_link').click(function(event) {
        href = $(this).attr('href');
        event.preventDefault();
        mpmetrics.track('my event', {"my": "property"}, function() {
            window.location = href;
        });
    });
</script>

<a href="http://example.com" id="my_link">Click Me</a>

<ul class="menu">
    <li class="menu_item">
        <a class="menu_link" href="about.html">menu link 1</a>
    </li>
    <li class="menu_item">
        <a class="menu_link" href="contact.html">menu link 2</a>
    </li>
    <li class="menu_item">
        <a class="menu_link" href="pricing.html">menu link 3</a>
    </li>
</ul>

<script type="text/javascript">
    // properties should automatically include the href tag of the clicked link
    // additional properties should be optional

    // interface should support a single id
    mpmetrics.track_links('#my_link', 'my event', {'my': 'property'});

    // interface should support selecting by class
    mpmetrics.track_links('.menu_link', 'clicked menu item');

    // we don't want to embed a full selection library, so let's support jQuery
    mpmetrics.track_links($('.menu a.menu_item'), 'clicked menu item');

    // some people use other selection libraries than jQuery, so lets support nodeLists
    var all_links = document.getElementsByTagName('a');
    mpmetrics.track_links(all_links, 'clicked link', {"a": "property"});
</script>

function to_array(obj) {
    var l, i = 0, ret = [];
    if(obj === null || obj === undefined) { return []; }
    try {
        return Array.prototype.slice.call(obj, 0);
    } catch (err) {
        if (typeof(obj.length) === "number") {
            for (l = obj.length; i < l; i++) {
                ret[i] = obj[i];
            }
        } else {
            while (obj[i] !== undefined) {
                ret[i] = obj[i];
                i++;
            }
        }
        return ret;
    }
}

function get_elements_by_class_name(className) {
    if (typeof(document.getElementsByClassName) === "undefined") {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element, i;
        for (i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) {
                results.push(element);
            }
        }

        return results;   
    } else {
        var elements = document.getElementsByClassName(className);
        return to_array(elements);
    }
}

function get_element_by_id(q) {
    if (typeof(q) !== 'string') { return q; }
    if (document.getElementById === undefined) {
        if (document.all !== undefined) { return document.all[q]; }
        if (document.layers !== undefined) { return document.layers[q]; }
        return null;
    } else {
        return document.getElementById(q);
    }
}

var arg = (arguments.length > 0) ? arguments[0] : undefined;
if (arg === undefined) {
    console.error("invalid arguments for track_links:", arguments);
} else if (typeof(arg) === 'string' && is_dom_query(arg)) {
    return track_links_query.apply(this, arguments);
} else if (is_list(arg)) {
    arguments[0] = to_array(arg);
    return track_dom_links.apply(this, arguments);
} else {
    console.error("invalid arguments for track_links:", arguments);
}

// callback is a function that transitions to the new url
// the setup below ensures that we call the callback as soon as we hear
// back from mixpanel, or if 300 ms has passed, whichever happens first.

var t = window.setTimeout(callback, 300);
var cb = function() {
    // we need to clear the timeout if we hear back from mixpanel
    // otherwise we could trigger two page loads
    window.clearTimeout(t);
    callback();
};

// we send the link href along with the event
if(typeof(properties.url) === 'undefined' && element.href) {
    properties.url = element.href;
}

metrics.track(event_name, properties, cb);
// prevent_default() ensures that the browser doesn't fire the default
// click event (or it would go to the page without waiting for mixpanel)
return prevent_default(e);