2026年7月24日

2026年7月24日

WordPressにAmplitudeを導入する方法|Browser SDKの設置とイベント計測

WordPressにAmplitudeを入れるには、Amplitudeの管理画面に表示されるBrowser SDKのスニペットを、子テーマから wp_enqueue_script で読み込むのが扱いやすい方法です。この記事では、スニペットの設置、管理者や決済ページを計測から外す条件分岐、track と identify によるイベント・ユーザー属性の送信、同意取得と表示速度への配慮までを順に説明します。

Amplitudeでできることと、GA4との違い

Amplitudeはプロダクト分析ツールで、ページビューの集計よりも「どのボタンを押した人が、その後どこまで進んだか」といった行動の流れを追うのが得意です。ファネル(登録や購入までの段階ごとの離脱)、リテンション(再訪の割合)、ユーザーごとのイベント履歴を見たい場合に向いています。

WordPressサイトで使う場面としては、会員サイトの登録から初回投稿までの流れ、WooCommerceの商品閲覧からカート投入までの離脱、資料請求ボタンのクリック率などが典型です。アクセス数の把握が目的ならGA4で足ります。両方を併用する場合は、同じイベントを二重に設計しないよう、Amplitudeでは「行動の流れを見たいイベント」に絞ると管理が楽になります。

導入前に決めておくこと

コードを書く前に、次の3点を決めておくと後から作り直す手間が減ります。

  • データの保存先:AmplitudeにはUSとEUのデータセンターがあり、プロジェクト作成時に選びます。EUのプロジェクトではSDKの初期化時にサーバーゾーンの指定が必要になるため、管理画面の案内に従います
  • 計測しないページと人:管理者・編集者、wp-admin、WooCommerceのチェックアウトやマイアカウント、問い合わせフォームの送信完了ページなど、個人情報が表示されるページは外す方針にします
  • 同意の扱い:Cookieや端末識別子を使う計測は、地域や業種によって事前同意や告知が求められます。どのルールが自サイトに当てはまるかは自社で確認し、必要なら専門家に相談してください。プライバシーポリシーにはAmplitudeを利用していること、取得する情報、利用目的を記載します

方法1:ヘッダー挿入プラグインで設置する(手早く試す場合)

まず動作を確認したいだけなら、WPCodeのような「ヘッダーにコードを挿入できる」プラグインに、Amplitudeの管理画面で表示されたスニペットを貼り付ける方法があります。テーマを編集しないので、元に戻すのも簡単です。

ただし、この方法では「管理者がログインしているときは読み込まない」「チェックアウトでは読み込まない」といった条件分岐が難しく、運営者自身の閲覧がデータに混ざります。試験導入が終わったら、次の方法2に移すことをおすすめします。

方法2:子テーマから wp_enqueue_script で読み込む

本番運用では、子テーマにスニペットを置き、wp_enqueue_scripts フックで条件付きで読み込みます。作業前に子テーマの functions.php をバックアップしてください。親テーマを直接編集すると、テーマ更新時に消えてしまいます。

手順は次のとおりです。

  1. Amplitudeの管理画面でプロジェクトを開き、ブラウザ向けのSDK導入画面からスニペットをコピーします
  2. 子テーマに js/amplitude-snippet.js を作り、スニペットの中身を <script> タグを除いて貼り付けます
  3. functions.php に次のコードを追加します
<?php
/**
 * Amplitude を読み込むかどうかの判定
 */
function my_amplitude_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_amplitude_enqueue() {
	if ( ! my_amplitude_should_load() ) {
		return;
	}
	$path = get_stylesheet_directory() . '/js/amplitude-snippet.js';
	if ( ! file_exists( $path ) ) {
		return;
	}
	// 管理画面からコピーしたスニペット(初期化を含む)を head で読み込む
	wp_enqueue_script(
		'my-amplitude',
		get_stylesheet_directory_uri() . '/js/amplitude-snippet.js',
		array(),
		filemtime( $path ),
		false
	);
	// サイト独自のイベント送信はフッターで読み込む
	wp_enqueue_script(
		'my-amplitude-events',
		get_stylesheet_directory_uri() . '/js/amplitude-events.js',
		array( 'my-amplitude' ),
		'1.0.0',
		true
	);
}
add_action( 'wp_enqueue_scripts', 'my_amplitude_enqueue' );

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

