SOP 049: Implementing and Analyzing Heatmaps on your Website
\nEasily record, log and analyze heatmaps and incorporate them on your analytics strategy to learn more about your user’s on-page behavior across your site.
\nLast Updated / Reviewed: 03/26/2024
\nExecution Time: 30 mins - 1 hour
\n🚀 Goal: To successfully incorporate Heatmaps on your analytics strategy.
\n🤞 Ideal Outcome: Your business is now correctly recording, logging and analyzing your heatmaps.
\n🤔 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.
\n🧐 Where this is done In Google Tag Manager, Hotjar, and Google Spreadsheets.
\n🗓️ 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.
\n👨 Who does this: The person responsible for Analytics or Conversion Rate Optimization (CRO).
\n__⚠️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.
\nClick here to get the most up-to-date version of this SOP
\nTemplate 017: Clickmap & Scrollmap Diagnosis Cheat Sheet (web version)
\nTemplate 018: Scrollmap & Clickmap Insights Log (web version)
\nDo you want to analyze quantitative data, analyze specific metrics over given time periods, or track major events on your website?
\nIf 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.
\nIf you don’t have Google Analytics on your website yet, you can set it up by following SOP 009: Add Google Analytics 4 to a site (web version) for WordPress or SOP 067: How to add Google Analytics to a Shopify Store (web version) for Shopify.
\nIf 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 168: Set up and track custom events in Google Analytics 4 (web version).
\nDo you want to analyze how your users are interacting within a specific page or subset of pages?
\nIf 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.
\nExample:
\nFAQ 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.
\nCategory 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.
\nPortfolio - 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.
\nIf you are in the process of redesigning a specific page or a template:
\nHigh 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.
\nNote: 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. e.g: “HJ_TrackingCode”
\nNote: 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.
\nIf 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”
\nIf you’re not sure about any of these: skip to “Excluding an IP address of a network”
\nExcluding your current IP address:
\nThen, ‘Save Changes.’
\nExcluding an IP address of a network:
\nIdentify the IP addresses that you want to exclude:
\nOption 1: Ask the person responsible for your office’s network or your ISP (Internet Service Provider):
\nIs our network IP Address static? If your IP address is not static, excluding it from your Heatmaps will not be a long-term solution.
\nWhat is our external IP address? This is the IP address that you need. Take note of it.
\nOption 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):
\nNote: 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.
\nConnect to your local network. (Usually, you just need to be connected to the Wi-Fi of the network you want to exclude)
\nNote: If you want to exclude your local IP address, your Office’s IP address must be static.
\nExample: “Tommy’s house”
\nClick ‘Save Changes’.
\nThat’s it! Now repeat this procedure for all the networks that you or your employees may use to access your website.
\nExample: Your office network, your home network, your employee’s home networks, etc.
\nImportant: Make sure no changes were made to the pages that are collecting data between the “Start” and the “End” date of your heatmaps.
\nExample: 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.
\nStart date: The date you started collecting data.
\nEnd date: The date your heatmap stopped collecting data (either because you stopped it or because it reached the number of pageviews that were setup).
\nSegment: If you are only recording a specific segment of your traffic (e.g. you are only collecting data on Facebook traffic), enter it here.
\nPage Analyzed: The URL of the page or group of pages being recorded.
\nLevel: 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.
\nReasons 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.
\nOriginal 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.
\nIf 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.
\nScrollmap and Clickmap:
\nComments on results: This is where you should summarize your findings based on the Template 017: Clickmap & Scrollmap Diagnosis Cheat Sheet (web version)
\nE.g.: ‘Possible misleading clickable elements. Users are clicking on the images instead of the CTA button’.
\nHypothesis: This is where you come up with a possible reason for the findings you have just logged.
\nE.g.: ‘Our image borders make them look like clickable elements.’
\nNext Step: Based on your hypothesis you input a possible fix for that issue:
\nE.g.: ‘We should try and remove the image borders and better highlight our CTA instead.’
\nThat’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.
\n"}