# ヒートマップを表示した背景のページが文字化けしてしまった場合

ヒートマップ表示時に、背景のウェブページが文字化けしてしまう問題の原因と、その解決方法について説明します。

この手順を行うことで、ヒートマップ上の文字化けを解消し、ウェブページを正しく表示できるようになります。これにより、正確なページ表示の上でユーザー行動を分析できます。

### よくある利用シーン

ヒートマップを表示した際に、背景のウェブページが文字化けしてしまう場合に役立ちます。この問題は、ウェブサイトのHTMLヘッダーで指定された文字コード（例: `euc-jp`）と、ブラウザが実際にページを表示する際に使用する文字コード（例: `UTF-8`）が一致していないときに発生します。

### この機能の設定方法

以下の手順で文字コードの不一致を確認し、HTMLファイルを修正します。

#### 1. ブラウザが認識している文字コードを確認する

まず、ブラウザがどの文字コードでページを認識しているかを確認します。

1. 文字化けが発生しているページで、Chromeのデベロッパーツールを開きます。（`F12`キー または `Ctrl+Shift+I`）
2. 「コンソール（Console）」タブを開きます。
3. コンソールに `document.characterSet` と入力し、Enterキーを押します。
4. 表示された文字コード（例: `UTF-8`）を確認します。

#### 2. HTMLヘッダーの文字コードを修正する

次に、ウェブサイトのHTMLファイルを修正し、ブラウザが認識している文字コードと一致させます。

1. ウェブサイトのHTMLファイルを開きます。
2. ヘッダー部分にある文字コードの指定（`<meta charset="...">`）を探します。
3. 手順1で確認した文字コードに書き換えます。\
   （例：`<meta charset="euc-jp">` を `<meta charset="UTF-8">` に変更）
4. ファイルを保存し、ウェブサイトを再読み込みして、文字化けが解消されたか確認してください。

**【ご注意】**\
文字コードを変更する際は、サイト内のすべてのテキストファイルが同じ文字コードで保存されていることを確認してください。異なる文字コードが混在していると、別の問題が発生する可能性があります。


---

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