Overview

This is an easy step-by-step how to install Hotjar tutorial, where I will guide you through the process from registering a Hotjar account to implementing the code on your Website and creating your first heatmap.

Contains:

  • Registering an account.
  • Installing Hotjar on your site.
  • Let’s create a heatmap.

Registering an account

  1. Go to https://www.hotjar.com/ and click “TRY IT FOR FREE” button:

363335240b89748143250e4da0dc864e Image2018 07 25at2.50.16PM 300x149 - [Tutorial] How to Install Hotjar Step by Step

 

  1. Fill the registration form.

 

  1. Set your password, it must contain:
  • One special character
  • One uppercase character
  • One number
  • 8 to 50 characters long
  • One lowercase character

 

  1. Customize your account:
  • Choose your role (eg. Store Owner).
  • Manage Clients, select no if you are the owner of the site.
  • Organisation Name, your Website name or Organisation Name.

          Click Next >

d5818455d09a0be58ba59f4911245a27 Image2018 07 25at3.03.22PM 300x148 - [Tutorial] How to Install Hotjar Step by Step

  1. Enter your Website url (eg. https://yoursite.com replace yoursite.com with your actual site) and complete    reCaptcha.

Click “Start Using Hotjar”

ffe2568af7ba018e0ab091d2be14044f Image2018 07 25at3.10.25PM 296x300 - [Tutorial] How to Install Hotjar Step by Step

 

 

Installing Hotjar on your site

 

1. Go to https://insights.hotjar.com and Copy this code:
Screen Recording 2018 07 25 at 03.28.05.37 PM 1 - [Tutorial] How to Install Hotjar Step by Step

 

2. Now go to your WordPress Dashboard.

3. Navigate to Plugins > Add New.
Screen Recording 2018 07 25 at 03.35.00.67 PM - [Tutorial] How to Install Hotjar Step by Step

4. Search for Headers and Footers.

5. Find Plugin called “Insert Headers and Footers” and Click Install now.

6. When installation finishes, click Activate.

Screen Recording 2018 07 25 at 03.39.30.62 PM - [Tutorial] How to Install Hotjar Step by Step

7. Navigate to Settings > Insert Headers and Footers.
bf3c4fcdcb70e7175657b8707fac3eb0 Image2018 07 25at3.43.55PM 300x143 - [Tutorial] How to Install Hotjar Step by Step

8. Now paste the code we copied from Hotjar in text box Scripts in Header.

9. Click Save.
Screen Recording 2018 07 25 at 03.47.21.40 PM - [Tutorial] How to Install Hotjar Step by Step

10. Go back to Hotjar and click “I have installed the tracking code” button.
24c11c9ff565ed595318fa5cc74615c8 Image2018 07 25at3.50.16PM 300x147 - [Tutorial] How to Install Hotjar Step by Step

11. Make sure you have entered your website’s url and click “Verify Installation” button.
2752d1ff160384a10f193dc2be6f090b Image2018 07 25at3.51.04PM 300x148 - [Tutorial] How to Install Hotjar Step by Step

12. Now you should see something like this:
“Hotjar installation verified”
Image 2018 07 25 at 3.55.05 PM 300x108 - [Tutorial] How to Install Hotjar Step by Step


13. Congratulations! You have successfully installed Hotjar! 

 

 

 

Let’s create a heatmap

 

  1. On the left sidebar click on Heatmaps and then click on “+ New Heatmap” button.

498e283483dfce9d8e1532b7fe9a6a87 Image2018 07 27at3.52.56PM 300x44 - [Tutorial] How to Install Hotjar Step by Step

 

  1. Enter the name for your heatmap and click next.

 

  1. Select number of pages, I recommend 2.000 and click next.

Image 2018 07 25 at 4.09.58 PM 300x160 - [Tutorial] How to Install Hotjar Step by Step

  1. If you want to use heatmap for all your pages, select Visit on multiple similar pages and select URL starts with – https://yoursite.com/ (replace yoursite.com with your actual site)

 

  1. Click next.

 

  1. Click Create Heatmap button.

 

  1. Congratulations! You have successfully created your heatmap!

 

Share This