Implementing and Analyzing Heatmaps on your Website

Table of Contents

Implementing and Analyzing Heatmaps on your Website

Last Updated / Reviewed: April 1st, 2020

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.

Pre-requisites 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 – Add Google Tag Manager to a WordPress Site.

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

 

𝤿 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. 1. Do you want to analyze quantitative data, analyze specific metrics over given time periods, or track major events on your website?
    1. a. 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. i. If you don’t have Google Analytics on your website yet, you can set it up by following SOP 009.
      2. 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 SOP 021.
  2. 2. Do you want to analyze how your users are interacting within a specific page or subset of pages?
    1. a. 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. 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. 2. Identify supporting pages that provide clues regarding what might be going through your user’s mind:
    • Example:
      • – FAQ page – If you’re using a 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. 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. 4. Analyze high-potential poorly performing pages:
    • – High Volume / High Bounce Rate: Open Google Analytics → On the sidebar click “Behaviour” → Click “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. 1. Click here and register your account.
  2. 2. Enter your details and click “Let’s get started”
  3. 3. Select your password and click “Next”.
  4. 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. 5. Enter your site URL → Click “Start using hotjar”.
  6. 6. Close the pop-up window.
  7. 7. That’s it! You’re on your dashboard now, and you should be able to see your tracking code:

𝤿 Installing hotjar using Google Tag Manager #

 

Note: If you don’t have Google Tag Manager set up on your website, you will want to follow the procedure covered in SOP 004 – Add Google Tag Manager to a WordPress Site

  1. 1. Go to http://tagmanager.google.com and sign in with your account details.
  2. 2. Select the container that is set up on your website.
  3. 3. Go to “Tags”:
  4. 4. Click on “New” and rename your tag. It is recommended that it contains a mention to Hotjar, it makes it easier in the future to locate the tags you are looking for.
    1. a. 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. i. e.g: “HJ_TrackingCode”

  5. 5. Click on the “Tag Configuration” section → Search: “Hotjar” → Click “Hotjar Tracking Code”
  6. 6. Open your Hotjar dashboard on a new tab by clicking here, on your address bar copy the numbers after /sites/ and before /dashboard/
    1. a. Note: In this example it would be 747394.

  7. 7. Go back to Google Tag Manager and paste your Site ID.
  8. 8. On the “Triggering” section click “Choose a trigger to make this tag fire…” → “All Pages”.
    1. a. Note: If for some reason there are pages on your website that you do not want to record. (e.g: for security / privacy / performance reasons) You may not want to select “All Pages” but create a custom Triggering rule instead. (Out of the scope of this SOP)
  9. 9. Click “Save” on the top right corner:

𝤿 Testing if HotJar has been correctly implemented #

 

  1. 1. Open your Hotjar dashboard on a new tab by clicking here.
  2. 2. Click “I have installed the tracking code”
  3. 3. Enter your website in the text box and click “Verify Installation”
  4. 4. You should see the following success message:

𝤿 Setting up Heatmaps #

 

  1. 1. Open your Hotjar dashboard on a new tab by clicking here.
  2. 2. On the sidebar click “Heatmaps”
  3. 3. Click “+New Heatmap”
  4. 4. Name your Heatmap and click “Next”.
    1. a. 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]
      1. i. Example: [All Traffic] Homepage or [Facebook Ads Traffic] Homepage or [Headline A Variation] Homepage.

  5. 5. Select the number of Pageviews that you would want to collect before hotjar marks the heatmap as complete and click “Next”.
    1. a. Note: The free plan is limited to 1.000 Pageviews. That is a good enough sample for most cases.

  6. 6. 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.
    1. 1. If you want to record a specific page:
      1. a. 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 in parameters to work.
        1. i. Select “Visit a specific page”
        2. ii. Select “Simple URL match”
        3. iii. Enter your URL in the text box
          1. 1. Example: http://asiteaboutemojis.com/
            1. a. 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.

      2. b. If you want to record all traffic that goes to a specific page and your website relies on URL parameters (e.g: asiteaboutemojis.com/?id=1) to show specific pages or you only want to
        record an exact URL:
        Note 1: 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 pick “http://asiteaboutemojis.com/” as the URL. The traffic that goes to your website through the URL “http://asiteaboutemojis.com/?utm_source=facebook” will not be recorded by your heatmap.

        1. i. Select “Visit a specific page”
        2. ii.Select “Exact URL match”
        3. iii. Enter your URL in the text box
          1. 1. Example: http://asiteaboutemojis.com/
            1. a. 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.

      3. c. If you only want to record traffic from a specific source that goes to a specific page and your website:
        1. i. Select “Visit one of multiple similar pages”
        2. ii. Select “URL Regular Expression”
        3. iii. In the textbox you will enter your Regular Expression. To do so follow the following steps:
          1. a. Take note of the UTM parameters for that specific traffic source.

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

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

            1. i. Example: utm_source=facebook
          2. b. Take note of the URL of the page that you want to record.
            1. i. Example: http://www.asiteaboutemojis.com/archives/49
          3. c. 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.
            1. i. Example: asiteaboutemojis\.com\/archives\/49
          4. d. 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]($|\?)).*$

            1. i. Example: ^(?=.*\utm_source=facebook\b)(?=.*\basiteaboutemojis\.com\/archives\/49($|\?)).*$
          5. e. Paste that code on the text box.
      4. d. 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. 1. Select “Visit one of multiple similar pages”
        2. 2. Select “URL Regular Expression”
        3. 3. In the textbox you will enter your Regular Expression. To do so follow the following steps:
          1. i. Create a list of all the URLs that you want to have being recorded on the same heatmap.
            1. i. Example:
          2. ii. 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.
            1. i. Example:
              • http:\/\/www\.asiteaboutemojis\.com\/tshirts\/($|\?)
              • http:\/\/www\.asiteaboutemojis\.com\/caps\/($|\?)
              • http:\/\/www\.asiteaboutemojis\.com\/socks\/($|\?)
          3. iii. Join them all on the same line of text and separate them with a pipe symbol.
            1. i. Example:
              http:\/\/www\.asiteaboutemojis\.com\/tshirts\/($|\?)|http:\/\/www\.asiteaboutemojis\.com\/caps\/($|\?)|http:\/\/www\.asiteaboutemojis\.com\/socks\/($|\?)
          4. iv. Paste that code on the text box.

