2026年7月6日

WordPressにHotjarを導入する方法｜ヒートマップと録画の設定・プライバシー対策

SEO・パフォーマンス

WordPressにHotjarを導入するには、Hotjarの管理画面で発行されるトラッキングコード（サイトIDを含むスクリプト）をサイトの <head> 内に設置し、管理画面の導入確認機能で受信を確かめます。この記事では、設置方法の選び方、子テーマからの条件付きの読み込み、管理者や決済画面の除外、録画のマスキング、同意取得と表示速度への配慮、ヒートマップの読み方の注意点までを説明します。

Hotjarでできることと現在の提供体制

Hotjarは、ページのどこがクリックされ、どこまでスクロールされたかを色で示すヒートマップと、訪問者の操作を再生できる録画（レコーディング）を中心に、アンケートやフィードバック収集の機能を持つツールです。「CTAボタンがスクロールの届かない位置にある」「リンクでない画像が何度もクリックされている」といった、アクセス数の集計だけでは見えない問題を見つけるのに役立ちます。

Hotjarは2021年にContentsquareに買収され、現在は同社の製品群の一つとして提供されています（2026年10月現在）。統合の進み方によって、アカウントの管理画面やトラッキングコードの案内が変わることがあるため、設置するコードはこの記事の記述ではなく、管理画面に表示される最新のものを使ってください。

設置方法の選び方

WordPressへの設置方法は主に3つあります。

Googleタグマネージャー経由：すでにGTMでGA4などを管理しているなら、GTMにHotjarのタグを追加する方法がまとまりやすいです。テーマを触らずに済み、同意管理とも連動させやすくなります
WordPress用のプラグイン：サイトIDを入力するだけで設置できるプラグインがあります。使う場合は、WordPress.orgで現在も更新されているか、対応するWordPressのバージョンを確認してから導入します
子テーマから読み込む：管理者や特定ページを除外する条件分岐を自由に書けます。この記事ではこの方法を詳しく説明します

ヘッダーにコードを挿入する汎用プラグインに貼る方法も手軽ですが、管理者の閲覧まで記録されるため、試験的な確認向けと考えてください。

子テーマからトラッキングコードを読み込む

作業前に子テーマの functions.php をバックアップしてください。手順は次のとおりです。

Hotjarの管理画面で対象サイトのトラッキングコードを開き、コピーします。コードにはサイトIDが含まれています
子テーマに js/hotjar-tracking.js を作り、<script> タグを除いた中身を貼り付けます
functions.php に次のコードを追加します

<?php
function my_hotjar_should_load() {
	// 投稿の編集権限を持つスタッフは記録しない
	if ( is_user_logged_in() && current_user_can( 'edit_posts' ) ) {
		return false;
	}
	if ( is_preview() || is_customize_preview() ) {
		return false;
	}
	// WooCommerce の決済・アカウント画面は除外
	if ( function_exists( 'is_checkout' ) && is_checkout() ) {
		return false;
	}
	if ( function_exists( 'is_account_page' ) && is_account_page() ) {
		return false;
	}
	return true;
}

function my_hotjar_enqueue() {
	if ( ! my_hotjar_should_load() ) {
		return;
	}
	$path = get_stylesheet_directory() . '/js/hotjar-tracking.js';
	if ( ! file_exists( $path ) ) {
		return;
	}
	// Hotjar は head 内での設置が案内されているため、in_footer は false
	wp_enqueue_script(
		'my-hotjar',
		get_stylesheet_directory_uri() . '/js/hotjar-tracking.js',
		array(),
		filemtime( $path ),
		false
	);
}
add_action( 'wp_enqueue_scripts', 'my_hotjar_enqueue' );

wp_enqueue_scripts はサイトの表側だけで実行されるため、wp-admin やログイン画面にはこのコードではトラッキングコードが出力されません。バージョンに filemtime() を使っているのは、コードを差し替えたときにキャッシュされた古いファイルが配信され続けるのを防ぐためです。

GTMとこの方法を同時に使うと、トラッキングコードが二重に読み込まれます。どちらか一方に統一してください。

