We had launched clickmaps and heatmaps for A/B tests recently in Visual Website Optimizer. Since then it has become the most popular feature amongst our users. We aren’t surprised by the success of this new feature because it gives a new angle to A/B test results. While you can always get information about conversion rate, bounce rate and other hard metrics from standard reports, visualizing “hotspots” on a page has a charm of its own.
Based on feedback from a user, we rolled out a new minor feature: consolidated clickmaps. Unlike traditional clickmaps, which show results only for a particular page, this new feature will aggregate click activity on ALL your website pages to show which parts get most clicks. This is useful if you have a website that has common template/theme across different pages (e.g. header, footer, sidebar, product box, etc.). Using consolidated clickmaps, you will be able to see statistics for elements common to your website.
This feature came handy when I analyzed visitor activity on my personal blog. All I had to do was to enter a URL pattern (http://www.paraschopra.com/blog*) which instructed VWO to generate a consolidated heatmap for all blog posts (technical detail: VWO combined heatmap data for all pages matching the URL pattern; * matches anything and that’s why the entered URL pattern matched all blog posts).
Here is the consolidated heatmap for all my blog posts:
Contrast this with a heatmap only for a single post:
As you can see, the consolidated heatmap has much more information than a single blog post heatmap. That is the real utility; you get to observe patterns of visitor behavior across your website which you may have otherwise missed or would require you browsing through tens of different heatmaps and then stitching patterns in your head.
Using this feature, you also get to see consolidated clickmaps. Here is a screenshot:
The consolidated clickmap clearly shows that 10% of all clicks on the page occur on Visual Website Optimizer banner on my blog. Some more statistics from the clickmap:
The stats are bit on the lower side but if you observe consolidated heatmap, you will see a lot of click activity on post text. This means that even though visitors aren’t clicking on links, they are still interacting with the post and reading it!
I hope you like the new feature! If you’d like to give it a spin simply login to your account (it is enabled by default for all accounts). Or, if you aren’t an existing user, signup for a 30 day (no-obligations) free trial here.
PS: Technical details. If you are wondering how we are able to generate consolidated heatmap, here is the trick: we don’t store absolute X and Y positions of visitor clicks. Rather we store xpath of the element being clicked. Common elements on the website have same xpath across different pages, hence we are easily able to aggregate that data.
Note: currently, this integration does not work with asynchronous code aspect (which is in beta). Whenever asynchronous code comes out of beta, it will support Google Analytics integration.
It is #1 feature requested and here you have it. This blog post introduces the new plugin for the Google Analytics. Using the plugin, you can easily benchmark multiple metrics across different variations. For example, you may find out that while your winning variation has reduced bounce rate significantly, it may actually be reducing average visitor time on site as well. Viewing results from multiple perspectives allows one to get a better idea on the expected behavior of winning variation.
For integrating Google Analytics with Visual Website Optimizer, you will have to sandwich a snippet of code (in bold font below) in your existing Google Analytics tracking code (most likely present at the bottom of your website HTML):
<script type="text/javascript"> var pageTracker = _gat._getTracker("XX-XXXXXX-X"); pageTracker._initData(); if (typeof(_vis_opt_GA_track) == "function") { _vis_opt_GA_track(); } pageTracker._trackPageview(); </script>
The process for Asynchronous code snippet is similar:
_gaq.push(['_setAccount', 'XX-XXXXXX-X']); if(typeof(_vis_opt_GA_track) == "function") { _vis_opt_GA_track(); } _gaq.push(['_trackPageview']);
In other words, the code in bold (javascript function _vis_opt_GA_track()) needs to be added just before the Google Analytics code snippet _trackPageview
After you have added the code, the integration is done. No more settings, no more configuration. For all tests, the Google Analytics intergration will start automatically.
To see A/B test reports in Google Analytics, click on Visitors in the sidebar and then click on Custom Variables report. Then click on the test id (available from VWO reports page) corresponding to the test you want to see a report for. An example of the report name in GA would be “VWO-2” which means it is a report corresponding to test with id 2. In the report you can see goal values for different variations plus you can also see different metrics such as bounce rate, time on site, return visit, pages/visit, etc. corresponding to the variations. The reports look something like the following screenshot (click to expand):
As you can see, different variations have different bounce rate and time on site. If we had configured goals in GA for this site, we could have tracked performance of variations on multiple goals as well. We can also define an advanced segment for a variation to do any kind of complex analysis that GA allows us to do. How cool!
Before you get too excited, please note following important points regarding the plugin:
Technical note:VWO uses GA’s 4th custom variable slot by default. If you would like to change it (either because you already use if for a different purpose or you want to track multiple tests in GA), add the following code before any GA code:
<script type="text/javascript"> var _vis_opt_GA_slot = YOUR_CUSTOM_SLOT; // a number between 1-5 </script>
Leave a comment here if you cannot get the plugin to work for you or you have trouble understanding what code to add or where to add.
