Heatmap Reporting

This article will delve into how to set up, read, and report on a heatmap for a dealer. We use Hotjar for our heatmap reporting, so make sure you have access to the username and password for our Hotjar account as found in PasswordState.

Setting Up Hotjar

The first step to gathering heatmap data is to add the script to the site and allow it to start tracking. There are several steps you need to follow in order to facilitate getting the service set up on a site after logging in to Hotjar.

Finding Account Space

Once you’ve logged in to Hotjar, we’ll need to set up one of the available account spaces we have for a dealer to use. We can do this by navigating to the InteractRV profile and selecting Organization Settings.

Open

Once you click on Organization Settings, you’ll see a list of the various sites that we either had or have Hotjar set up on. We currently do not have a plan where we can expand this list to have more slots in it, which means in order to add a heatmap you will need to reset a currently-existing space to be used for a different dealer. You should look for a dealer whose script has been removed or turned off currently, like so:

Open

If there are no accounts that list “No data received”, reach out to me (Kayla I) or the FED team chat to determine which ones are currently in progress that we should not disturb, and select an account that is not currently gathering data from there.

Setting Up Hotjar Account

Once you know which account you are going to adjust, you’ll want to select the gear icon to the right of the account to change its settings.

This will bring you to a screen where you can see settings for that account. First, we’ll want to tackle the section labeled “Site Information”. We will fill out the Site Name and Site URL fields with the appropriate information. For the Industry/Sector dropdown, simply select “Other”.

Hit “Save Changes” once this is all filled out.

Adding Hotjar Script to the Site

Reusing an “off” account”

If the account you chose was currently turned “off” on the site it was being used on, you may have a dialog at the top of the screen after the previous step informing you that there may be an issue with your tracking code. If so, click on the link that says “Verify tracking code installation”.

This will bring you to a screen where a few different installation options are provided to you. We will want to select “Install it manually”.

This will pull up a screen which has the script for you to copy and paste. Simply click the “Copy” button to copy the script.

Keep this tab open, and in another tab, have ICC open to install the script on the site.

Navigate to the site in question in ICC, and on the main domain node, navigate to the Developer tab. Paste the code in the Footer Scripts area.

Reusing an “on” account

Once you’ve filled out the appropriate information in the previous step, return to the list of accounts. Underneath the status of the account, it will show a link that says “View tracking code”.

You can click this to obtain the code to paste. Before adding to the current site you want to use, however, you will want to remove it from the site it was on previously.

Navigate to the site that was previously on this account, and check the Developer tab in the domain node for the script. It could be in the header or the footer area. Make sure the script is removed or commented out.

Once the script is removed on the old site, you can add it to the new site. Make sure it is placed in the Footer Scripts area in the Developer tab for the site.

Verifying the script

Whichever method you used to implement the script, once you return to Hotjar, you should see an option to “verify the installation”. Make sure the URL matches the site you are currently installing on, and then click “Verify Installation”.

This will briefly open a new window with the site the script is installed on, so that Hotjar can check for the script on the site. If the script is installed successfully, it will return to the Verify installation page with a success message.

Gathering Data

Once the script is installed on the site, it takes time for Hotjar to gather the appropriate data for you to sort through. We typically let dealers know they need to wait at least a month for there to be enough data to give an accurate reading. If you run the tests below and find that there is still not enough data to draw accurate conclusions, you may need to recommend the dealer wait a couple more weeks after that.

You do not need to set up any specific heatmaps or further settings in Hotjar for the data to come in. You will not need to set these up until it’s time to put together a report and images for the dealer.

Dashboard

When you first log in to a specific account, if it has had enough time to gather data appropriately, there will be several graphs and lists of statistics for you to take a look at. While some of these are more basic data and information that the dealer may have access to via Google Analytics, it is still a good idea to take a look at the various categories of information here, to help inform any conclusions you may draw from the specific heatmap data.

We will be summarizing some of this basic information in our heatmap reporting template for the dealer. There are many things that tend to be true of all of our sites – for example, most users are new vs returning, the larger majority of visitors are on mobile, etc., but we should be specific for the dealer in regards to what the percentage is.

Creating Heatmaps

Once the data is ready to be gathered, you will want to create a heatmap for each page that the dealer has requested data on. Typically, most dealers will only want to know about their homepage, but occasionally dealers will request information on their SRP/VDP as well.

In order to arrange the data we have gathered on a visual to report on it, we’ll need to navigate to the Heatmaps section of the account we are reporting on.

