Website Engagement Tracking Part 2: Visualizing Clicks using Kibana

Published

Website Engagement Tracking is a technique that allows businesses to see which parts of their website users are visiting, clicking on, and viewing. In this second half of our two-part series, we'll take a look at visualizing the clicks on a website using Kibana.

In part one of our Web Engagement Tracking series, we created a JavaScript snippet that was able to track click locations on a website and send that data to Elasticsearch. While this raw data is interesting, it's hard to know immediately what the data means just by looking at numbers.

Now it's time to get visual and see which of our content is the most engaging. For the visuals, we'll use Kibana, a dashboard builder that's commonly used with Elasticsearch. Kibana has many different plugins to visualize data, and the one we'll use in this article is the heat map visualization plugin.

A lightbox link

If you haven't already done so, start by checking out our previous article on Web Engagement Tracking with ElasticSearch. You'll also need to make sure you're using version 5.x of Elasticsearch when you create your deployment on Compose.

Getting Started with Kibana

Compose offers Kibana as a paid add-on to an Elasticsearch deployment. This is the most convenient way to get started with Kibana and ensures that your dashboard is available when you need it.

To create our heatmap, we'll first want to enable the Kibana plugin for our ElasticSearch deployment. Click on the add ons section of the dashboard and click Add next to the Kibana add-on.

A lightbox link

Once Kibana is added, you can navigate to it by going to the URL under "Connection Info" and "Kibana HTTP Connections" on the overview page.

A lightbox link

The first thing we'll need to do is configure an index pattern. This pattern tells Kibana which index we'd like to display metrics for. There are a few different ways to use these patterns, but for now, we'll just tell it to use the "trackedclicks" index. We'll also want to uncheck the "index contains time-based events" button. Even though we do have a timestamp field we could use, we're more interested total clicks for now.

Once you click create you should see a summary of the fields in the index that Kibana was able to recognize, along with some tweakable controls. We'll leave the indexing alone for now, but if you needed to add additional context, such as the format of data, this is where you'd do it.

A lightbox link

For now, we'll skip to the fun part: creating the heat map visualization. Select the Visualize tab from the left menu bar and click the Create a Visualization button.

A lightbox link

That will take you to a window where you can select a visualization type. Select the Heat Map button under Basic Charts.

A lightbox link

This will take us to another window where we’ll need to select an index that we want to create a heat map for; click on the trackedclicks index and the initial heat map will get generated.

A lightbox link

By default, this will generate a heat map that contains one value, the count of clicks. However, this doesn't give us a sense of the layout of where those clicks happened on a page. To do that, we're going to need to create some buckets.

When Kibana refers to buckets, it's referring to the computer science term of grouping data based on some criteria. We can group our data into buckets based on their field values; for example, we can create buckets for clicks that happened in a specific pixel region of the page. To get an accurate click map, we'll want to create buckets for the x and y positions for our clicks so we can measure them on both x and y axis.

A lightbox link

We'll start by clicking on the X-Axis bucket type and selecting the Histogram Aggregation. In the field dropdown, select x to map the x-axis of our click to the X-Axis of the histogram.

A lightbox link

Finally, let's set an interval of 50 to indicate that we want each X-axis bucket to be 50-pixels wide. Click the show empty buckets check box and then hit the play button at the top to apply the changes. You can leave the extended bounds empty.

When we apply these changes, we'll see broadly which horizontal region our clicks occurred on. If you go back and click on more regions of the page, you'll see more density in those areas. Since we set a bucket size interval of 50, we'll see all of the clicks within that 50-pixel horizontal range.

Next, let's add the y-axis bucket.

A lightbox link

Here, we'll want to use the range rather than histogram aggregation. If we use histogram, Kibana will create a Histogram within each x-axis bucket yielding confusing results.

Click on the Add Sub-Buckets button at the bottom of the buckets section and select Y-Axis from the bucket type options list. Under sub-aggregation select range from the drop-down. This will allow us to define a specific range of values for each bucket. We'll do these ranges in increments of 50 again, representing a 50-pixel vertical space. Select y from the field drop-down and then start adding ranges for each set of 50, starting at 0 and ending at 950. You can add another range by hitting the add range button.

Clicking on the play button at the top applies the changes, and you should now see a heat map showing how many clicks happened in 50-pixel regions on the website.

A lightbox link

This heat map shows the different physical locations on your site that were clicked on - the darker the color, the more clicks have occurred in that area of the site.

Wrapping Up

There are many other ways to measure website engagement tracking, and using ElasticSearch with Kibana is an excellent way to store and visualize those engagement metrics. There are many different visualizations you can use in Kibana so feel free to explore them and see what other metrics you might find useful.


If you have any feedback about this or any other Compose article, drop the Compose Articles team a line at articles@compose.com. We're happy to hear from you.

attribution Serpstat

John O'Connor
John O'Connor is a code junky, educator, and amateur dad that loves letting the smoke out of gadgets, turning caffeine into code, and writing about it all. Love this article? Head over to John O'Connor’s author page to keep reading.

Conquer the Data Layer

Spend your time developing apps, not managing databases.