DIGITAL SOP 049: Implementing and Analyzing Heatmaps on your Website

Last Updated / Reviewed: 02/11/2024

Execution Time: 30 mins – 1 hour

Goal: To successfully incorporate Heatmaps on your analytics strategy.

Ideal Outcome: Your business is now correctly recording, logging and analyzing your heatmaps.

Prerequisites or requirements:

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.

Why this is important: In-page behavioral analysis gives your team additional visual insights that are not easily collected or interpreted using traditional analytics tools such as Google Analytics.

Where this is done: In Google Tag Manager, Hotjar, and Google Spreadsheets.

When this is done: You will set up a heatmap every time you want to learn more about your user’s on-page behavior on a different page or set of pages.

Who does this: The person responsible for Analytics or Conversion Rate Optimization (CRO).

 

Included Resources on this SOP

Clickmap & Scrollmap Diagnosis Cheat Sheet

 Scrollmap & Clickmap Insights

Evaluating the need for a Clickmap or Scrollmap tool

1. Do you want to analyze quantitative data, analyze specific metrics over given time periods, or track major events on your website?
   1. If yes, a tool like Google Analytics is more suitable for your analysis. Even though in some cases you can get similar indicators visually through a heatmap, typically this kind of results.
      1. If you don’t have Google Analytics on your website yet, you can set it up by following SOP 009 (web version) for WordPress or SOP 067 (web version) for Shopify.
      2. If you have Google Analytics but haven’t set up the right goals and events to track your business you can do so by following SOP 021 (web version).

2. Do you want to analyze how your users are interacting within a specific page or subset of pages?
   1. If yes, in some cases you might be able to do so with Google Analytics. But mostly the data will be much easier to analyze by visually looking at scrollmaps and clickmaps.

Deciding what pages to record

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:

• Homepage;
• Lead generation landing page;
• Pricing page;
• Sales Page;
• Checkout page or checkout steps;

2. Identify supporting pages that provide clues regarding what might be going through your user’s mind:

• Example:
  • FAQ page – If you’re using accordion-style elements, will give you insights regarding what questions are more common allowing you to improve your landing page copy by visually seeing which questions are clicked on the most.
  • Category selection page – If you have a page where users click on specific categories of your website you can quickly and visually assess what categories are more popular among that set of users.
  • Portfolio – If you use a single page portfolio, check if users are seeing your best projects, identify if they are trying to click on any of those to identify the most interesting ones.
  • Features page – Identify features users are more interested in.

3. If you are in the process of redesigning a specific page or a template:

• Create a heatmap of the old version;
• Create a heatmap of the new version;

4. Analyze high potential poorly performing pages:

• High Volume / High Bounce Rate: Open Google Analytics → On the sidebar click ‘Behavior’ → ‘Site Content’ → ‘All Pages’ → Sort by ‘Unique Page Views’ → Identify the pages where the Bounce Rate is unusually high compared to the other ones.

Creating and setting up an account with Hotjar

1. Click here and register your your email.
2. 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.

3. You will be prompted to enter your personal details.
4. 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’.
5. The next page will ask you ‘Where do you want to install Hotjar?’ Enter your site URL → Click the ‘Continue’ button.

6. Hotjar will now detect if you have Google Tag Manager installed.

7. In the next step, select “View platforms” and select Google Tag Manager.

Installing Hotjar using Google Tag Manager

1. 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.’

2. Grant Hotjar access to your Google Tag Manager account and click “Continue”.

3. Select your GTM Account and GTM Tag Container from the dropdown, then click ‘Create and Publish Tag’ button.

4. Click the ‘Confirm And Create’ button.

5. The next step is to verify your installation, just click the button. This step might take more than 60 seconds.

6. Add your URL to verify the installation.

7. 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.

Verify the Hotjar Tag in Google Tag Manager

1. Go to  http://tagmanager.google.com  and sign in with your account details.
2. Select the ‘Container Name’ that is set up on your website.

3. Click on ‘Tags’ in the left side bar of your workspace.

4. In your most recent tags, you will see the ‘AUTO Hotjar Tracking Code’ that was automatically added by Hotjar in the previous steps.
   

   

5. [Optional] You might want to rename the tag to match the naming convention used in your GTM account.
   1. Note: When creating new tags it’s recommended to define a naming convention from the beginning, this keeps your Google Tag Manager set up neatly organized and easy to maintain for many years to come.[Abbreviated Name Of Tool]_[Use for this tag] is a good start.
      1. e.g: “HJ_TrackingCode”

Setting up and viewing Heatmaps

1. 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.
2. To view existing heatmaps on your site. Click the ‘Heatmaps’ icon on the sidebar.

3. It will direct you to the Heatmap dashboard page. Click “New heatmap”.

4. Enter your page URL to view heatmap.

Note: You will only be able to view heatmaps on pages where the Hotjar tracking code is installed. The heatmap may not be available until 24 hours after installation as they’re collecting user sessions and generating heatmap for your site.

5. You should then be able to see the heatmap generated on your page.

6. You then have the option to set different page rules to view different heatmap on your site.

Excluding internal traffic from your heatmaps

1. If you have a static IP address, are already connected to the network that you want to exclude from your heatmaps (e.g.: your office network) and are not using a VPN, skip to “Excluding an IP address of a network”

2. If you’re not sure about any of these: skip to “Excluding an IP address of a network”

Excluding your current IP address:

1. On your browser go to  https://insights.hotjar.com/settings/ip
2. Scroll down to ‘IP Blocking’ and click ‘Block Your Current IP’

Then, ‘Save Changes.’

Excluding an IP address of a network:

1. Identify the IP addresses that you want to exclude:

1. Option 1: Ask the person responsible for your office’s network or your ISP (Internet Service Provider):
   1. Is our network IP Address static? If your IP address is not static, excluding it from your Heatmaps will not be a long-term solution.
   2. What is our external IP address? This is the IP address that you need. Take note of it.

2. Option 2: Check it yourself (or send these instructions to someone who’s network you want to exclude such as an employee’s home network If he works remotely):

Note: Make sure you are not using a VPN. If you are not sure, ignore and ask the person responsible for IT in your organization. If you’re using your personal computer (or are fully aware of the software in your computer) and have not installed any VPN software proceed with this method.

1. Connect to your local network. (Usually, you just need to be connected to the Wi-Fi of the network you want to exclude)
2. Go to  http://beta.speedtest.net/
3. Locate your IP address on the page:

4. Call your ISP and ask them if your network’s IP address is static.
   1. Note: If you want to exclude your local IP address, your Office’s IP address must be static.

2. On your browser go to  https://insights.hotjar.com/settings/ip
3. Enter an internal name for that IP Address
   1. Example: “Tommy’s house”

4. Click ‘Save Changes’.

5. That’s it! Now repeat this procedure for all the networks that you or your employees may use to access your website.

Example: Your office network, your home network, your employee’s home networks, etc.

Analyze your recordings

1. Log in to your dashboard.
2. On the sidebar click “Recordings”.

3. Open the  Clickmap & Scrollmap Diagnosis Cheat Sheet  .
4. Go through each of the ‘Indicators’ and identify which ones apply to your heatmap.
5. Log the results of your recordings by following the steps on the next chapter.

Log the results of your recordings

Important: Make sure no changes were made to the pages that are collecting data between the “Start” and the “End” date of your heatmaps.

1. Example: If your homepage has multiple CTA’s and you change them frequently every day. If the data for the heatmaps and scrollmaps is being collected throughout a whole month your data will not be meaningful since the target page changed multiple times while the clickmaps were being collected.

1. Open the  Scrollmap and Clickmap Insights Spreadsheet  .
2. Fill in each cell:
   1. Start date: The date you started collecting data.
   2. End date: The date your heatmap stopped collecting data (either because you stopped it or because it reached the number of pageviews that were setup).
   3. Segment: If you are only recording a specific segment of your traffic (e.g. you are only collecting data on Facebook traffic), enter it here.
   4. Page Analyzed: The URL of the page or group of pages being recorded.
   5. Level: Select ‘Page’ if you are recording a single specific page. Select ‘Template’ if you are not evaluating a specific page content but a template instead.
   6. Reasons for recording: If there was a specific reason why you felt like you should analyze that page enter it here. Typically, you should have a reason for it. E.g.: You might need to place another CTA button at the middle part of the page if you observe that users often do not scroll way down at the bottom of your landing page.
   7. Original Page: Save a screenshot of your original page and upload that image to a cloud storage service like Google Drive to get a shareable link.
      1. If you don’t have any way to create that screenshot and are using Google Chrome, ‘Awesome Screenshot’ is a good tool that offers that feature for free.
         8. Scrollmap and Clickmap:
            1. Log in to your  dashboard  .
            2. On the sidebar click “Recordings”

3. Select your recordings and click “Export.

4. Save the files Upload those images to a cloud storage service like Google Drive and get a shareable link. (Outside of the scope of this SOP)

9. Comments on results: This is where you should summarize your findings based on the  Clickmap & Scrollmap Diagnosis Cheat Sheet  .
   1. E.g.: ‘Possible misleading clickable elements. Users are clicking on the images instead of the CTA button’.

10. Hypothesis: This is where you come up with a possible reason for the findings you have just logged.
    1. E.g.: ‘Our image borders make them look like clickable elements.’

11. Next Step: Based on your hypothesis you input a possible fix for that issue:
    1. E.g.: ‘We should try and remove the image borders and better highlight our CTA instead.’

That’s it! You are now ready to implement any changes to the pages and record and log your traffic once again, until you achieve the desired behavior from your users.