スニペットが「外部の <script src> タグ」と「初期化のインラインコード」の2つに分かれている場合は、外部URLを wp_enqueue_script の第2引数に指定し、初期化部分を wp_add_inline_script( 'my-amplitude', '...', 'after' ) で追加する形にします。

track と identify でイベントとユーザー属性を送る

Browser SDKでは、amplitude.init() でAPIキーを指定して初期化したあと、amplitude.track() で任意のイベントを送ります。初期化オプションのうち、自動計測(ページビューやクリックなどを自動で記録する機能)の名称と既定値はSDKのバージョンで変わってきたため、Amplitudeの公式ドキュメントで現在の指定方法を確認してから設定してください(2026年10月現在)。

次の amplitude-events.js は、cta-button クラスを付けたリンクのクリックを記録する例です。

document.addEventListener( 'click', function ( e ) {
	var link = e.target.closest( 'a.cta-button' );
	if ( ! link || ! window.amplitude ) {
		return;
	}
	window.amplitude.track( 'CTA Clicked', {
		label: link.textContent.trim(),
		page_path: window.location.pathname
	} );
} );

イベント名は「対象+過去形の動作」のように命名規則を決め、表記ゆれ(cta_click と CTA Clicked の混在など)を作らないことが大切です。Amplitudeではイベント名が違えば別のイベントとして集計されます。

ユーザー属性は amplitude.Identify で値を組み立てて amplitude.identify() に渡し、ログインユーザーを識別する場合は amplitude.setUserId() を使います。このとき、メールアドレスや氏名をそのままユーザーIDにするのは避け、WordPressのユーザーIDをハッシュ化した値など、個人を直接特定しない値にします。会員種別のような属性も、利用目的をプライバシーポリシーで説明できる範囲にとどめてください。

同意を得てから計測を始める

事前同意が必要な運用では、同意前にSDKを読み込まない、または読み込んでも送信を止めておく必要があります。Cookie同意バナーのプラグインの多くは、カテゴリ(統計・マーケティングなど)ごとにスクリプトの実行を止める機能を持っているので、Amplitudeのスニペットを「統計」に分類するのが一般的です。

注意したいのはページキャッシュとの組み合わせです。PHPで同意状態を判定して出力を切り替えると、キャッシュされたHTMLが別の訪問者にも配信され、判定が効きません。同意の判定はブラウザ側(同意ツールのJavaScriptの仕組み)で行い、AmplitudeのSDK側にもオプトアウトの設定があるので、同意の撤回時に送信を止められるようにしておきます。

表示速度への影響を抑える

AmplitudeのSDKは非同期で読み込まれますが、JavaScriptの実行コストはゼロではありません。導入前後でPageSpeed Insightsを測り、特にスマートフォンでの合計ブロック時間やINPが悪化していないかを確認します。

キャッシュプラグインのJavaScript結合・圧縮・遅延実行の機能が、スニペットの読み込み順を崩して計測が止まる原因になることがあります。計測が届かない場合は、amplitude-snippet.js をそれらの対象から除外して確認してください。

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

設置後は、ログアウトした状態(またはシークレットウィンドウ)でサイトを開き、次の順に確認します。

  • ブラウザの開発者ツールのネットワークタブで、Amplitudeへの送信が発生しているか
  • Amplitudeの管理画面にあるイベントの受信確認画面(リアルタイムのイベント一覧)に、自分の操作が表示されるか
  • 管理者でログインした状態では送信が発生しないか

データが届かないときによくある原因は、EUプロジェクトなのにサーバーゾーンを指定していない、広告ブロッカーが送信を止めている、キャッシュプラグインの設定変更後にキャッシュを削除していない、の3つです。広告ブロッカーによる欠損はある程度避けられないため、数値は「傾向を見るもの」として扱うのが現実的です。

まとめ

  • AmplitudeはBrowser SDKのスニペットを子テーマに置き、wp_enqueue_scripts で条件付きで読み込むと管理しやすい
  • 管理者・プレビュー・チェックアウト・マイアカウントは計測から外し、wp-admin には出力しない
  • track で行動イベント、identify と setUserId でユーザー属性を送り、ユーザーIDには個人を直接特定しない値を使う
  • 自動計測やEUデータセンターの指定方法はSDKの版で変わるため、公式ドキュメントの最新の記述に合わせる
  • 同意の判定はブラウザ側で行い、プライバシーポリシーへの記載と表示速度の確認も忘れずに行う

お気軽にご相談ください

お見積りへ お問い合わせへ
▲