2026年5月21日
2026年5月21日
WordPressにLucky Orangeを導入する方法|ヒートマップ・録画の設定と注意点
WordPressにLucky Orangeを導入するには、Lucky Orangeの管理画面で発行されるトラッキングコードを、公式の案内に沿ったプラグインか、ヘッダーへのコード挿入でサイトに設置します。この記事では、設置方法の選び方、計測が始まったかの確認方法、セッション録画で個人情報を記録しないための設定、Cookie同意や表示速度への配慮までを、管理画面の操作を中心に説明します。
Lucky Orangeでできること
Lucky Orangeは、訪問者がページ上でどう動いたかを目で見て把握するための分析ツールです。WordPressサイトでよく使われるのは次の機能です。
- ヒートマップ:クリックされた位置やスクロールの到達率を色で表示し、読まれていない箇所を見つける
- セッション録画:訪問者の画面操作を再生し、どこで迷ったり離脱したりしたかを確認する
- フォーム分析:入力欄ごとの離脱を見て、問い合わせフォームの改善点を探す
- ライブチャットやアンケート:サイト上で訪問者に話しかけたり、短い質問を表示したりする
利用できる機能や記録できるセッション数はプランによって異なり、内容は変更されることがあります。契約前に公式サイトで現在のプラン内容を確認してください(2026年10月現在)。数の分析はGoogleアナリティクス、ページ内の行動の分析はLucky Orange、と併用するのが一般的です。
導入前に決めておくこと
Lucky Orangeは画面操作まで記録するため、一般的なアクセス解析よりも扱う情報が多くなります。コードを貼る前に、次の3点を整理しておくと後の手戻りが減ります。
- 計測しないページ:WooCommerceのチェックアウトやマイアカウント、会員情報の編集画面、ログイン画面などは、録画の対象から外す方針にします
- 計測しない人:管理者や編集者が記事を確認している操作まで記録されると、データが汚れます。ログイン中のスタッフは除外します
- 同意と告知:Cookieを使う計測や画面操作の記録は、地域や業種によって事前の同意が求められます。自サイトに当てはまるルールは自社で確認し、必要に応じて専門家に相談してください。プライバシーポリシーには、Lucky Orangeを利用していること、画面操作を記録すること、利用目的を追記します
トラッキングコードを取得する
Lucky Orangeにアカウントを作成し、計測したいサイトのドメインを登録すると、そのサイト専用のトラッキングコードが表示されます。コードにはサイトを識別するIDが含まれているため、ほかのサイト用のコードや、ブログ記事に掲載されている例をそのまま使うことはできません。
コードは管理画面の設定(インストール関連のメニュー)からいつでも再表示できます。メニュー名は変わることがあるため、見つからない場合は公式ヘルプで「WordPress」や「install」を検索すると、現在の手順にたどり着けます。
方法1:公式のWordPress用プラグインを使う
Lucky Orangeは公式ヘルプでWordPress向けの導入手順を案内しており、プラグインを使って設置する方法が用意されています。プラグインを使う場合は、WordPressの管理画面で「プラグイン」→「新規プラグインを追加」を開き、「Lucky Orange」で検索します。名前の似た第三者製のプラグインもあり得るため、提供元(作者)がLucky Orangeになっているか、最終更新日が古すぎないかを確認してからインストールしてください。
有効化した後は、プラグインの設定画面でLucky Orangeのアカウントと連携するか、サイトIDを入力する形式になっています。テーマを変更してもコードが消えない点が、プラグインを使う利点です。
方法2:ヘッダーにコードを挿入する
プラグインを増やしたくない場合や、計測するページを細かく制御したい場合は、トラッキングコードを <head> 内に出力します。ヘッダーにコードを挿入する汎用プラグインに貼り付ける方法でも動きますが、その方法では管理者の閲覧やチェックアウト画面まで記録されます。条件分岐を入れたい場合は、子テーマの functions.php から出力します。作業前に functions.php のバックアップを取り、子テーマが有効になっていることを確認してください。次のコードは子テーマの functions.php の末尾に追加します(ファイル冒頭の <?php は重ねて書きません)。
function my_luckyorange_tracking_code() {
// 投稿の編集権限を持つスタッフの閲覧は記録しない
if ( is_user_logged_in() && current_user_can( 'edit_posts' ) ) {
return;
}
// プレビュー画面は記録しない
if ( is_preview() || is_customize_preview() ) {
return;
}
// WooCommerce の決済・アカウント画面は記録しない
if ( function_exists( 'is_checkout' ) && is_checkout() ) {
return;
}
if ( function_exists( 'is_account_page' ) && is_account_page() ) {
return;
}
?>
<!-- ここに Lucky Orange の管理画面からコピーしたトラッキングコードを貼り付ける -->
<?php
}
add_action( 'wp_head', 'my_luckyorange_tracking_code' );
wp_head はテーマの header.php などで呼ばれるフックで、フロント側のページの <head> 内に出力されます。コメント行をトラッキングコードに置き換えて保存してください。親テーマの header.php に直接書き込む方法は、テーマの更新で消えるため避けます。
ログイン中のスタッフを除外する条件は、ログインユーザーをページキャッシュの対象外にしている一般的な構成が前提です。キャッシュプラグインの設定も確認してください。
方法3:Googleタグマネージャーで配信する
すでにGoogleタグマネージャー(GTM)を使っている場合は、GTMの「カスタムHTML」タグにトラッキングコードを貼り、トリガーを「すべてのページ」にして公開する方法もあります。WordPress側を触らずに設置や停止ができ、同意管理ツールと連携して「同意が得られた後だけ配信する」設定もGTM上で組めます。
一方で、GTMとプラグインの両方に設置すると、二重に読み込まれて同じ訪問が重複して記録されます。設置場所はどれか1つに絞ってください。
計測が始まったかを確認する
設置したら、ログアウトした状態かブラウザのシークレットウィンドウでサイトを開き、次の順で確認します。
- ページのソースを表示し、
<head>内にトラッキングコードが出力されているかを確かめます - ブラウザの開発者ツール(F12キー)のネットワークタブを開き、フィルタに「luckyorange」と入力して再読み込みし、Lucky Orangeのドメインへの通信が発生しているかを見ます
- Lucky Orangeの管理画面で、現在の訪問者の表示や録画の一覧に自分の訪問が出てくるかを確認します。管理画面には設置状況を確認する機能も用意されています
録画やヒートマップは反映までに時間がかかることがあります。数分待っても出ない場合は、後述の「つまずきやすい点」を確認します。
セッション録画で個人情報を記録しない設定
セッション録画を使う場合に最も注意したいのが、入力内容の記録です。Lucky Orangeはパスワード欄やクレジットカード番号などの機密性の高い入力欄を記録しない仕組みを備えていますが、どこまでが既定で伏せられるかは設定や入力欄の作りによって変わります。
- 入力欄のマスキング:管理画面のプライバシー関連の設定で、入力欄の内容を記録しない設定が有効になっているかを確認します。問い合わせフォームの氏名・メールアドレス・電話番号欄も伏せる対象にするのが無難です
- 要素単位のマスキング:会員名や住所など、入力欄ではなく画面に表示される個人情報は、公式ヘルプで案内されている属性やクラスを要素に付けて記録対象から外します
- ページ単位の除外:前述の条件分岐で、チェックアウトやマイアカウントではコード自体を出力しない方法が最も影響範囲を小さくできます
- 自分の訪問の除外:管理画面で自社のIPアドレスを除外しておくと、社内からの確認作業が録画に混ざりません
設定後は、テスト用の値をフォームに入力して送信し、その録画を再生して、入力した文字が伏せ字になっているかを目で確認してください。「設定したつもり」で記録されていた、というケースはこの確認で防げます。
Cookie同意と表示速度への配慮
事前同意が必要な地域の訪問者がいる場合は、Cookie同意バナーのプラグインや同意管理ツールで、Lucky Orangeのコードを「統計」や「マーケティング」などのカテゴリに分類し、同意が得られるまで実行しない設定にします。PHPで同意Cookieを判定して出力を切り替える方法は、ページキャッシュがあると同意していない訪問者にもキャッシュされたHTMLが配信されるため、ブラウザ側で判定する仕組みを使ってください。
表示速度については、トラッキングコードは非同期で読み込まれる形式ですが、録画のためにページの変化を監視する処理が加わります。導入前後でPageSpeed Insightsを計測し、特にスマートフォンのINPや合計ブロック時間に大きな悪化がないかを比べておくと安心です。
つまずきやすい点
- キャッシュプラグインのJavaScript最適化:JavaScriptの結合や遅延実行の対象にトラッキングコードが含まれると、計測されないことがあります。最適化の除外リストにLucky Orangeのドメインを追加して試します
- セキュリティヘッダー:Content-Security-Policyを設定しているサイトでは、Lucky Orangeのドメインからの読み込みと通信を許可しないとブロックされます。開発者ツールのコンソールにCSP違反のエラーが出ていないかを確認します
- 広告ブロッカー:訪問者側の拡張機能で読み込みが止められることがあり、すべての訪問は記録されません。数値は傾向をつかむためのものとして扱います
- ステージング環境:本番と同じコードをステージング環境に置くと、テスト中の操作が本番のデータに混ざります。ステージングではコードを出力しないようにします
まとめ
- Lucky Orangeは、管理画面で発行されるサイト専用のトラッキングコードを設置して使う
- 設置方法は公式の案内に沿ったプラグイン、子テーマの
wp_head、GTMのいずれか1つに絞り、二重設置を避ける - 子テーマから出力すると、管理者・プレビュー・決済画面を計測対象から外せる
- 録画は入力欄と個人情報の表示箇所をマスクし、テスト送信した録画を再生して伏せ字になっているかを確かめる
- Cookie同意はブラウザ側で判定し、プライバシーポリシーへの追記と表示速度の確認も行う