Once you’ve arrived at the Heatmaps section, there are a couple different ways you can start creating a new heatmap – either by clicking the + New heatmap on the left, or the New heatmap button in the middle:

The New Heatmap page will prompt you to enter the URL of the page you’d like to view. When you click in the box, it will offer some suggestions, the first of which usually being the homepage. We’ll select that to create a heatmap of the homepage.

Once you’ve selected a URL, it will prompt you to choose a device. We can change this easily later to view all the different versions, so it doesn’t really matter which one you choose, but I usually do desktop first.

Once you’ve selected your device, you’ll click the “Continue” button in the bottom right of the screen.

Next, it will prompt you to choose a “type” of heatmap to display. Like the device, we can change this later (and we will, since we want to report on both click and scroll), so it doesn’t matter too much what you choose to start with.

Finally, it will prompt you to choose a screenshot that matches the look of the page. Some of these screenshots may be incorrect or not fully loaded. In this example, the first two have not finished loading, while the third one looks correct. On occasion, none of the screenshots will be correct or fully loaded – in this case, you’ll select the “Take new screenshot” button. This will open a new window and allow you to scroll all the way down to ensure everything is loaded properly before taking the screenshot. We want to ensure everything is loaded correctly on the page to ensure all the click and scroll data accurately matches the location of all the elements of the page. Note that some third party plugins and elements may not load in correctly no matter what, and that the screenshot also automatically censors certain things like phone numbers and other numerical values.

Once the appropriate screenshot is selected, Hotjar will overlay the appropriate data on top of the image. We can easily switch between device type with the icons at the bottom left of the screenshot, and map type to the right of the image.

You can save this heatmap to look at later by clicking the “Save” button in the top right. Make sure to name it appropriately so it is obvious what it is later.

From here, we can start taking a look at some of the more important things that stand out as far as how users interact with the site. By default, the “All clicks” map will show a 1, 2 and 3 on top of the most clicked areas on the site.

You can hover over any area that has color on it to determine how many clicks that spot represents.

In addition to where there are clicks, it’s important to pay attention to where there aren’t clicks as well. For example, a very common finding in heatmaps for our sites is that users rarely, if ever, engage with a rotating banner. Noticing this can be useful information for the dealer, and we can recommend alternate ways to advertise what they are trying to use their rotating banner to show off.

Additionally, on both the desktop and mobile maps, it will indicate the average fold for most devices. This can be helpful information for you when creating your report, because it will tell you what users see first and foremost and what they have to scroll to get to.

Saving Images

At some point while you are looking through the data for the page you’ve created a heatmap for, it’s important to export the images to send to the dealer along with the report. You can save the image for the version of the heatmap you are currently looking at by using the Download button. You should select the JPG version of the download when prompted.

We should always include the following images with our report:

• Desktop click map (including top 3 overlay)

• Mobile click map (including top 3 overlay)

• Desktop scroll map

• Mobile scroll map

Tablet tends to have the fewest amount of users, so we don’t typically include results for this in our report. However, if dealer specifically requests this information, we should include the appropriate click and scroll images for tablet as well.

Reporting & Drawing Conclusions

Report Template

You should use our standard Heatmap Reporting template to start with. There are several items that are easy to fill out with the data that you can see on the dashboard and the heatmap – for example, the top clicked items, or how far down users typically scrolled on the page.

Additional Observations

There are several placeholders in the reporting template that simply say “Observation”. So, how do we decide what to put here?

We need to use our knowledge of the data from the various versions of the map to come to some reasonable conclusions about things on the site that could be improved. We can combine this with anything we may know that the client is hoping will get attention or clicks, and come up with some things we notice easily.

Examples:

A dealer has a rotating banner advertising their truck accessories. They have a link to their truck accessories in various other spots (the RV Types bar, and the nav) further up on the page that are getting plenty of clicks. They also have a CTA for truck accessories further down on the page, for any users that might make it that far down, that is also getting clicks (despite being so far down the page that only 12% of visitors make it there!). Given that the RV types icon especially is the #3 most clicked item on the site, we can conclude that the rotating banner advertising this is not necessary and taking up valuable page space.

Using the data we are provided, we can determine which elements of the page are not achieving the effect they are intended to, and see which things should be changed/moved or even removed. We should try to make as many of these types of observations as possible for the dealer from the data we can get.

Making Recommendations

Coming soon!