2026年5月26日

WordPressでA/Bテストを実装する方法｜キャッシュ・計測・SEOでつまずかない手順

カスタマイズ

WordPressでA/Bテストを行う方法は、専用プラグイン、外部のテストツール、自前実装の3つに分かれます。どれを選んでも、つまずきやすいのは「ページキャッシュで振り分けが効かない」「GA4で結果を比べられない」「検証が早すぎて偶然の差を採用してしまう」の3点です。この記事では、方法の選び方から、キャッシュと共存できる自前実装、GA4での計測、結果の判断までを順に説明します。

方法の選び方

Google Optimize は2023年9月に提供を終了しており、現在は次のいずれかを選ぶことになります。

WordPress用のA/Bテストプラグイン：Nelio A/B Testing のように、管理画面から投稿や固定ページのバリエーションを作れるものがあります。WordPressの編集画面に慣れた担当者だけで回せるのが利点です。無料版と有料版で機能や計測上限が異なるため、導入前に配布ページで確認してください。
外部のテストツール：VWO、Optimizely、AB Tasty などの有料サービスです。ビジュアルエディタや統計処理が揃っており、複数サイトや大規模な検証に向きます。費用はプランによって大きく変わります（2026年10月現在）。
自前実装：ボタンの文言や配置など、1か所の違いを比べるだけなら、数十行のコードとGA4で十分に検証できます。費用がかからず、仕組みを理解したうえで運用できます。

テストの頻度が低く、比べたいのがCTAや見出しの違い程度なら自前実装から始め、検証の数や関係者が増えてきたらツールを検討する、という順番が現実的です。以下では自前実装の手順を説明します。

自前実装の設計：キャッシュと共存させる

PHPで訪問者をA/Bに振り分けて出し分ける方法は単純ですが、ページキャッシュ（キャッシュ系プラグインやサーバーのキャッシュ機能）を使っているサイトでは、最初に表示されたバリエーションがキャッシュされ、全員に同じものが配信されてしまいます。

そこで、HTMLには両方のバリエーションを含めておき、表示の切り替えはブラウザ側で行う設計にします。キャッシュされるHTMLは全員共通で、振り分けはCookieに基づいてJavaScriptが行うため、キャッシュの設定を変える必要がありません。

もう1つの注意点は「ちらつき」です。ページが表示されてからJavaScriptで差し替えると、一瞬だけ元の内容が見えます。これを防ぐため、振り分けのスクリプトは <head> 内で同期的に実行し、<html> 要素にクラスを付けて、CSSで非表示にする方式をとります。本文が描画される前にクラスが付くので、ちらつきが起きません。

手順1：振り分けスクリプトを head に出力する

子テーマの functions.php か、自作の小さなプラグインに次のコードを追加します。wp_print_inline_script_tag() は WordPress 5.7 で追加された関数で、インラインスクリプトを安全に出力できます。

<?php
// A/Bテストの振り分け（CTAボタンのテスト）
add_action( 'wp_head', 'lsc_ab_print_assign_script', 1 );
function lsc_ab_print_assign_script() {
	if ( is_admin() ) {
		return;
	}
	$test_name = 'cta';           // テスト名（GA4に送る値）
	$cookie    = 'lsc_ab_cta';    // 振り分け結果を保存するCookie名
	$days      = 30;              // Cookieの有効日数

	$js = sprintf(
		'(function(){var t=%1$s,c=%2$s,m=document.cookie.match(new RegExp("(?:^|; )"+c+"=([AB])")),v=m?m[1]:(Math.random()<0.5?"A":"B");if(!m){document.cookie=c+"="+v+"; path=/; max-age="+(%3$d*86400)+"; SameSite=Lax";}document.documentElement.classList.add("ab-"+t+"-"+v);window.dataLayer=window.dataLayer||[];window.dataLayer.push({event:"ab_assign",ab_test:t,ab_variant:v});})();',
		wp_json_encode( $test_name ),
		wp_json_encode( $cookie ),
		absint( $days )
	);
	wp_print_inline_script_tag( $js );
}

ここでしていることは次のとおりです。

Cookieに振り分け結果があればそれを使い、無ければ50%ずつの確率でAかBを決めて30日間保存します。再訪問しても同じバリエーションが表示されるので、比較が乱れません。
<html> に ab-cta-A または ab-cta-B のクラスを付けます。
GA4に送るため、ab_assign というイベントを dataLayer に追加します。

PHPの値をJavaScriptに埋め込む部分は wp_json_encode() でエンコードしています。テスト名を後から書き換えても、引用符などで文字列が壊れることはありません。

手順2：ブロックエディタで2つのバリエーションを作る

テストしたいページで、Aのボタン（またはグループ）とBのボタンを並べて配置します。それぞれのブロックを選択し、右側の設定パネルの「高度な設定」にある「追加 CSS クラス」に、Aには ab-cta-a、Bには ab-cta-b を入力します。

