2026年9月12日

WordPressにヒートマップ解析ツールHotjarを導入する方法と活用のコツ

SEO・パフォーマンス

WordPressにHotjarを導入するには、Hotjarでサイトを登録してトラッキングコードを受け取り、公式プラグインかGoogleタグマネージャー、または小さなmu-pluginでサイトに読み込ませます。この記事では、導入方法の選び方、管理者のアクセスを除外する設定、個人情報を記録しないための設定、同意管理との連携、そして集めたヒートマップを改善につなげる見方までを説明します。読み終えると、Hotjarを安全に入れて「どこが読まれ、どこで離脱しているか」を確かめられるようになります。

Hotjarでできること

Hotjarは、訪問者の行動を可視化する解析ツールです。主な機能は次のとおりです。

ヒートマップ：クリックやタップの位置、マウスの動き、どこまでスクロールされたかを色の濃淡で表示します。
レコーディング：個々の訪問者のスクロールやクリックを、動画のように再生して確認できます。
アンケート・フィードバック：ページ上に小さな質問やフィードバック用のボタンを表示し、訪問者の声を集めます。

Google アナリティクス 4（GA4）が「何人が来て、どのページで離脱したか」という数字を示すのに対し、Hotjarは「ページの中で何が起きていたか」を見せてくれます。両方を組み合わせると、数字で問題のあるページを見つけ、Hotjarで原因を探す、という流れが作れます。

HotjarはContentsquareのグループ企業の製品で、プランの構成や機能の名前、無料で使える範囲は変わることがあります（2026年10月現在）。この記事では画面の表記ではなく目的で説明するので、実際の画面は公式ヘルプとあわせて確認してください。

導入方法を選ぶ

Hotjarにサインアップしてサイトを登録すると、サイトID（数字）とトラッキングコードが発行されます。WordPressへの入れ方は主に三つです。

公式のWordPressプラグイン：サイトIDを入力するだけで済みます。導入前に、プラグインの最終更新日と、使っているWordPressのバージョンで動作確認されているかを確認してください。
Googleタグマネージャー（GTM）：すでにGTMを使っているなら、ここに追加するのが管理しやすい方法です。GTMにはHotjar用のタグの種類が用意されており、サイトIDを入れて全ページで配信するトリガーを設定します。同意管理ツールとの連携もGTM側で組めます。
mu-pluginで読み込む：プラグインを増やしたくない場合や、読み込む条件を細かく決めたい場合に向いています。次の章で例を示します。

どの方法でも、トラッキングコードを二重に入れないことが大切です。テーマの設定画面やほかのプラグインのヘッダー挿入欄に古いコードが残っていると、データが重複します。

mu-pluginで読み込む例

テーマの functions.php に書くと、テーマを変えたときに消えてしまいます。wp-content/mu-plugins/hotjar.php として保存すると、プラグインの一覧から誤って無効化されることもありません。作業前にサイトをバックアップし、ステージング環境で確認してから本番に置いてください。

<?php
/**
 * Plugin Name: Hotjar Loader
 */
defined( 'ABSPATH' ) || exit;

// Hotjarの管理画面に表示されるサイトID（例の値を書き換える）
const MY_HOTJAR_SITE_ID = 1234567;

add_action( 'wp_enqueue_scripts', function () {
	// 管理者・編集者など、ログイン中のユーザーのアクセスは記録しない
	if ( is_user_logged_in() ) {
		return;
	}

	// 対象ページを絞る例（不要なら削除）
	// if ( ! is_front_page() && ! is_page( array( 'contact', 'pricing' ) ) ) { return; }

	$site_id = absint( MY_HOTJAR_SITE_ID );
	if ( ! $site_id ) {
		return;
	}

	$snippet = "(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};"
		. "h._hjSettings={hjid:{$site_id},hjsv:6};a=o.getElementsByTagName('head')[0];"
		. "r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;"
		. "a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');";

	wp_register_script( 'my-hotjar', false, array(), null, false );
	wp_enqueue_script( 'my-hotjar' );
	wp_add_inline_script( 'my-hotjar', $snippet );
} );

wp_register_script() の第2引数に false を渡すと、ファイルを持たない空のスクリプトとして登録でき、wp_add_inline_script() でコードだけを出力できます。サイトIDは absint() で整数にしてから埋め込んでいるため、想定外の文字列が出力に混ざりません。

上のコードはHotjarが長く案内してきた形式のトラッキングコードです。Hotjarの管理画面に表示されるコードが更新されている場合は、そちらを優先してください。