録画とヒートマップのプライバシー対策

録画は訪問者の画面をそのまま再現するため、設定を誤ると個人情報が記録されます。次の順に対策します。

入力内容：Hotjarは、入力欄に打ち込まれた内容を既定で記録しない設計になっています。サイト設定でこの挙動を変更していないかを確認してください
画面に表示される個人情報：マイページの氏名や住所、注文内容など、入力欄以外に表示される情報は、要素に data-hj-suppress 属性を付けることで録画上で伏せられます。テーマやプラグインのテンプレートを編集できない部分は、ページ単位で読み込みを止める方が確実性が高い対策です
ページ単位の除外：前述の条件分岐で、チェックアウトやマイアカウントではトラッキングコード自体を読み込みません。会員情報の編集ページや問い合わせフォームの確認画面があれば、is_page() で同様に除外します

設定後は、自分でフォームに入力して録画を再生し、入力内容や氏名が映っていないかを確認してください。

同意取得とプライバシーポリシー

ヒートマップや録画にはCookieや端末の情報が使われるため、地域や業種によっては事前同意や告知が求められます。どのルールが自サイトに当てはまるかは自社で確認し、判断が難しい場合は専門家に相談してください。

事前同意が必要な運用では、Cookie同意バナーのプラグインやGTMの同意設定を使い、同意が得られるまでトラッキングコードを実行しない構成にします。同意の判定はブラウザ側で行うのがポイントです。PHPで同意Cookieを見て出力を切り替えると、ページキャッシュされたHTMLが別の訪問者にも配信され、判定が効かなくなります。プライバシーポリシーには、Hotjarを利用していること、記録する内容、利用目的を記載します。

表示速度への影響

Hotjarのスクリプトは非同期で読み込まれますが、録画のためにページの変化を監視する処理が動きます。導入前後でPageSpeed Insightsを計測し、スマートフォンでのINPや合計ブロック時間を比べてください。

キャッシュプラグインのJavaScript結合・遅延実行の機能がトラッキングコードを対象にすると、読み込みが遅れて最初のクリックが記録されない、あるいは読み込まれないことがあります。データが届かない場合は、hotjar-tracking.js を除外対象に加えてから再確認します。

導入確認とつまずきやすい点

設置したら、ログアウトした状態またはシークレットウィンドウでサイトを開き、Hotjarの管理画面にある導入確認の機能を実行します。あわせて次も確認します。

開発者ツールのネットワークタブで、Hotjar（またはContentsquare）のドメインへの通信が発生しているか
管理者でログインした状態と除外したページでは通信が発生しないか
録画一覧に自分の訪問が表示され、入力内容が伏せられているか

確認が通らない原因として多いのは、サイトIDが別サイトのものになっている、キャッシュを削除していない、広告ブロッカーが通信を止めている、の3つです。確認作業中は広告ブロッカーを無効にしたブラウザを使います。

ヒートマップを読むときの注意

ヒートマップは、記事の更新やテーマの変更でレイアウトが変わると、過去のデータと見た目がずれます。大きなデザイン変更の前後は、別の期間として見比べてください。また、パソコンとスマートフォンではクリックされる位置が大きく異なるため、デバイスごとに分けて確認します。

スライダーやアコーディオン、遅延読み込みの画像など、表示が動的に変わる部分は、ヒートマップ上の位置が実際の要素とずれることがあります。そうした箇所は録画を併用して、実際にどう操作されているかを確かめると判断を誤りにくくなります。

まとめ

Hotjarはトラッキングコード（サイトIDを含む）を <head> に設置し、管理画面の導入確認機能で受信を確かめる
子テーマから wp_enqueue_scripts で読み込むと、管理者・決済画面・個人情報を扱うページを除外できる。GTMとの二重設置に注意する
入力内容は既定で記録されない設計だが、画面上の個人情報は data-hj-suppress やページ単位の除外で伏せる
HotjarはContentsquareの製品群の一つとなっており、管理画面やコードの案内は最新の表示に従う
同意の判定はブラウザ側で行い、プライバシーポリシーへの記載と表示速度の確認も行う