Site-Side Heatmap Analytics Tool for Retailer’s e-Commerce Site

black background with lines of blue

Case Study: Data and Analytics


In an effort to generate more revenue from its e-commerce site and better understand customer behavior, a large U.S. retailer with 2013 revenues of $25 billion looked for more robust ways to track user interactions.

The retailer was leveraging a combination of site-side analytics tools that determine the performance of certain objects on the web page by measuring unique visitors and other dimensions. However, the tools showed no clear understanding of what pages or objects on a site were performing well or not performing as expected. In addition, the volume of data captured with these tools was overwhelming.

The retailer needed a way to view how consumers interacted with and behaved on the website so it could make better business decisions based on actual customer behavior.


Most analytics are derived using complex custom tools that are data rich but visualization poor. The retailer tried to build a visually appealing solution based on site-side analytics data from a combination of graphs, dashboards and scorecards, but the solution fell short. There was no real visual understanding of the way consumers behaved on the site.

Because of the huge amount of data collected, storing, aggregating and presenting it presented a huge challenge. A new data aggregation and archiving strategy was needed to help address this issue. The retailer used a tracking pixel similar to Google Analytics to determine user behavior patterns.

Combining this mountain of data with other site data represented a further challenge.


AIM Principal Consultant Tony Kippen created a solution that addressed all the retailer’s needs. With a small data engineering team, data science team and one HTML 5/data visualization modeler, Kippen integrated the visualization of the site into the analysis tool.

The resulting heat map is an overlay of metrics and dimensions onto the site pages that shows how users interact with the site. The tool is live and robust, changing as the site is updated and as consumers interact with it. As e-commerce sites frequently change in both appearance and capabilities, the heat map data can be updated and stored for later delta analysis.

The interface allows a user to select a page from a visual navigation dashboard with thumbnail views of the pages, and drill into a graphic where the page is displayed with all the data elements. The heat map is overlaid on top of this page. (Note: The image presented is an example of the visualization using a third-party website not connected to the actual solution.)

The solution was comprised of four major components:

  • Standards and Conventions
    Documents and tools were created to manage, validate and maintain that the HTML code created followed a standard and could be linked later when the data was combined and overlaid.
  • Coordinate Tracker
    A new pixel tracker with data collection was created so as not to interfere with the standard tracking.
  • Data Model & Data Storage
    A model was created to support slowly changing dimensional capabilities for both the site and pages, and also for device and size capture.
  • Data Visualization
    This tool uses HTML5 to render the site page and then overlay the data using a custom heat-map JavaScript library to show the interactions on the page. It also exposes all the dimensions and metrics in order to visualize different performance elements.


While some tools address various aspects of the needed analytics, this tool is the first solution to combine site-side analytics with consumer behavior data and present them visually in real time, enabling the retailer to make better business decisions around the data in much shorter timeframes. In addition, with the ability to capture site, page and other elements as they change over time, the retailer now has the ability to roll out new versions of the website and compare the results of consumer behavior over time.