STUDIOで作ったサイトにヒートマップを入れる方法

この記事の要約

STUDIOにヒートマップを入れるには、「カスタムコード」機能にタグを貼るだけでOK

カスタムコード機能は有料プランの機能なので、事前にプランを確認

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

「STUDIOで作ったサイトに、ヒートマップって入れられるの？」と思っていませんか？STUDIOにはコードを直接埋め込める「カスタムコード」という機能があり、これを使えばタグを1つ貼るだけでヒートマップ計測を導入できます。この記事では、事前に確認しておきたいプランの条件から、貼り付けの手順、設置後の確認方法までを順番に解説します。

前提：カスタムコードが使えるプランか確認する

STUDIOで外部のコード（HTML/JavaScript）を埋め込む「カスタムコード」機能は、有料プランの機能です。無料プランのままだと、この記事で紹介する手順が使えない場合があります。

プラン名や料金はSTUDIO側の改定でしばしば変わるため、この記事では具体的な金額を記載しません。作業を始める前に、必ずSTUDIO公式ヘルプのプラン表で、カスタムコードが使える最新のプラン条件を確認してください。

STUDIO公式ヘルプ：https://help.studio.design/

自分のサイトが対象プランになっているか分からない場合は、STUDIOエディタの契約・プラン管理画面から現在のプランを確認できます。

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

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

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

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

手順：カスタムコードにタグを貼る

STUDIOエディタでサイトを開き、サイト設定を開く
設定メニューの中から**「カスタムコード」**の項目を探す
「head」欄（ページの <head> 内に挿入される欄）に、上記のタグをそのまま貼り付けて保存する
サイトを公開（再公開）する

ここで一番大事なポイントは、手順4の公開作業です。 STUDIOはエディタ上で設定を保存しただけでは、実際に公開されているサイトには反映されません。カスタムコードを貼った後、必ずサイトを公開（すでに公開済みのサイトなら再公開）してください。この一手間を忘れると、タグを正しく貼っていても計測が始まりません。

動作確認

公開作業が終わったら、実際に自分の公開URLを数ページ開いてみましょう。ただし、ここで大事なポイントがあります。

「ページがエラーなく表示される」ことと「計測が正しく動いていること」は別物です。 ブラウザ上で何のエラーも出ていなくても、サイトキーの入力ミスや貼り付け場所の間違いで、計測データが届いていないケースがあります。

正しく設置できたかどうかは、必ず HeatMapXダッシュボードのサイト一覧で、対象サイトの件数が実際に増えているか を確認してください。公開URLを数ページ閲覧した後、件数が増えていれば設置成功です。

うまくいかない時は

タグを貼ったはずなのにダッシュボードの件数が増えない場合は、以下を順番に確認してください。

サイトを公開（再公開）したか — カスタムコードの保存だけでは反映されません。編集後に必ず公開操作を行ったか確認してください。
「head」欄に貼ったか — 「body」欄など別の入力欄に貼ってしまうと、正しく読み込まれない場合があります。貼り付け先が「head」であることを確認してください。
サイトキーの取り違え — 別サイト用のキーを貼っていないか、コピー時に文字が欠けていないかを確認してください。

さいごに

STUDIOへのヒートマップ導入は、カスタムコード欄にタグを貼って公開するだけで完了します。HeatMapXは無料で始められるので、まずは自分のサイトの「見られ方」を知るところから試してみてください。