𝤿 Excluding internal traffic from your heatmaps #

 

  1. a. 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. b. If you’re not sure about any of these, or if you are not at your location and need to request another employees for their network IP: Follow this procedure.

Excluding your current IP address: 

  1. 1. On your browser go to https://insights.hotjar.com/settings/ip
  2. 2. Click “Block Your Own IP”

Excluding an IP address of a network:

  1. 1. Identify the IP addresses that you want to exclude:
    1. a. Option 1: Ask the person responsible for your office’s network or your ISP (Internet Service Provider):
      1. 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. 2. What is our external IP address? This is the IP address that you need. Take note of it.
    2. b. 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 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. 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. 2. Go to http://beta.speedtest.net/
      3. 3. Locate your IP address on the page:
      4. 4. Call your ISP and ask them if your network’s IP address is static.
        1. a. Note: If you want to exclude your local IP address your Office’s IP address must be static.
  2. 2. On your browser go to https://insights.hotjar.com/settings/ip
  3. 3. Enter an internal name for that IP Address
    1. a. Example: “Tommy’s house”
  4. 4.  Click “Block IP”
  5. 5. That’s it! Now repeat this procedure for all the networks that you or your employees may use to access your website.
    1. a. Example: Your office network, your home network, your employee’s home networks, etc.

⛋ Analyze your recordings #

 

  1. 1. Log in to your dashboard.
  2. 2. On the sidebar click “Heatmaps” → “View Heatmap”.
  3. 3. Open the Clickmap & Scrollmap Diagnosis Cheat Sheet.
  4. 4. Go through each of the “Indicators” and identify which ones apply to your heatmap.
  5. 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.

  • a. 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. 1. Open the Scrollmap and Clickmap Insights Spreadsheet.
  2. 2. Fill in each cell:
    1. a. Start date: The date you started collecting data.
    2. b. 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. c. 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. d. Page Analyzed: The URL of the page or group of pages being recorded.
    5. e. 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. f. 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.
    7. g. 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. i. 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. h. Scrollmap and Clickmap:
    9. i. Log in to your dashboard.
    10. j. On the sidebar click “Heatmaps” → “View Heatmap”.
    11. k. Select “Click” → “Download”.
    12. l. Select “Scroll” → “Download”.
    13. m. Upload those images to a cloud storage service like Google Drive and get a shareable link. (Outside of the scope of this SOP)
    14. n. Comments on results: This is where you should summarize your findings based on the Clickmap & Scrollmap Diagnosis Cheat Sheet.
      1. i. E.g: “Possible misleading clickable elements. Users are clicking on the images instead of the CTA button”.
    15. o. Hypothesis: This is where you come up with a possible reason for the findings you have just logged.
      1. i. E.g: “Our image borders makes them look like clickable elements.”
    16. p. Next Step: Based on your hypothesis you input a possible fix for that issue:
      1. i. E.g: “We should try and remove the image borders and better highlight our CTA instead.”
  3. 3. 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.
Google Analytics, Google Tag Manager

Powered by BetterDocs