Skip to content

Instantly share code, notes, and snippets.

@mion

mion/gist:10336475

Created April 10, 2014 01:52
Show Gist options
  • Save mion/10336475 to your computer and use it in GitHub Desktop.
Save mion/10336475 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!-- Approach 1 -->
<div class="card">
<a href="/user/123" class="mp-card-user">Steve</a>
<a href="/business/456" class="mp-card-business">Apple</a>
</div>
<!-- Approach 2 -->
<div class="card mp-card">
<a href="/user/123">Steve</a>
<a href="/business/456">Apple</a>
</div>
<!-- Approach 3 -->
<div class="card" mp mp-event="card">
<a href="#" mp-click="user">Steve</a>
<a href="#" mp-click="business">Apple</a>
<a href="#">Some link we don't care about</a>
</div>
Raw
gistfile2.js
// Approach 1
// This is what we currently have
mixpanel.track_links("mp-card-user", "card > user", {
"type": "click",
"origin": "card page"
});
mixpanel.track_links("mp-card-business", "card > business", {
"type": "click",
"origin": "card page"
});
// Approach 2
// We also do this but only if we don't care exactly which link was clicked inside 'card'
mixpanel.track_links("mp-card a", "clicked card", { ... });
// Approach 3 (this is what we'd like to do)
// Using jQuery and HTML5 atributes, we get the event name and properties from the DOM
$("[mp]").each(function () {
var name = $(this).attr("mp-event");
$(this).find("a[mp-click]").each(function () {
var link = $(this).attr("mp-click");
$(this).on('click', function () {
track(name + " > " + link, { ... });
// keeping it simple here, but we would grab some more things from the DOM
// besides `name` and `link`
})
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment