Implementing and Analyzing Heatmaps on your Website

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

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

ClickMinded - Clickmap & Scrollmap Diagnosis Cheat Sheet

ClickMinded - 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
🚗Adding Google Analytics to a site (using GTM)💗How to add Google Analytics to a Shopify Store

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

🍓Setting up Conversion Goals in Google Analytics
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 account.
2. Enter your details, accept the terms of service, and click the ‘Get Started’ button

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. That’s it! You will now be prompted to add Hotjar to your site. Click the ‘Start Setup’ button.

• Installing Hotjar using Google Tag Manager

1. After clicking ‘Start Setup,’ Hotjar will redirect you to your Google Account so that it can access your account – check on all three and click ‘Continue.’

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

3. Click the ‘Confirm And Create’ button.

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

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

**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 Heatmaps

1. Open your Hotjar dashboard on a new tab by clicking here.

**Note: Hotjar launched their Continuous Heatmaps Beta in May 2021. Since this change is fairly new, this SOP will provide help based on the old version – the Manual Heatmaps.

2. On the sidebar, click the fire icon ‘Heatmaps.’

3. It will direct you to the Heatmaps: Continuous [Beta] page. Click ‘Switch to Manual Heatmaps’ on the topmost right portion.

4. Click the ‘+New Heatmap’ button.

5. Name your Heatmap and click ‘Next’.

**Note: Start using a naming convention from the beginning—it will make it much easier for you to analyze results in the future. If you don’t have a naming convention yet, you can use [Traffic Segment] [Page Analyzed]

Example: [All Traffic] Homepage or [Facebook Ads Traffic] Homepage or [Headline A Variation] Homepage.

6. Under ‘Format,’ select the number of Pageviews that you would want to collect before Hotjar marks the heatmap as complete and click ‘Next’.

**Note: The free plan is limited to 1,000 Pageviews. That is a good enough sample for most cases.

7. Page Targeting:

**Note: This SOP covers a process that works for the vast majority of websites. There might be rare instances where your specific situation or URL structure will require a small variation to be performed. If that is the case, it is recommended that you ask the person responsible for website management to assist you with the heatmap setup.

8. If you want to record a specific page:
9. If you want to record all traffic that goes to a specific page and your website does not rely on URL parameters (e.g.: asiteaboutemojis.com/?id=1) to show specific pages:

**Note: If you don’t know if your website relies on URL parameters, open your homepage and click on a few links. Look at the URL bar in your browser, if your links include a question mark in the end of the URL your website probably relies on parameters to work.

10. Select “Visit a specific page”
11. Select “Simple URL match”
12. Enter your URL in the text box

Example: http://www.retroaddicts.com/

**Note: the “Simple URL match” rule that you have just selected will work whether you enter http or https, and whether you enter www or not in the beginning of the URL. It will also work if you use UTM parameters on your URLs. It will treat all those variations as the same page. This is the recommended rule for most websites when you want to record a specific page.

13. If you want to record all traffic that goes to a specific page and your website relies on URL parameters (e.g.: retroaddicts.com/?id=1) to show specific pages or you only want to record an exact URL:

**Note: If you don’t know if your website relies on URL parameters, open your homepage and click on a few links. Look at the URL bar in your browser, if your links include a question mark in the end of the URL your website probably relies in parameters to work.

**Note 2 : If you use this method, make sure that UTM tags will not cause traffic to not be recorded unwillingly.

E.g.: If you select this method and you ‘http://www.retroaddicts.com/’ as the URL. The traffic that goes to your website through the URL ‘http://www.retroaddicts.com/?utm_source=facebook’ will not be recorded by your heatmap.

14. Select “Visit a specific page”
15. Select “Exact URL match”
16. Enter your URL in the text box
1. Example: http://www.retroaddicts.com/

**Note: the “Simple URL match” rule that you have just selected will work whether you enter http or https, and whether you enter www or not in the beginning of the URL. It will also work if you use UTM parameters on your URLs. It will treat all those variations as the same page. This is the recommended rule for most websites when you want to record a specific page.

17. If you only want to record traffic from a specific source that goes to a specific page and your website:
18. Select ‘Similar Pages’ option.

20. Select ‘URL Regular Expression’ under the ‘Enter Page URL’ dropdown.

21. In the text field, you will enter your Regular Expression. To do so, follow the following steps:
1. Take note of the UTM parameters for that specific traffic source.

**Note: If you are not using UTM parameters yet, you can follow SOP 006.

**Note 2: If you want to only record a specific source and medium (or campaign too) you can also specify it at this step instead of just the source.

Example: utm_source=facebook

1. Take note of the URL of the page that you want to record.

Example: retroaddicts.com/product-category/consoles/

2. For the URL of the page that you have just took note on step b): Add a backslash before every forward slash or period that you have in the URL.

Example: retroaddicts\.com\/product-category\/consoles\/

3. Place the result of step a) and step c) in the following code:

**Note: Replace everything in green, including the square brackets.

^(?=.*\[STEP B - YOUR UTM SOURCE HERE] \b)(?=.*\b[STEP C - YOUR URL WITH FORWARD SLASHES HERE]($|\?)).*$

Example: ^(?=.*\utm_source=facebook\b)(?=.*\bretroaddicts\.com\/product-category\/consoles\/($|\?)).*$

4. Paste that ‘combined code’ in previous step on the text field:

5. If you want to record all traffic that goes to multiple pages and bundle the data together (e.g.: you want to see how your template performs independently of the content that is inside, or multiple pages have the same content):
1. Select ‘Similar Pages’ and ‘URL regular expression’ under ‘Enter Page URL’ dropdown.

6. In the text field, you will enter your Regular Expression. To do so, follow these steps:
1. Create a list of all the URLs that you want to have being recorded on the same heatmap.

Example:

• http://www.retroaddicts.com/product/original-game-boy/
• http://www.retroaddicts.com/product/original-nes/
• http://www.retroaddicts.com/product/original-snes/
7. For every URL add a backslash before every forward slash or period that you have in the URL and add the symbols ($|\?) in the end.

Example:

• http:\/\/www\.retroaddicts\.com\/product\/original-game-boy\/($|\?)
• http:\/\/www\.retroaddicts\.com\/product\/original-nes\/($|\?)
• http:\/\/www\.retroaddicts\.com\/product\/original-snes\/($|\?)
8. Join them all on the same line of text and separate them with a pipe (|) symbol.

Example:

http:\/\/www\.retroaddicts\.com\/product\/original-game-boy\/($|\?)|http:\/\/www\.retroaddicts\.com\/product\/original-nes\/($|\?)|http:\/\/www\.retroaddicts\.com\/product\/original-snes\/($|\?)

9. Paste that code on the text field.

• 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: Follow this procedure.
2. If you’re not sure about any of these: Follow this procedure.

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:
2. 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.
3. 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.

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

7. Call your ISP and ask them if your network’s IP address is static.

**Note: If you want to exclude your local IP address, your Office’s IP address must be static.

8. On your browser go to https://insights.hotjar.com/settings/ip
9. Enter an internal name for that IP Address

Example: “Tommy’s house”

10. Click ‘Save Changes’.

11. 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 “Heatmaps” → “View Heatmap”.

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.

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:
9. Log in to your dashboard.
10. On the sidebar click ‘Heatmaps’ → ‘View Heatmap’.

11. Select ‘Click’ → ‘Download’.
12. Select ‘Scroll’ → ‘Download’.

3. Upload those images to a cloud storage service like Google Drive and get a shareable link. (Outside of the scope of this SOP)
4. 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’.
5. 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.’
6. 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.