次に、表示を切り替えるCSSを追加します。子テーマの style.css か、サイトエディタの「追加CSS」に記述します。

/* 初期状態ではAだけを表示（JavaScriptが無効な環境もAになる） */
.ab-cta-b { display: none; }

/* Bに振り分けられた訪問者はBだけを表示 */
.ab-cta-B .ab-cta-a { display: none; }
.ab-cta-B .ab-cta-b { display: block; }

<html> に付くクラスは大文字の ab-cta-B、ブロックに付けるクラスは小文字の ab-cta-b と区別している点に注意してください。ボタンを横並びのレイアウトで使っている場合は、display: block を元のレイアウトに合わせた値（flex など）に変えます。

確認方法は、ブラウザの開発者ツールでCookie lsc_ab_cta を削除してページを何度か再読み込みし、AとBが入れ替わって表示されることを見ます。プライベートウィンドウを使うと手早く確認できます。

手順3：GA4で計測する

ここでは Google タグマネージャー（GTM）経由でGA4を設定している前提で説明します。

GTMで、データレイヤー変数 ab_test と ab_variant を作成します。
カスタムイベント ab_assign をトリガーにした「GA4 イベント」タグを作り、イベント名を ab_assign、パラメータに ab_test と ab_variant を設定します。
GA4の管理画面の「カスタム定義」で、ab_variant をイベントスコープのカスタムディメンションとして登録します。登録しないとレポートで使えません。
成果にあたるイベント（問い合わせ完了、資料請求など）をキーイベントとして設定しておきます。

分析は、GA4の「探索」で「ab_assign イベントの ab_variant が A のユーザー」と「B のユーザー」のセグメントを作り、それぞれのキーイベント発生ユーザー数を比べます。カスタムディメンションは登録した時点以降のデータにしか反映されないため、計測を始める前に登録を済ませてください。

あわせて、AとBの振り分け人数がほぼ半々になっているかも確認します。大きく偏っている場合は、Cookieが保存されない環境やスクリプトの読み込み順に問題がある可能性があり、そのまま結果を比べても信頼できません。

手順4：結果を判断する

A/Bテストで最も多い失敗は、数日で差が出たように見えて終了してしまうことです。少ないデータでは偶然の差が大きく出ます。

事前に必要な人数を見積もる：たとえば現在のコンバージョン率が3%で、それを3.6%（相対20%改善）に上げる差を、有意水準5%・検出力80%で検出したい場合、1バリエーションあたりおよそ1万4千人の訪問者が必要です。オンラインのサンプルサイズ計算ツールで、自サイトの数値を入れて確認できます。
期間は週単位で取る：曜日によって訪問者の行動が違うため、最低でも1〜2週間など、曜日がひととおり含まれる期間にします。
途中で何度も結果を見て止めない：差が出た瞬間に止めると、偶然の差を採用する確率が上がります。決めた人数か期間に達してから判断します。
主な指標を1つに決める：クリック率、問い合わせ数など、事前に「何で勝ち負けを決めるか」を1つに絞ります。

テストが終わったら、採用したバリエーションだけを残し、手順1のコードとCSS、使わない方のブロックを削除します。テスト用のコードを残したままにすると、次のテストと干渉します。

SEOとプライバシーの注意点

Googleは、検索結果への影響を抑えるためのテストの指針を公開しています。要点は、Googlebotだけに別の内容を見せる（クローキング）ことをしない、URLを分けてテストする場合は元のURLへの rel="canonical" を設定しリダイレクトは一時的な302を使う、テストは必要な期間だけにする、の3つです。この記事の方法は同じURLで両方の内容をHTMLに含めているため、URLを分ける方式より扱いやすくなっています。

Cookieを使った振り分けとGA4への送信は、訪問者の情報を扱います。プライバシーポリシーに計測の目的と使用ツールを記載し、同意管理（CMP）を導入しているサイトでは、同意の状態に応じて計測を制御してください。日本では電気通信事業法の外部送信規律により、外部ツールへの情報送信について公表などが求められる場合があります。

まとめ

Google Optimize の終了後は、プラグイン、外部ツール、自前実装から選ぶ。1か所の違いを比べるだけなら自前実装とGA4で十分に検証できる
ページキャッシュがあるサイトでは、HTMLに両方のバリエーションを含め、head 内のスクリプトとCSSで切り替えると、キャッシュと共存でき、ちらつきも防げる
GA4ではバリエーションをカスタムディメンションとして登録し、探索のセグメントで比べる。振り分けがほぼ半々かも確認する
必要な人数と期間を事前に決め、途中で止めずに判断する
クローキングをしない、プライバシーポリシーに記載するなど、SEOとプライバシーの配慮を忘れない