We’ve got two great new features launching today, after nearly 4 months of development: heatmaps, and on-site analytics.
Here’s an example of a heatmap report, after the new tracking code has been live on our site for a couple of hours:
(Note: Everyone’s user homepage is unique so some of the hot spots look weird here when conglomerated on a global scale. That’s the nature of dynamic pages).
IMPORTANT! Heatmaps won’t start logging anything until you specify your site’s width and layout in your site preferences. You can see where to do that in this screenshot. And as with on-site analytics, you must have the newest tracking code in your browser, so clear your cache!
Over the years we’ve had a lot of requests for this feature and we’re psyched to finally offer it to you. But once we started on it, the idea for on-site analytics was born soon thereafter, making this otherwise fairly-simple feature spiral out of control (in a good way). Hence nearly 4 months of development and testing!
Most services, to view heatmaps, you go to their site (e.g. getclicky.com) and go to your heatmap report, click a button for the page you want to view heatmaps for, and then your site is opened in an iframe, and then a heatmap overlay is loaded on top. That’s unideal for a lot of reasons, but particularly the iframe (ugh). Loading a site in an iframe introduces a lot of potential problems, and a lot of sites have “frame busters” that would totally break this feature. So we took a different approach.
Ok, we won’t deny you the “boring” way, going to your reports and clicking the appropriate link in the Content report:
What we do differently is that your page loads directly in a new window with a special parameter in the URL fragment, that our tracking code recognizes and automatically loads a heatmap dynamically on your site – without a frame, and without requiring being logged in to Clicky (i.e. you can share the URL). So that’s good.
But we thought it would be so terrific if you could just be on your web site and say “I want a heatmap of this page, now” and just click a button on that page and see it immediately. So that’s what we did, and hence made it part of the on-site analytics experience, as you can see to the right.
This was still not enough for us. Even though very few of our real-time competitors offer heatmaps, we didn’t want to just make a “me too” feature. We believe most of the features we are releasing with our heatmaps are unlike anything that any other service offers.
First of all, beyond “per page” heatmaps, we also do “per session”. For every single page view of every session we log for your site, we log a unique heatmap for that visitor. You can view session heatmaps by viewing a session, and next to each action, on the right-hand side, will be a heatmap icon to click if we have any heatmap data for that page/session combo. Click the icon to view all of their clicks on any given page:
Second, what would be analytics without segmentation? You can view “global” heatmaps (all clicks) for any page, or you segment them by a number of criteria. For example, only view clicks on a page for people who completed a specific goal, or only people who arrived via a specific search or campaign or referring domain or type of referrer (e.g. advertising), or any/every version of every split test you’re running.
Here’s an example of our homepage for users completing the “new user” goal. Unsurprising, the majority of the clicks are on the “register now” button:
The order of items in these reports is a bit different than what you see on our web site. We take the top 24 items ordered by “popularity”, e.g. the top 24 goals completed today, then re-order them alphabetically. This is because we think you’ll generally want to see the most popular segments but you’ll also want to find them quickly – so instead of showing them in order of popularity, we grab the top ones and re-order them alphabetically so you can quickly narrow down what you’re looking for in the interface.
To generate segmented heatmaps, we needed to add a new filter type to quickly find visitors with heatmap data attached. So we made this a general filter as well. In the main visitors report on Clicky, when you click “add a filter”, you will see a new option callled “heatmaps”. Click that to filter down your visitors to just people with heatmap data attached. This also works with the analytics API, by specifying “heatmap=1” in combination with type=visitors or type=segmentation requests. (We also added a filter for “online now”, since we needed to be able to internally filter visitors who were online now in order to display in the widget. Via the API, use “online=1”).
When viewing your visitors report, anyone with heatmap data attached will have a new icon next to them:
Not every visitor will have heatmap data though… We anticipate this type of data to take up a lot of space, so for now we only do it for a random 50% of your visitors. We will likely adjust this in the future as we see what kind of impact it has on our resources. For example, it is quite likely we’ll increase the sampling rate for low traffic sites, maybe even do “all visitors”, and for higher traffic sites, do less than 50%. But for now, just doing 50% was an easy safety measure and we’ll analyze resource impact as time goes on.
Most heatmaps use server-side image generation to overlay on your site, which takes up a lot of resources on the service providing the heatmap – and is also quite slow. Earlier this year we discovered the excellent open-source heatmaps.js by Patrick Wied, and we knew that was just what we needed. This is a javascript library that generates the heatmap on the fly, using your web browser’s resources, so it’s fast and efficient. There are lots of features this library has that aren’t yet documented, some of which we wanted to use (animated heatmaps for example) – but we didn’t want to take the time to figure them out ourselves. We hope this library matures in the future and we’ll take advantage of it when it does. But for now, for what we need, it does the job extremely well.
A difficult decision
This will be the first feature we offer that is not included in the standard Pro plan. The Pro plan has always had every feature we offer, so this was hard to do. But, the resources needed for this feature are quite significant, both in terms of bandwidth and storage, so we can’t justify the standard Pro pricing for this feature.
We do want all of you to experience it first hand though, so for the first 4 weeks, all Pro or higher accounts will have this feature. After 4 weeks, a Pro Platinum or Custom plan will be required to keep the heatmap feature. On-site analytics will be standard with any Pro or higher account, though.
Data retention
As we said above, we anticipate this taking up a lot of storage space, so we built the database structure around monthly chunks that are auto-purged every 30 days. Initially, daily/session data will only be guaranteed for 30 days, but be available up to 60 days, and monthly data will only be guaranteed for 2 months, but available up to 3 months. It’s hard to anticipate the exact impact this will have on our resources so we may (and hope to) expand this limit in the future, but for now, this is all we can guarantee.
Internet Explorer, may I count the ways in which I love thee?
Prior to IE8, IE does not have native JSON support, and even then, only when your site runs in standards mode. IE causing developers headaches is as sure as the sun rising in the east, regardless, the point is that IE users will not have heatmap data logged unless they are on at least version 8 and your site renders in standards mode. Good luck!
