2026年5月25日

WordPressにMixpanelを導入してイベント分析する方法

SEO・パフォーマンス

WordPress に Mixpanel を導入するには、Mixpanel 公式の JavaScript SDK をテーマや自作プラグインから読み込み、プロジェクトトークンで mixpanel.init() を呼んだうえで、クリックやフォーム送信を mixpanel.track()、ログインを mixpanel.identify() で送ります。この記事では、トークンを管理画面の設定に置く方法、管理者のアクセスを除外する方法、EU のデータ所在地の扱い、同意を得てから計測を始める組み込み方までを、コード付きで説明します。

Mixpanelで何が分かるか

Mixpanel は、ページビューよりも「ユーザーが何をしたか」というイベントを中心に分析するツールです。「料金ページを見た人のうち何割が問い合わせフォームを送信したか」（ファネル）、「初回登録の翌週にも戻ってきたか」（リテンション）といった分析を、イベントとそのプロパティの組み合わせで行います。

そのため、導入で一番大事なのはタグの貼り方よりも、どのイベントをどんな名前で送るかです。実装の前に、たとえば次のような一覧を作っておくと、後から集計しやすくなります。

CTA Clicked（プロパティ: label、page）: 主要なボタンのクリック
Form Submitted（プロパティ: form_id）: 問い合わせや資料請求の送信完了
Signed Up: 会員登録の完了

イベント名は英語の「対象＋過去形」のように書き方をそろえ、同じ行動に複数の名前が付かないようにします。

プロジェクトトークンを設定に保存する

Mixpanel でプロジェクトを作ると、プロジェクトの設定画面でプロジェクトトークンを確認できます。このトークンはブラウザに配信される前提の値で、秘密情報ではありません。それでもテーマのコードに直接書くと、ステージング用と本番用のプロジェクトを分けるときや、テーマを変えたときに困るため、WordPress の設定として保存しておきます。

ここでは、「設定」→「一般」の画面に入力欄を追加する例を紹介します。

add_action( 'admin_init', function () {
	register_setting( 'general', 'my_mixpanel_token', array(
		'type'              => 'string',
		'sanitize_callback' => function ( $value ) {
			// トークンは英数字のみ。それ以外の文字は取り除く
			return preg_replace( '/[^A-Za-z0-9]/', '', (string) $value );
		},
		'default'           => '',
	) );
	register_setting( 'general', 'my_mixpanel_eu', array(
		'type'              => 'boolean',
		'sanitize_callback' => 'rest_sanitize_boolean',
		'default'           => false,
	) );

	add_settings_field( 'my_mixpanel_token', 'Mixpanel トークン', function () {
		printf(
			'<input type="text" name="my_mixpanel_token" value="%s" class="regular-text">',
			esc_attr( get_option( 'my_mixpanel_token', '' ) )
		);
	}, 'general' );

	add_settings_field( 'my_mixpanel_eu', 'Mixpanel EU データ所在地', function () {
		printf(
			'<label><input type="checkbox" name="my_mixpanel_eu" value="1" %s> EU のデータ所在地で作成したプロジェクト</label>',
			checked( get_option( 'my_mixpanel_eu' ), true, false )
		);
	}, 'general' );
} );

「一般」の設定画面は manage_options 権限を持つユーザーだけが保存でき、nonce の検証も WordPress 側で行われます。保存値は sanitize_callback で英数字だけに絞っているので、想定外の文字列が HTML に出力されることもありません。

公式SDKを読み込む

SDK の読み込み方法には、Mixpanel のドキュメントに掲載されている HTML スニペットを使う方法と、npm パッケージ（mixpanel-browser）をビルドに組み込む方法があります。ビルド環境のない一般的なテーマでは、スニペットを使うのが手軽です。スニペットの内容は更新されることがあるため、Mixpanel の公式ドキュメントから最新のものをコピーしてください（2026年10月現在）。

コピーしたスニペットは <script> タグを除いて assets/js/mixpanel-snippet.js に保存し、同意を得てから実行できるよう関数で包みます。スニペットは実行した時点で SDK 本体の読み込みを始めるため、包まずに置くと同意前に Mixpanel への通信が発生します。

