Implementing and Analyzing Heatmaps on your Website

Before you start

To fully follow this SOP, you will need Google Tag Manager set up on your website. If you don’t have Google Tag Manager set up on your website, you will want to follow the procedure covered in SOP 004 (web version) for WordPress sites, SOP 065 (web version) for Shopify sites, or SOP 066 (web version) for Squarespace sites

Key steps 39 steps

1. 1 Identify core pages on your website and setup page-level heatmaps for them, those are the pages most users will go through before performing the action you want them to perform, example:
2. 2 Identify supporting pages that provide clues regarding what might be going through your user’s mind:
3. 3 Features page - Identify features users are more interested in.
4. 4 Analyze high potential poorly performing pages:
5. 5 Click here and register your your email.
6. 6 Enter your details, accept the terms of service, and click the ‘Get Started’ button. If you choose to sign up with your Google account instead, you will be taken directly to the Hotjar set up.
7. 7 You will be prompted to enter your personal details.
8. 8 Enter your ‘Role’, select ‘Yes’ If you want to use this account to manage clients, or ‘No’ if this is for your website only, your organization name, and click ‘Next’.
9. 9 The next page will ask you ‘Where do you want to install Hotjar?’ Enter your site URL → Click the ‘Continue’ button.
10. 10 Hotjar will now detect if you have Google Tag Manager installed.
11. 11 In the next step, select “View platforms” and select Google Tag Manager.
12. 12 After clicking “Google Tag Manager,’ Hotjar will redirect you to your Google Account so that it can access your account – check on all three and click ‘Continue.’
13. 13 Grant Hotjar access to your Google Tag Manager account and click “Continue”.
14. 14 Select your GTM Account and GTM Tag Container from the dropdown, then click ‘Create and Publish Tag’ button.
15. 15 Click the ‘Confirm And Create’ button.
16. 16 The next step is to verify your installation, just click the button. This step might take more than 60 seconds.
17. 17 Add your URL to verify the installation.
18. 18 There might be some delays/unsuccessful results in verifying, just retry. Eventually, it will redirect you to the Hotjar Dashboard, meaning that Google Tag Manager has been successfully integrated with Hotjar.
19. 19 Go to Google Tag Manager and sign in with your account details.
20. 20 Select the ‘Container Name’ that is set up on your website.
21. 21 Click on ‘Tags’ in the left side bar of your workspace.
22. 22 In your most recent tags, you will see the ‘AUTO Hotjar Tracking Code’ that was automatically added by Hotjar in the previous steps.
23. 23 [Optional] You might want to rename the tag to match the naming convention used in your GTM account.
24. 24 Once you’ve added your Hotjar tracking code. Hotjar will automatically record user sessions and heat maps on your site. This is known as continuous tracking. You no longer need to set up heatmaps for individual page.
25. 25 To view existing heatmaps on your site. Click the ‘Heatmaps’ icon on the sidebar.
26. 26 It will direct you to the Heatmap dashboard page. Click “New heatmap”.
27. 27 Enter your page URL to view heatmap.
28. 28 You should then be able to see the heatmap generated on your page.
29. 29 You then have the option to set different page rules to view different heatmap on your site.
30. 30 On your browser go to Hotjar
31. 31 Scroll down to ‘IP Blocking’ and click ‘Block Your Current IP’
32. 32 Go to Speedtest
33. 33 Locate your IP address on the page:
34. 34 Call your ISP and ask them if your network’s IP address is static.
35. 35 On your browser go to Hotjar
36. 36 Enter an internal name for that IP Address
37. 37 Log in to your dashboard.
38. 38 On the sidebar click “Recordings”.
39. 39 Open the Template 017: Clickmap & Scrollmap Diagnosis Cheat Sheet (web version)

What is inside 58 headings

The document 21 pages

Related resources