Googleタグマネージャー(GTM)とGoogle Analytics 4(GA4)を使えば、コードを直接編集せずにウェブサイト上でのA/Bテストを簡単に実施・計測できます。本記事では、GTMでのユーザー振り分けから、バリエーション表示、GA4へのイベント送信、さらにGA4でのA/Bテスト結果の確認方法まで、手順を詳しく解説します。

ステップ1:GTMでユーザーをA/Bグループに振り分ける

タグ設定

  • タグタイプ: カスタムHTMLタグ
  • トリガー: All Pages(ページビュー)

タグのコード例:

<script>
  (function() {
    var group = localStorage.getItem('abTestGroup');
    if (!group) {
      group = Math.random() < 0.5 ? 'A' : 'B';
      localStorage.setItem('abTestGroup', group);
    }
    window.abTestGroup = group;
  })();
</script>

このコードは、初回訪問時にユーザーをランダムにA/Bグループへ振り分け、localStorageに保存します。window.abTestGroup により他のタグでこの値が参照可能になります。


ステップ2:グループに応じた表示切り替え

目的:

Bグループのユーザーにだけ、見た目や内容を変更する処理を実行します。

タグ設定

  • タグタイプ: カスタムHTMLタグ
  • トリガー: DOM Ready
  • 条件: abTestGroupB であるとき(後述のJavaScript変数を使う)

タグのコード例:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.abTestGroup === 'B') {
      const btn = document.querySelector('.cta-button');
      if (btn) {
        btn.style.backgroundColor = '#ff0000';
      }
    }
  });
</script>

JavaScript変数の作成

  • 変数タイプ: JavaScript変数
  • 名前: abTestGroup
  • コード:
function() {
  return localStorage.getItem('abTestGroup');
}

ステップ3:GA4にイベントを送信してグループを計測

方法A:GA4イベントタグを使う(推奨)

タグ設定

  • タグタイプ: GA4イベント
  • イベント名: ab_test_view
  • イベントパラメータ:
    • パラメータ名:ab_group
    • 値:{{JS変数 - abTestGroup}}
  • トリガー: DOM Ready

JS変数の作成(前述)


方法B:カスタムHTMLタグで直接送信

タグ設定

  • タグタイプ: カスタムHTMLタグ
  • トリガー: DOM Ready

タグのコード例:

<script>
  (function() {
    var group = localStorage.getItem('abTestGroup');
    if (group) {
      gtag('event', 'ab_test_view', {
        'ab_group': group
      });
    }
  })();
</script>

gtag.js がサイトに既に読み込まれていることが前提です。


ステップ4:GA4でA/Bテスト結果を分析する

カスタムディメンションの設定

  1. GA4管理画面 > 管理 > カスタム定義 > カスタムディメンション
  2. ab_group をイベントスコープで登録

探索レポートで比較する方法

  1. GA4左メニュー > [探索] > 空白の探索を作成
  2. ディメンションを追加: ab_group, イベント名 など
  3. 指標を追加: イベント数, コンバージョン数 など
  4. 行に設定: ab_group
  5. 列に設定: イベント名 または成果イベント名
  6. 値に設定: イベント数 や成果指標

コンバージョン率の計算(例)

  • エクスポートして conversion / ab_test_view を算出
  • グループA/Bで比較

まとめ:GTM + GA4で行うA/Bテストの流れ

  1. GTMでユーザーをA/Bグループに振り分け
  2. グループに応じたバリエーションを出し分け
  3. GA4にイベント送信でグループを記録
  4. 探索レポートなどで成果を比較

コードを直接編集せずに柔軟なA/Bテストが可能になるので、継続的な改善と最適化に役立ちます。