// assets/js/mixpanel-snippet.js
window.myLoadMixpanel = function () {
	if ( window.myMixpanelLoaded ) {
		return;
	}
	window.myMixpanelLoaded = true;

	// ここに Mixpanel のドキュメントからコピーしたスニペット本体を貼り付ける
};

PHP 側では、管理者や編集者、本番以外の環境を除外したうえで、スニペットと初期化用のスクリプトを読み込みます。

add_action( 'wp_enqueue_scripts', function () {
	$token = get_option( 'my_mixpanel_token', '' );

	// トークン未設定、本番以外、投稿を編集できるユーザー（管理者・編集者など）は計測しない
	if ( '' === $token || 'production' !== wp_get_environment_type() || current_user_can( 'edit_posts' ) ) {
		return;
	}

	wp_enqueue_script( 'my-mixpanel-snippet', get_theme_file_uri( 'assets/js/mixpanel-snippet.js' ), array(), '1.0.0', false );
	wp_enqueue_script( 'my-mixpanel-events', get_theme_file_uri( 'assets/js/mixpanel-events.js' ), array( 'my-mixpanel-snippet' ), '1.0.0', true );

	$config = array(
		'token'   => $token,
		'apiHost' => get_option( 'my_mixpanel_eu' ) ? 'https://api-eu.mixpanel.com' : '',
		'userId'  => is_user_logged_in() ? 'wp_' . get_current_user_id() : null,
	);
	wp_add_inline_script( 'my-mixpanel-events', 'window.myMixpanelConfig = ' . wp_json_encode( $config ) . ';', 'before' );
} );

管理者を除外するのは、記事の確認や設定作業のアクセスが混ざると、ページビューやファネルの数字がずれるためです。current_user_can( 'edit_posts' ) にしておくと、投稿者以上の権限を持つ運営側のユーザーをまとめて除外できます。会員サイトで一般会員は計測したい場合は、購読者権限のユーザーはこの条件に当てはまらないので、そのまま計測対象になります。

ログイン中のユーザーIDを HTML に出力するため、ログイン中のページがページキャッシュに保存されないことも確認しておきます。多くのキャッシュプラグインはログインユーザーを対象外にしています。

初期化とイベント送信

mixpanel-events.js では、同意を得たあとに SDK を読み込み、mixpanel.init() を呼び、各種のイベントを登録します。

// assets/js/mixpanel-events.js
( function () {
	var cfg = window.myMixpanelConfig || {};

	function start() {
		window.myLoadMixpanel();
		var mp = window.mixpanel;
		if ( ! mp || ! cfg.token ) {
			return;
		}

		var options = {
			track_pageview: true,       // ページビューを自動で送る
			persistence: 'localStorage'
		};
		if ( cfg.apiHost ) {
			options.api_host = cfg.apiHost; // EU のデータ所在地のプロジェクト
		}
		mp.init( cfg.token, options );

		// ログイン中は identify、ログアウト後は匿名の状態に戻す
		if ( cfg.userId ) {
			mp.identify( cfg.userId );
			localStorage.setItem( 'myMpIdentified', '1' );
		} else if ( localStorage.getItem( 'myMpIdentified' ) ) {
			mp.reset();
			localStorage.removeItem( 'myMpIdentified' );
		}

		// data-mp-event 属性の付いた要素のクリック
		document.addEventListener( 'click', function ( e ) {
			var el = e.target.closest( '[data-mp-event]' );
			if ( el ) {
				mp.track( el.dataset.mpEvent, {
					label: el.dataset.mpLabel || '',
					page: window.location.pathname
				} );
			}
		} );

		// Contact Form 7 の送信完了（入力内容は送らない）
		document.addEventListener( 'wpcf7mailsent', function ( e ) {
			mp.track( 'Form Submitted', { form_id: String( e.detail.contactFormId ) } );
		} );
	}

	// 同意管理の仕組みから呼び出す。同意が不要な用途なら start() を直接呼ぶ
	window.myMixpanelStart = start;
} )();

計測したいボタンには、HTML で属性を付けます。ブロックエディターのボタンブロックでは、「高度な設定」で付けられるのは HTML アンカーと追加 CSS クラスなどに限られ、任意の data- 属性は追加できません。カスタム HTML ブロックやテーマのテンプレートで付けるか、追加 CSS クラス（例: mp-cta）を付けて JavaScript 側でクラス名から拾う形にします。

