When the Webpage in the Background of the Heatmap Display has Garbled Characters

This explains the causes and solutions to the problem of the background webpage displaying garbled characters when showing a heatmap.

By following this procedure, you can resolve garbled characters on the heatmap and display the webpage correctly. This allows you to analyze user behavior with accurate page display.

Common Use Cases

This is useful when the background webpage displays garbled characters when showing a heatmap. This problem occurs when the character encoding specified in the website's HTML header (example: euc-jp) does not match the character encoding that the browser actually uses when displaying the page (example: UTF-8).

How to Configure This Feature

Follow the steps below to check for character encoding mismatches and correct the HTML file.

1. Confirm the Character Encoding Recognized by the Browser

First, confirm which character encoding the browser is using to recognize the page.

Open Chrome's Developer Tools on the page where garbled characters are occurring. (F12 key or Ctrl+Shift+I)

Open the "Console" tab.

Type document.characterSet in the console and press Enter.

Confirm the displayed character encoding (example: UTF-8).

2. Correct the Character Encoding in the HTML Header

Next, modify the website's HTML file to match the character encoding recognized by the browser.

Open the website's HTML file.

Find the character encoding specification in the header section (<meta charset="...">).

Replace it with the character encoding confirmed in Step 1. (Example: Change <meta charset="euc-jp"> to <meta charset="UTF-8">)

Save the file and reload the website to confirm that the garbled characters have been resolved.

[Note]

When changing character encoding, please confirm that all text files within the site are saved in the same character encoding. If different character encodings are mixed, other problems may occur.