A drop-in plugin that automatically captures all your Backbone.View events for analysis in Heap.
Tested on Backbone 1.1.0. NOT YET PRODUCTION-READY.
- Add Heap to your website.
- Include
backbone.heap.jsin your site's<head>directly after includingbackbone.js:
<head>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="backbone.heap.js"></script>
</head>That's it! You'll immediately see rich, semantically-named events in your Heap dashboard.
Let's say we've written the following Backbone.View.
var DocumentRow = Backbone.View.extend({
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
}
...
});Every time a click .icon event occurs, an event named open is sent to your Heap account. Likewise for openEditDialog and destroy.
- No manual event tracking.
- Automatically retroactive analysis.
- Rich, semantic events.
By default, Heap lets you retroactively define events in terms of DOM event types and CSS selectors. For example, you may define an "Add to Shopping Cart" event after-the-fact as click on div.btn.add-to-cart.
But this would be a much more streamlined experience if we didn't have to name these events at all. Luckily, in Backbone, every View's events hash names these user interactions for us!
This lets us eliminate the friction of fishing for events like click on div#blah.blah. Instead, your Heap account is populated with easy-to-understand activity like addToShoppingCart. All without any extra code!