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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helps.ptengine.com/en/faq/insight-setting/heatmap-garbled.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.