WordPressにVWOやOptimizely、AB Tastyなどの外部A/Bテストプラットフォームを連携するときは、「計測タグを<head>の早い位置に1か所だけ置く」「キャッシュと遅延読み込みの対象から外す」「同意管理とGA4への結果送信をそろえる」の3点を押さえれば、大半のつまずきは避けられます。この記事では、タグの設置方法、ちらつき（フリッカー）対策、キャッシュプラグインとの相性、結果をGA4で確認するまでの流れを順に説明します。
なお、WordPress内でプラグインを使ってA/Bテストを組む方法とは別の話題です。ここでは「すでに契約している、または検討中の外部サービスとWordPressをどうつなぐか」に絞ります。
外部A/Bテストプラットフォームの仕組みを先に理解する
外部のA/Bテストツールの多くは、ページに読み込ませたJavaScriptが訪問者をパターンA・Bに振り分け、表示中のページのDOMを書き換えて違いを作ります。これを「クライアントサイド型」と呼びます。WordPress側でやることは基本的に「タグを正しく読み込ませること」だけで、テスト内容そのものはツールの管理画面で作ります。
一方、サーバー側でどちらのHTMLを返すかを決める「サーバーサイド型」もあります。こちらはPHPでパターンを判定し、SDKやAPIを使って結果を送ります。表示のちらつきが起きない反面、ページキャッシュとぶつかりやすく、実装の手間も増えます。
主な外部サービスとしては、VWO、Optimizely（Web Experimentation）、AB Tasty、Convert、Kameleoonなどがあります。どれもプランや機能の区分、タグの形式が変わることがあるため、設置前に各サービスの最新のインストール手順を確認してください（2026年10月現在）。かつて無料で広く使われていたGoogle Optimizeは2023年9月に提供を終了しているので、古い解説記事のタグをそのまま貼らないよう注意が必要です。
タグをWordPressに設置する3つの方法
方法1：専用プラグインやタグ管理プラグインを使う
サービスによっては公式のWordPressプラグインが用意されており、アカウントIDを入力するだけでタグが出力されます。また、ヘッダーに任意のコードを挿入できる汎用プラグインを使う方法もあります。手軽ですが、プラグインごとに出力位置や読み込み順が違うため、後述の「<head>の早い位置」に出ているかを確認してください。
方法2：Googleタグマネージャー経由で配信する
GTMで一元管理している場合は、GTMからA/Bテストのタグを配信する方法もあります。ただし、GTMのコンテナ自体が非同期で読み込まれるため、その後にテストタグが動くとちらつきが目立ちやすくなります。サービス側がGTM経由の設置を推奨しているか、ちらつき対策のスニペットをどう扱うかを確認してから選んでください。
方法3：子テーマまたはmu-pluginで直接出力する
もっとも挙動を制御しやすいのは、コードでwp_headの早い位置に出力する方法です。テーマ更新で消えないよう、子テーマのfunctions.phpか、wp-content/mu-plugins/にファイルを置いて実装します。作業前にはサイトのバックアップを取り、ステージング環境で表示を確認してから本番に反映してください。
<?php
/**
* Plugin Name: AB Test Platform Loader
* Description: 外部A/Bテストツールのタグを head の先頭付近に出力する
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// アカウントIDは管理画面で確認した値に置き換える(ダミー値)
define( 'MYSITE_ABTEST_ACCOUNT_ID', 'your-account-id' );
add_action( 'wp_head', function () {
// 管理画面・プレビュー・REST などでは出さない
if ( is_admin() || is_preview() || is_feed() ) {
return;
}
// 例: ツールが提供するスクリプトURLの形式に合わせて変更する
$src = sprintf(
'https://cdn.example-abtest.com/%s/loader.js',
rawurlencode( MYSITE_ABTEST_ACCOUNT_ID )
);
wp_print_script_tag(
array(
'id' => 'abtest-loader',
'src' => esc_url( $src ),
)
);
}, 1 ); // 優先度 1 で head のなるべく早い位置へwp_print_script_tag()はWordPress 5.7で追加された関数で、属性を配列で渡すと<script>タグを出力します。サービスが「同期読み込み」を求めている場合はasyncやdeferを付けず、非同期での設置を推奨している場合だけ付けます。上のURLは説明用のダミーなので、実際には各サービスが発行するスニペットの形式に合わせてください。
ちらつき（フリッカー）を抑える
クライアントサイド型のテストでは、元のページが一瞬表示されたあとにパターンBへ書き換わる「ちらつき」が起きることがあります。見た目が悪いだけでなく、訪問者が元のデザインを見てしまうため、テスト結果そのものが歪みます。
主な対策は次のとおりです。
- タグを
<head>内のできるだけ前に置き、CSSや他のスクリプトより先に読み込ませる - サービスが提供する「アンチフリッカー」スニペット（一定時間ページを非表示にし、テスト適用後に表示する仕組み）を使う
- アンチフリッカーのタイムアウトは短めにし、ツールの読み込みに失敗しても真っ白なページが続かないようにする
アンチフリッカーはページ全体を一時的に隠すため、LCP（最大コンテンツの描画）が遅くなる副作用があります。全ページに常時入れるのではなく、テストを実施しているページに限定するのが無難です。たとえば上のコードにif ( ! is_page( 'pricing' ) ) { return; }のような条件を加えれば、特定ページだけに出力できます。
キャッシュ・最適化プラグインとの相性を確認する
WordPress側でもっとも多いトラブルは、高速化プラグインがテストタグを書き換えてしまうケースです。
JavaScriptの遅延実行・結合：WP RocketやLiteSpeed Cacheなどには、JavaScriptの実行をユーザー操作まで遅らせる機能や、複数のファイルを結合する機能があります。テストタグがこの対象になると、パターンの適用が大きく遅れたり、まったく動かなくなったりします。各プラグインの除外設定に、テストツールのドメインやスクリプトIDを追加してください。設定項目の名前はバージョンによって変わるため、「遅延」「除外」に当たる項目を探すとよいでしょう。
ページキャッシュ：クライアントサイド型なら、キャッシュされたHTMLにタグが含まれていれば問題ありません。タグを追加・変更した直後は、キャッシュを削除してから確認します。サーバーサイド型でPHPがパターンを判定している場合は、キャッシュが最初の訪問者のパターンを全員に配ってしまいます。この場合はパターンを示すCookieでキャッシュを分ける、該当ページをキャッシュ対象外にするなど、キャッシュ側の設計が必要です。
CDN：Cloudflareなどで JavaScript を自動で書き換える機能を有効にしている場合も、同様に除外の可否を確認します。
同意管理（Cookieバナー）との関係
A/Bテストツールは訪問者を識別するためにCookieやローカルストレージを使います。同意管理ツール（CMP）を導入しているサイトでは、テストタグを同意前に動かすのか、同意後に動かすのかを方針として決め、プライバシーポリシーにも利用目的と外部送信先を記載します。日本の電気通信事業法の外部送信規律に該当する事業者は、送信先や目的の公表も検討対象になります。
同意後にだけ読み込む設計にすると、同意しなかった訪問者はテスト対象から外れ、母数が減る点も理解しておきましょう。
結果をGA4と連携して確認する
多くの外部ツールは自前のレポート画面を持っていますが、GA4と連携しておくと、パターンごとの購入や問い合わせといった既存のコンバージョンで比較できます。連携方法は主に2つです。
- ツール側の「GA4連携」機能を有効にし、実験IDとパターン名をイベントとして送る
- ツールのコールバックでパターン情報を取得し、自分で
dataLayerにイベントを積んでGTMからGA4へ送る
2の場合は、たとえば次のようにイベントを送ります。イベント名やパラメータ名は自サイトで統一したものを使い、GA4側でカスタムディメンションとして登録しておくと、探索レポートでパターン別に絞り込めます。
// テストツールのコールバック内で呼ぶ想定(関数名はツールごとに異なる)
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'ab_test_view',
ab_test_id: 'pricing-cta-2026',
ab_variant: 'B'
});GA4は集計に時間がかかることがあり、DebugViewやリアルタイムレポートでイベントの到達を先に確認すると切り分けが楽です。
設置後の確認チェックリスト
- ブラウザの開発者ツールのネットワークタブで、テストツールのスクリプトが1回だけ読み込まれているか（プラグインとコードで二重に入っていないか）
- ページのソースで、タグが
<head>の前のほうに出力されているか - シークレットウィンドウで何度か開き、パターンが振り分けられているか
- キャッシュ削除後も同じ挙動になるか
- モバイル表示でレイアウトが崩れていないか、CLS（レイアウトのずれ）が増えていないか
- テスト終了後にタグやアンチフリッカーのコードを外したか
まとめ
- 外部A/Bテストプラットフォームの連携は、タグを
<head>の早い位置に1か所だけ出すことが基本です。子テーマかmu-pluginで出力すると制御しやすくなります。 - ちらつきはテスト結果を歪めるため、タグの位置とアンチフリッカーで抑えます。ただし表示速度への影響があるので、対象ページを絞ります。
- 高速化プラグインのJavaScript遅延・結合、ページキャッシュ、CDNの書き換えがよくある失敗の原因です。除外設定を確認してください。
- 同意管理の方針とプライバシーポリシーへの記載、GA4へのパターン情報の送信までそろえると、結果を既存の指標で判断できます。