GoogleタグマネージャーでABテストを実装する方法

ステップ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
• 条件： abTestGroup が B であるとき（後述の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テストが可能になるので、継続的な改善と最適化に役立ちます。