Easily, declaratively, track backbone events.

backbone-tracker.coffee

define [
    'underscore'
    'backbone'
], (
    _
    Backbone
) ->


    oldDelegateEvents = Backbone.View.prototype.delegateEvents
    delegateEventSplitter = /^(\S+)\s*(.*)$/


    _.extend Backbone.View.prototype,


        delegateEvents: (events) ->
            if (!(events || (events = _.result(this, 'events'))))
                return this

            @undelegateEvents()

            _.each events, (val, key) =>
                method = events[key]
                if (!_.isFunction(method))
                    method = this[events[key]]
                if (!method) then return

                match = key.match(delegateEventSplitter)
                eventName = match[1]
                selector = match[2]
                method = _.bind(method, this)
                eventName += '.delegateEvents' + @cid

                if (selector == '')
                    if @track? and _.has(@track, key)
                        @$el.on eventName, (e) =>
                            result = method.apply(this, arguments)
                            _trackOnViewEvent.call(this, key, e)
                            return result
                    else
                        @$el.on(eventName, method)
                else
                    if @track? and _.has(@track, key)
                        @$el.on eventName, selector, (e) =>
                            result = method.apply(this, arguments)
                            _trackOnViewEvent.call(this, key, e)
                            return result
                    else
                        @$el.on(eventName, selector, method)

            @bindKeyboardEvents() if @bindKeyboardEvents?

            return this


        ## Public wrapper for helper, attached to
        ## Backbone.View. Required an eventName. Optionally
        ## takes eventData
        trackEvent: (eventName, eventData) ->
            _sendTrackEvent(eventName, eventData)




    #### Helpers ####

    ## When a view's event is triggered, and there is a
    ## corresponding entry in track, 'track' the event with
    ## the given configuration. Value can be a string,
    ## object, or function returning an object. Object must
    ## have an eventName property.
    _trackOnViewEvent = (key, e) ->

        # make sure defined
        val = @track[key]

        if _.isString(val)
            _sendTrackEvent(@track[key])

        else if _.isObject(val)
            return if !(val.name? and val.data?)
            if _.isFunction(val.data)
                _sendTrackEvent(val.name, val.data.call(this,e))
            else if _.isObject(val.data)
                _sendTrackEvent(val.name, val.data)


    ## Broadcast the track event through chrome message
    ## passing, where background-script publishes it to
    ## mixpanel. Requires an event `name`. Optionally takes an
    ## event `data` object or a function that makes one.
    _sendTrackEvent = (eventName, eventData) ->
        return if !eventName?
        
        ###
        
        # Add tracking code Here. Send track event, to mixpanel, gAnalytics, etc.
        
        ###

Add tracking code to the _sendTrackEvent helper.

This adds two ways of tracking backbone events to views. You can either:

1. Call Backbone.View.trackEvent with a string for
   the event name and an optional data object. (Generally how mixpanel, google analytics work)

2. If you want to track an event that's in View's event hash, add the event's key to the View's track object.

events:
    'click #sign-up': 'onSignUpClick'
    'click #button': 'onButtonClick'
    'click #submit': 'onSubmit'
    'blur #email': 'onBlurEmail'


track:
    'click #button': 'Click on Button 1'
    'click #submit': 'Submit email form'
    'click #sign-up':
        name: 'Click sign up'
        data: {
                email: 'claude@giroux.com'
                version: 23.2
            }
    'blur #email':
        name: 'Blurred Email'
        data: (e) -> { email: $(e.target).value }

You can provide either a string for eventName, or an object which must have a name and data property. Or use a function to make the data payload. (The function takes jQ event data.)