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:
:::html
ClickyView
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 view.coffee and collection_view.coffee should look like:
(view.coffee)
:::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
(collection_view.coffee)
:::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 ?
Tip with Bitcoin
Tip me with Bitcoin and vote for this post!
Leave a comment
