Record User Sessions & Heatmaps to understand your users experience

by | Sep 17, 2022

🎯 What’s the goal?
To have a visual clue about the behaviour of your audiences, what they are doing on your page.		⚠️ Why does it matter?
To keep your content interesting and relevant for your audiences or easily accessible you should have a better understanding of how they are behaving during an online session on your page.
🏁 What’s the result?
HotJar tracker successfully placed on your website to collect data to create heatmaps and session recordings.		⌚ When do you do this?
When you want to analyze your audience’s interactions with your site.
βœ… Any special requirements?
N/D		πŸ™‹β€β™‚οΈWho should do it?
Webmaster/owner of the website.

πŸ‘‰ Where this is done: In your WordPress admin panel and on the HotJar page.

⏳ How long will this take? about 15 minutes (then 7 days for the first data to be collected)

 Let’s get started, time to check what are your audiences doing on your website

Environment setup:

  • We recommend you to use Google Chrome to navigate the web.
  • Access to your WordPress Admin Panel.

Creating HotJar account

  • Go to the HotJar website.
  • Click on β€œTry it Free” in the upper right corner.
  • You can choose to sign up with a Google account (1) – this will automatically fill in with your email and name, or using your email (2).
  • Fill in with your β€œFull Name” and β€œEmail Address”, then click on β€œGet Started”.
  • HotJar will email you with the verification code. Once you put in the code, click on β€œConfirm”.
  • Come up with a β€œPassword” for your account and accept ToS by checking the rectangle next to it. Press on β€œNext”.
  • Now you should choose what makes you join HotJar. Choose the goal that suits you best. Select from Advocate ideas(1), Inform decisions(2) or Discover opportunities(3).
  • After selection, click on β€œNext”.
  • Now it is time to add some extra pieces of information to customize your profile.
  • First, select β€œYour Role” by clicking on the dropdown list.
  • Select of you will use this account to manage your clients or for yourself.
  • Fill in with your β€œOrganization Name”.
  • Choose your β€œOrganization Size” by clicking on the dropdown list.
  • Click on β€œNext”.
  • Now it is time for you to add your site to HotJar.
  • Fill in with your β€œSite URL”. (If you want to add more sites later, you will be able to do it).
  • Select your β€œSite Type” from the dropdown list.
  • You can choose to receive HotJar articles by checking the box(1). Click on β€œStart Using Hotjar” to finish registration.

After this step, you will be presented with two methods to add HotJar to your site.

Adding HotJar to your site

Adding HotJar code manually using WordPress Theme Editor

  • Select the β€œInstall code manually” tab to reveal a piece of code that you have to place on your site’s theme head section. Note that you will have to place the code on each individual page that you want to track with HotJar.
  • Log In to your WordPress Admin Panel.
  • From the left side menu, select β€œTheme Editor” under the β€œAppearance” section.
  • Copy the code (indicated by the red frame) from the HotJar.
  • Fin the β€œ<head>” section in your Theme Editor and paste HotJar code.
  • Click on β€œUpdate File” afterwards.
  • Go back to HotJar and press on β€œVerify Installation”.
  • Wait for HotJar to verify the installation.
  • After successful installation, click on β€œContinue” to go to your HotJar dashboard.

Adding HotJar to your site using WordPress Plugin

  • Select the β€œInstall on your platform” tab.

In this SOP we will cover installation using WordPress Plugin. HotJar provides plugins for other platforms such as Shopify, Wix, etc. Each of those platforms has its’ own installation manual on HotJar (1).

  • Copy or write down your β€œsite ID” provided by HotJar.
  • Log In to your WordPress Admin Panel.
  • Choose β€œAdd New” under the β€œPlugins” section of the left side menu.
  • Type in β€œhotjar” into the searchbox.
  • You will be able to find the Hotjar plugin by Hotjar in the search results.
  • Click on β€œInstall Now”.
  • Then, click on β€œActivate”.
  • Now, you will be able to find β€œHotJar” under the β€œSettings” section of your left side menu of the WordPress Admin Panel.
  • Here, you have to place your site ID from Hotjar.
  • Click on β€œSave Changes”.
  • Go back to HotJar and click on β€œVerify Installation”.
  • After successful installation, click on β€œContinue” to go to your HotJar dashboard.

Using HotJar

  • To start collecting data, click on β€œHeatmaps” on your HotJar dashboard.
  • Here you can enter a specific page URL or a part of a URL to suggest HotJar where to start tracking.
  • Depending on what you typed in the previous step, you can choose if the heatmap should be only for a single page or all pages that contain/start with or end with a suggested URL.
  • Then click on β€œView Heatmap”.
  • Hotjar will run some preparations.

Note that most likely your results will be blank now. Hotjar will need some time to collect data.

  • In the upper right corner, you should see the β€œTracking active” indicator.
  • By clicking on the indicator, you should see how much time is needed for HotJar to collect data from your website to present your results.
  • After 7 days, go back to your dashboard and click on β€œView Heatmap”.
  • For indicating the frequency of clicks etc, HotJar will use the Cold-Hot scale, where hot – red indicates more click/views etc.
  • Now you will be able to filter your heatmap. 
  1. Select the device (PC/ tablet/ mobile) – Select which audiences based on the user device you want to analize.
  2. Select which behaviour you want to analyze :
  • Click

You will be able to see exact places where your audiences click on your website. By mousing over the indicator, you can receive an exact number of click in a particular place.

  • Move

The dots will indicate places with the highest frequency of audiences movement.

  • Scroll

The colour will indicate which part of your website is viewed the most. 

  1. Select to view summarized data or download your heatmap.
  • By selecting β€œRecordings” on your HotJar dashboard menu you will be able to see recordings of your audiences sessions.
  • All available recordings will be listed here.
  • Before playing selected recording (1), you can check its’ relevance (2), country of the audience (3), landing and exit page of the session (4), how many pages were visited during a particular session (5), length of the session (6) and the date (7).
  • After playing the recording you will be presented with a useful video player that has markers that shows any events during the session.
  • Now you can see the behaviour of your audience.
  • In the upper right corner, you can check β€œSession Info” such as audience location or his/her web browser.
  • You can also review all the β€œActions” during the session.

Now you know how to check the behaviour of your audiences. Analyzing that will help you improve the construction of your website and your content. You should take your time to conclude what you will learn while reviewing each session and heatmap. The more sessions you analyze, the more accurate conclusion you will produce. Remember that sometimes something that you consider interesting and β€œclickable” could be unattractive for your audiences. 

Record User Sessions & Heatmaps to understand your users experience

🎯 What’s the goal?To have a visual clue about the behaviour of your audiences, what they are doing on your page. ⚠️ Why does it matter?To keep your content interesting and relevant for your audiences or easily accessible you should have a better understanding of how they are behaving during an online session on your […]
Get Started
You May also Like: