[Tutorial] How to Set Up Hotjar on Your Website

You’ve probably heard of Hotjar before; if not, you’ve probably seen some variation of the platform before. If not, here’s a brief description: Hotjar is an online platform that is revolutionizing how we understand website interaction.

Hotjar enables businesses to monitor what aspects of their website are being used properly and what could be improved to deliver a better usability experience. There are several tools incorporated within Hotjar to give web developers exactly the information they need to increase conversions.

Hotjar Tools 101

Heatmaps and visitor recordings are awesome tools for observing how users are currently interacting with your site (I say currently because it is as close to real-time as you can get). The strongest indicators of interest in your business online are shown by clicking and scrolling through the site pages.

Heatmaps physically show where users are clicking when browsing or looking for specific information. Using a heatmap enables the website to be optimized for your specific audience.

Visitor recordings do exactly what it sounds like--they record visitors’ behavior on your website. Through the online recordings, assumptions are no longer warranted, as you can watch each and every mouse movement visitors are making.

Although it’s important to see how visitors and your website are interacting, it's even more important to find opportunities for progression. Hotjar provides a variety of tools to identify when and where you’re losing your audience. Each page can be individually analyzed so common points of drop-off can be determined and improved. You can view a page on our site using Hotjar's heatmapping tool! 

So, how can you use these tools (plus more) to improve your website? Follow the steps below to implement Hotjar for your business:

1) Create an Account

There are three options to choose from when creating a Hotjar account: Basic, Pro, and Business. The Basic plan is a more limited package while the Pro and Business plans can test and analyze more information. A 15 day trial period is available before purchasing a package. 

2) Install Your Hotjar Tracking Code

Copy and paste the tracking code generated by Hotjar into the Header of your site. In a different browser window, open the website you will be tracking. You may now verify the installation of the code.

3) Begin Tracking Your Site

Heatmaps

Depending on the traffic volume of your site, choose a snapshot size. You typically do not want to run a test for longer than two weeks. For this reason, a low traffic site should choose the 1,000 size because it will take some time to reach 1,000 visitors. However, if you have a site with high traffic, the Pro or Business snapshot size is recommended.

Once the selected snapshot size is reached, you may go back and evaluate the completed heatmap. The heatmap can be displayed by clicks, moves and scrolling behavior. The colors exhibit the “heat,” or level of interaction.

For example, the top left corner of the Bluleadz homepage is a “hot spot” because it is our menu button. The move and scroll option will present the heat colors by mouse movements and how far visitors are scrolling down the page.

See what I mean below:

Pretty cool, right?

Video Recordings

Once a recording is complete, you may go back and watch a recording of the visitor’s screen while they were on that page. The following recording shows that a visitor viewed a blog post for 1:37 and the behavior they exhibited while on this page:

The Takeaway

Much like Growth Driven Design, Hotjar provides a new way of improving a website by eliminating assumptions and implementing real-time data. Hotjar encompasses more tools than those shown here, including: conversion funnels, form analysis, feedback polls, surveys and recruiters. If you have any questions regarding this awesome software, feel free to reach out and comment below!