<a href="/contact/" class="btn" data-mp-event="CTA Clicked" data-mp-label="pricing-contact">お問い合わせ</a>

identify と reset の役割

identify() を呼ぶと、それまで匿名IDで記録されていた行動と、ログイン後の行動が同じユーザーとしてつながります。ユーザーIDには、メールアドレスではなく wp_123 のようなサイト内のIDを使います。メールアドレスは変更されることがあり、識別子として不安定なうえ、個人情報を余分に渡すことにもなります。

ログアウトした後に reset() を呼ばないと、同じブラウザを別の人が使ったときに前のユーザーの行動として記録されます。上のコードでは、ログイン中に識別した記録を localStorage に残し、ログアウト後の最初のページで reset() を呼んでいます。

EUのデータ所在地を使う場合

Mixpanel では、プロジェクトの作成時にデータを保存する地域を選べます。EU を選んだプロジェクトでは、SDK の送信先（api_host）を EU 用のエンドポイントに合わせる必要があり、合っていないとイベントが届きません。上のコードでは設定画面のチェックボックスで切り替えています。エンドポイントの URL は変わる可能性があるため、導入時に Mixpanel のドキュメントで確認してください。どの地域を選ぶべきかは、扱うデータや社内の方針、適用される規則によって判断します。

同意とプライバシー

計測用の Cookie や localStorage の利用、行動データの外部送信には、地域や用途によって事前の同意が求められます。上のコードでは window.myMixpanelStart() を呼ぶまで SDK を読み込まないので、同意管理ツールの「計測に同意した」ときの処理や、同意済みの訪問者のページ表示時にこの関数を呼びます。Mixpanel の SDK には opt_out_tracking() や opt_in_tracking() といった計測の停止・再開の関数もあるので、同意を取り消せるようにする場合に使えます。

あわせて、次の点を確認しておきます。

プライバシーポリシーに、Mixpanel を利用していること、送る情報の種類、利用目的を記載する
イベントのプロパティに、メールアドレス・氏名・電話番号、フォームの入力値を入れない。どうしても必要な場合は、用途を説明したうえで最小限にする
URL のクエリにメールアドレスなどが含まれるページがあると、ページビューの記録に残ることがある。そうした URL を作らないようにする

どの規則が適用されるかはサイトの対象地域や事業内容によって変わるため、判断に迷う場合は専門家に相談してください。

動作確認とつまずきやすい点

mixpanel.init() のオプションに debug: true を加えると、送信内容がブラウザのコンソールに表示されます。Mixpanel の管理画面にも、届いたイベントをほぼリアルタイムで確認できる画面があるので、ログアウト状態のブラウザ（シークレットウィンドウなど）で確認します。管理者でログインしたまま確認すると、除外の条件によって何も送られないので注意してください。

イベントが届かないときは、次の順に確認します。

ページのソースに myMixpanelConfig が出力されているか（トークン未設定やログイン中の除外で読み込まれていない可能性）
同意の処理から myMixpanelStart() が呼ばれているか
EU のプロジェクトなのに api_host が設定されていない、またはその逆になっていないか
広告ブロッカーが Mixpanel への通信を止めていないか。全体の数値は、ブロックされる分だけ実際より少なく出る

最適化プラグインで JavaScript の結合や遅延読み込みを有効にしている場合は、スニペットと初期化スクリプトの順序が入れ替わって動かないことがあります。その場合は、2つのファイルを最適化の対象から外してください。

まとめ

Mixpanel はイベント中心の分析ツール。導入前にイベント名とプロパティの一覧を決める
トークンは公開前提の値だが、register_setting で設定に保存し、テーマのコードに直接書かない
公式スニペットは関数で包み、同意を得てから読み込んで mixpanel.init() を呼ぶ
クリックやフォーム送信は track()、ログインは identify()、ログアウト後は reset() で扱う
運営側のユーザーと本番以外の環境は計測から除外し、EU のプロジェクトは api_host を合わせる
個人情報をプロパティに入れず、プライバシーポリシーで利用を説明する