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.
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 view.coffee and collection_view.coffee should look like:
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
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
You can also easily log actions/clicks in your Views.
That's it, you can now track users actions in real time and see the path they follow.
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