How to track page views and clicks on your Brunch/Chaplin/Backbone app with Clicky Web Analytics

Clicky Web Analytics is the best alternative to Google Analytics I have found so far (simpler interface/real time spy mode/twitter analytics...). Here is a simple way to track clicks and page views in your Brunch/Chaplin/Backbone application.

Clicky is good at tracking content centric website and can also be good at tracking user in a web application when you don't need to store detailled data, you can't log json object directly. I use it to log page views, and custom events like scroll and/or clicks on features.

Two things before we begin:

  • Chaplin Router removes the hash in the url and doesn't make use of it
  • Clicky save the link title the first time you log it

You need to trick Clicky by adding manually a hash when logging clicks so you can set a custom title to the different actions.

Clicky Setup

First, you need to add the clicky tracking code, you may also want to add the current user login in the clicky_custom.session property (see customizing the tracking code and logging data manually)

So, we dit app/assets/index.html:



I choose to handle logging in View rather than in Controller so I can get finer control and wait for model/collection to be loaded. So I just added a clickyLog method in the base View.

Here is how you and should look like:


:::javascript Chaplin = require 'chaplin' require 'lib/view_helper' # Just load the view helpers, no return value

module.exports = class View extends Chaplin.View # Precompiled templates function initializer. getTemplateFunction: -> @template

clickyLog: (page_name, action, param) ->
  path = $(location).attr 'pathname'
  action = if action then action else "pageview"
  path = if param then path+"#"+param else path
  clicky.log path, page_name, action


:::javascript Chaplin = require 'chaplin' View = require 'views/base/view'

module.exports = class CollectionView extends Chaplin.CollectionView # This class doesn’t inherit from the application-specific View class, # so we need to borrow the method from the View prototype: getTemplateFunction: View::getTemplateFunction clickyLog: View::clickyLog

Log page views/clicks

Now in any View, you can trigger a page view just by calling @clickyLog "mypagename".

:::javascript afterRender: => super if typeof(@model.get("name")) != "undefined" @clickyLog("Item " + @model.get("name"))

You can also easily log actions/clicks in your Views.

:::javascript myActionHandler: (event) => event.preventDefault() @clickyLog("Feature Y triggered", "click", "featureY")

That's it, you can now track users actions in real time and see the path they follow.

Your feedback

Any tips/suggestions on how to track page views and clicks on a Chaplin app ?

You should follow me on Twitter

Share this article

Tip with Bitcoin

Tip me with Bitcoin and vote for this post!


Leave a comment

© Thomas Sileo. Powered by Pelican and hosted by DigitalOcean.