– we create awesome web applications
michael 50x50
Jun 3th 2009

Clicktale + Rails = Better Usability.

michael rails, webdev

Clicktale is a service that allows you to record and later playback behavior of your users while they are using your site. And Rails is Rails, you know.

And those two are getting along just fine, until the user logs in. After that clicktale service is cut out of the html pages this user gets and can’t record the session. But it just started to get interesting…

This plugin brings back the connection between Clicktale and Rails even for those closed pages. You’re going to get your better usability after all.

Clicktale

Clicktale is nice. I suggest you to head over to their site and check out the short(1:15) promotional video they have to get a feeling of what they do.

It records user sessions, allows form optimization by showing how much users drop out on any form field, does landing page optimization and other goodness.

Anyways, i find it very useful. It should be installed from the very first users new service is starting to get.

It is an easy way to approximate field usability testing. It doesn’t replace the actual usability testing, but it is as close as you get without dragging yourself from the comfort of your Aeron chair.

Bottom line is that can help you make lives of your users a bit easier.

They are on pricey side of the internet with cheapest plan at $99/month, but they have a free plan. Very limited, but enough to see what it is about.

Rails Integration

I was really disappointed to find out that in our rails projects i could record user sessions only on outer parts of the site.

You see, clicktale works by combining two sides:

  • A small javascript snippet inserted into your rendered page to record user behavior
  • A copy of rendered HTML that clicktale stores on it’s servers to allow playback of recorded user actions on top of it.

Now, the first part in not a problem. The second part is.

When a user hides behind a login, clicktale is no longer able to get the HTML. So it still knows where user clicks and where the mouse was moved, but this information is useless without the actual page your user sees at this moment.

To continue to enjoy the “big brother” feeling even after users log in, we need to supply this HTML to clicktale. Fortunately clicktailers allowed this by adding an option to their javascript to provide a URL to this HTML file that is different from the current page’s URL.

To close this circle, I use rails caching mechanism to store rendered page on the disk, and handle a path to the resulted file to clicktale.

Ok, nice, now how do i…

  • Install the plugin

      ./script/plugin install git://github.com/astrails/clicktale.git

  • Head to http://clicktale.com and signup for a free account. Or not free. Your choice.

  • Get a tracking code from clicktale. It should look something like this:

      #!html

  <!-- ClickTale Bottom part -->
  <div id="ClickTaleDiv" style="display: none;"></div>
  <script src="http://s.clicktale.net/WRb.js" type="text/javascript"></script>
  <script type="text/javascript">
    if(typeof ClickTale=='function') ClickTale(PROJECT_ID,RATIO,PARAM);
  </script>
  <!-- ClickTale end of Bottom part -->

  • Replace project_id, ratio and param in the autogenerated config/clicktale.yml with values from clicktale tracking code.

  • Add clicktale partials into layout inside the ‘body’ tag:

      #!erb

  <body>
    <%= clicktale_top %>
    ...
    <%= yield %>
    ...
    <%= clicktale_bottom %>
  </body>

  • Add a cron job(crontab -e, right?) that will take care of the old cached files

      */30 * * * * find /path/to/your/application/public/clicktale/ -type f -mmin +30 -exec rm {} \;

Note: The plugin works by leveraging rails caching mechanism, which is by default only enabled in production environment. To enable the plugin in the development environment do the following:

  • set enabled=true in config/clicktale.yml (development section)
  • set config.action_controller.perform_caching=true in config/environments/development.rb

Another Note: As of this writing, clicktale service ignores existance of Safari browser. I hope it will work someday.

Options

Not much for now. But you can:

  • Add clicktale method on class level in your controller to change the clicktale project for specific controller

      #!ruby

  class UsersController < ApplicationController
    clicktale :project_id => ANOTHER_PROJECT_ID
    ...
  end

  • Call the same method to tag this controller’s actions in clicktale records

      #!ruby

  class UsersController < ApplicationController
    clicktale :project_id => ANOTHER_PROJECT_ID, :tag => :specific_tag
    ...
  end

  • You can call the same method with same parameters on the action level to control project id and tag for this specific action

Where’s everything

The code is on github.

Please submit issues also to github.

As always, suggestions are welcome, code contributions are even more welcome.

Now, go see what your users are doing.

We are hiring
The Rails 4 Way

We are proud that our own Vitaly Kushner co-authored "The Rails 4 Way" together with Rails legend Obie Fernandes of Hashrocket fame.

"The Rails 4 Way" is the latest edition of the most comprehensive, authoritative guide to delivering production-quality code with Rails 4.