ページキャッシュを使っている場合、is_user_logged_in() による出し分けは「ログイン中はキャッシュを使わない」設定になっていることが前提です。多くのキャッシュプラグインは初期設定でそうなっていますが、念のため確認してください。

個人情報を記録しない設定

レコーディングは画面の内容をそのまま記録する機能なので、個人情報の扱いに注意が要ります。

入力欄の内容：Hotjarは初期設定で、フォームへの入力内容を記録しないようになっています。この設定を緩めないでください。
画面に表示される個人情報：会員ページの氏名や住所、WooCommerceの注文内容など、入力欄以外に表示される情報は、要素に data-hj-suppress 属性を付けると記録時に伏せられます。テンプレートを編集できるなら、該当部分に付けておきます。
記録しないページ：マイページや決済画面など、記録する必要のないページは、Hotjarの設定で対象から外すか、上のコードの条件分岐で読み込まないようにします。

<div class="member-profile" data-hj-suppress>
  <!-- ここに表示される氏名・メールアドレスは記録時に伏せられる -->
</div>

同意管理とプライバシーポリシー

Hotjarは訪問者のブラウザにCookieを保存し、行動データを外部に送ります。EUの利用者がいる場合はGDPRに基づく同意の取得が、国内では個人情報保護法への対応や、事業によっては電気通信事業法の外部送信規律（2023年6月施行）への対応が求められることがあります。対象になるかは事業の内容によって異なるため、判断に迷う場合は専門家に確認してください。

技術的には、ComplianzやCookieYesなどの同意管理プラグインで、Hotjarを「統計」や「解析」の区分に入れ、同意が得られるまで読み込まないように設定するのが一般的です。GTMを使っている場合は、同意の状態をトリガーの条件に加えます。

あわせて、プライバシーポリシーに、Hotjarを使っていること、取得する情報の種類と目的、オプトアウトの方法を書き加えます。

導入できたか確かめる

ログアウトした状態（またはシークレットウィンドウ）でサイトを開き、次を確認します。

ブラウザの開発者ツールの「ネットワーク」タブで、hotjar を含むドメインへのリクエストが発生している
「コンソール」タブで typeof hj と入力し、"function" が返る
Hotjarの管理画面にある、インストールを確認する機能で検出される

ログイン中は読み込まない設定にしているので、管理者のままで確かめると「入っていない」ように見えます。同意管理を入れている場合は、同意ボタンを押したあとに読み込まれることも確認してください。

ヒートマップを改善につなげる見方

データが集まったら、「何を確かめたいか」を決めてから見ると、結論を出しやすくなります。

スクロールの到達率：記事の途中で多くの人が離れているなら、その手前の見出しや導入文が期待と合っていない可能性があります。問い合わせボタンなど大事な要素が、多くの人が到達しない位置にないかも確認します。
クリックされない場所のクリック：リンクではない画像や太字が頻繁にクリックされていれば、訪問者はそこから先の情報を求めています。リンクを付けるか、見た目を変えます。
何度も連続でクリックされる場所：ボタンが反応しない、読み込みが遅いなどの不具合の手がかりになります。該当するレコーディングを再生して原因を探します。
スマホとパソコンを分けて見る：同じページでも、端末によってスクロールの深さやタップの位置が大きく異なります。

改善したら、変更前後の期間を分けて同じ指標を比べます。Hotjarが記録するのは訪問者の一部である場合があるため、少ないデータで判断せず、GA4の数字とも照らし合わせてください。

なお、Hotjarのスクリプトは非同期で読み込まれますが、外部スクリプトが一つ増えることに変わりはありません。導入前後でPageSpeed Insightsの結果を比べ、影響が気になる場合は対象ページを絞ります。

まとめ

Hotjarはヒートマップやレコーディングでページ内の行動を見るツールで、GA4の数字と組み合わせると原因を探しやすくなります。
導入は公式プラグイン、GTM、mu-pluginのいずれか一つで行い、コードの二重設置を避けます。ログイン中のユーザーは記録しない設定にします。
入力内容を記録しない初期設定は維持し、画面に出る個人情報には data-hj-suppress を付け、不要なページでは読み込みません。
同意管理プラグインで同意後に読み込むようにし、プライバシーポリシーに利用目的を書き加えます。
プランや画面の表記は変わることがあるため、公式ヘルプで最新の情報を確認しながら運用してください。