Googleタグマネージャー（GTM）でヒートマップを導入する方法（コード編集なし・5分で完了）

この記事の要約

GTMを使えば、サイトのコードを一切編集せずにヒートマップを導入できる

手順は「カスタムHTMLタグを作る → All Pagesトリガーを付ける → 公開」の5ステップ

設置の成功確認は、HeatMapXダッシュボードで該当サイトの件数が増えていること

すでにGoogleタグマネージャー（GTM）でタグを管理しているサイトなら、ヒートマップの導入はGTM経由が一番きれいです。サイトのコードを触らず、GTMの管理画面だけで完結します。この記事では手順を1ステップずつ解説します。

準備：サイトキーを取得する

まず、HeatMapX（無料プランあり）にアクセスして自分のサイトを登録し、サイトキーを発行します。クレジットカードの登録は不要です。

サイトキーが発行されたら、以下の形のタグを使います。あなたのサイトキー の部分だけを、発行された実際のキーに置き換えてください。

<script src="https://heatmapx.com/tracker.js?key=あなたのサイトキー" data-site-key="あなたのサイトキー"></script>

注意：貼り付けるのはURLだけではなく、タグ全体です。data-site-key="..." の部分が「どのサイトの計測か」を伝える役割を持っているので、この属性を消したり、<script src="..."> のURL部分だけを貼ったりすると計測できません。

GTMでの設定手順（5ステップ）

GTMの管理画面（tagmanager.google.com）を開き、対象サイトのコンテナ（ワークスペース）を選ぶ
左メニューの「タグ」→「新規」をクリックし、タグの設定で「カスタムHTML」を選ぶ
HTML入力欄に、上記のタグ全体をそのまま貼り付ける
トリガーの設定で「All Pages（すべてのページ・ページビュー）」を選び、タグに分かりやすい名前（例：HeatMapX）を付けて保存する
右上の「公開（送信）」を押して、変更を本番に反映する

これで完了です。以降、サイトの全ページでヒートマップの計測が始まります。

公開前に発火を確かめたいとき（プレビューモード）

GTMの「プレビュー」ボタンを押すと、公開前に自分のブラウザだけでタグの動きを確認できます。プレビュー画面（Tag Assistant）で自分のサイトを開き、作成したHeatMapXタグが「Fired（発火済み）」の欄に表示されていれば成功です。

発火しないときのチェックポイント

「公開」を押し忘れていないか：GTMは保存しただけでは本番に反映されません。一番多い原因です
トリガーがAll Pagesになっているか：特定ページ限定のトリガーだと、他のページで計測されません
Cookie同意バナー（同意モード）でブロックされていないか：同意管理ツールを使っている場合、訪問者が同意するまでカスタムHTMLタグの配信が止まる設定になっていることがあります。タグの「同意設定」や同意管理ツール側の分類を確認してください
data-site-keyが正しいか：別サイトのキーを貼ると、データが別サイトに混ざってしまいます

Claude Code（AIエージェント）に手伝ってもらう

「画面のどこを押せばいいか分からない」という方は、Claude CodeなどのAIエージェントに案内役をお願いする方法もあります。以下をそのままコピーして、サイトキーだけ自分のものに書き換えて貼り付けてください。

Google Tag ManagerでHeatMapXのヒートマップ計測タグを配信したいです。
GTMの画面操作を1ステップずつ、私の返事を待ちながら案内してください。

使うタグ（カスタムHTML・トリガーはAll Pages）:
<script src="https://heatmapx.com/tracker.js?key=あなたのサイトキー" data-site-key="あなたのサイトキー"></script>

GTMを使わず、サイトのコードに直接タグを入れたい場合は、こちらを使えばClaude Codeがファイル編集までやってくれます。

このプロジェクトにHeatMapXのヒートマップ計測タグを導入してください。
全ページの </head> 直前に以下のタグが入るようにして、変更したファイルを教えてください。

<script src="https://heatmapx.com/tracker.js?key=あなたのサイトキー" data-site-key="あなたのサイトキー"></script>

HeatMapXは計測データの取得・分析もClaude Codeから行える設計です（CLI連携）。導入後の使い方はダッシュボードの「CLI & スキル」ページをご覧ください。

動作確認：数字が動けば成功

設置が終わったら、自分のサイトを何ページか見て回ってから、HeatMapXダッシュボードを開いてください。サイト一覧の「今日のセッション」が増えていれば計測成功です。

エラーが出ないことではなく、ダッシュボードの数字が動くことが成功のサインです。数字が動かないときは、上の「発火しないときのチェックポイント」を順に確認してみてください。