GA4でABテストを行う方法をGTMの設定も踏まえて詳しくご紹介

ABテストとは

ABテストとは、Webマーケティングの施策において最も効果の高いデザインや要素などを特定するために、複数のパターンを一定期間公開して比較検証する手法です。例えば、Webサイトで使用するバナーを複数パターン用意し、ユーザーに公開してどれが最もクリックされるかを分析します。

これにより、予測ではなく実際の反応からデータを収集でき、その結果に基づいて意思決定や施策を実行できるため、Webマーケティングの実施や改善において効果的な手法となっています。

次に、ABテストの活用場面をご紹介します。

ABテストの活用場面

ABテストでは、キャッチコピーやCTA、申し込みフォームなどの変更時に活用できます。変更前後で比較検証してより効果が出るほうを特定できますので、それぞれの場面での活用方法を見ていきましょう。

キャッチコピー

キャッチコピーの変更時には、変更前のキャッチコピーを「キャッチコピーA」、変更後のキャッチコピーを「キャッチコピーB」のように名前をつけて、どちらのほうがクリックやCV（コンバージョン）などにつながりやすいかを比較検証します。

例えば、サービス資料のバナー付近に設置するキャッチコピーが「無料ですぐにダウンロード可」と表記されていて、「無料で簡単30秒のフォーム入力でダウンロード」に変更しようと考えている際に、より効果的なコピーはどちらかをABテストします。

ここで得られた結果から、変更するか否か、どれを採用するかなどを決定できるでしょう。

CTA

CTAでは、デザインを変更する前後でどちらのデザインがクリックやCVなどにつながりやすいかを比較検証します。

例えば、サービス資料のダウンロードボタンを青にしている場合、それを赤や黒などに変更することで、どのように反応が変わるのかのABテストを行います。

CTAの変更はクリック率などが大きく変わることもあるため、テキストや色、形状、大きさなどを最適化することで、最大限のクリック率向上やCVの獲得にも貢献するでしょう。

申し込みフォーム

申し込みフォームでは、フォーム設計やデザインなどの変更前後で、どれが最適かを比較検証します。

例えば、セミナーの申し込みフォームの入力項目数や1ページに表示する項目数、入力する順番、レイアウトなどを変更の要素とした複数パターンのフォームを用意し、フォーム入力の完了につながりやすい設計をABテストで特定します。

申し込みフォームに入力するユーザーは、サービスへの関心が高いと考えられるため、できるだけユーザーの入力や心理的な負担を減らして、離脱しないように努めることが重要です。

ファーストビュー

ファーストビューでは、アイキャッチのデザインやバナーの設置場所などを変更する前後で、直帰率やクリック率が変わるのかを比較検証します。

例えば、アイキャッチの基調は明るい色か暗めの色か、バナーの設置場所はアイキャッチの直下かサイドバー上部かなど、ファーストビューの設計を複数パターン用意してABテストを行います。

ファーストビューは、ユーザーが訪れた際に必ず目にする部分であるため、最適化することで滞在時間やクリック率の向上を図れます。

このように、ABテストはさまざまな場面で活用できますが、テストはGA4で行うのがおすすめです。次に、その理由についてご紹介します。

GA4でABテストを行うのがおすすめの理由

ABテストツールには有料のものも多いですが、GA4は無料でありながら高性能なABテストを行うことができ、多くのWebサイト運営者に利用されているため、GA4でABテストを行うのがおすすめです。

GA4のABテストを利用することで、クリック率やCVR（コンバージョン率）、エンゲージメントなどの数字を確認でき、最も成果に貢献しているパターンを特定できます。ABテストを繰り返すことで、より成果につなげられるコンテンツを作成できるでしょう。

参照：[GA4] A/B テスト｜アナリティクス ヘルプ

ここまでで、GA4でABテストを行うのがおすすめであることをお伝えしましたが、実施にあたって注意すべき点もあります。次では、その注意点をご紹介します。

GA4でABテストを行う際の注意点

GA4のABテストは、結果の違いが小さいと測定ができないため、CTAやキャッチコピーだけといった細かい変更ではテストを行えないことがあります。テストの際は比較する要素をなるべくまとめて行い、一定以上の違いが得られるようにすることが大切です。

また、テストには元のコンテンツとテスト用のコンテンツが必要になりますが、両方とも検索エンジンのクローラーが巡回してしまうと、重複コンテンツとしてペナルティを受ける恐れがあります。そのため、テスト用のコンテンツには「noindex」を設定するなどで、クローラーをブロックしておきましょう。

注意点を把握した後は、実際にABテストを行います。次では、ABテストの例としてGA4とGTMを使ってバナーのABテストを行う方法をご紹介します。

GA4とGTMを使ってバナーのABテストをする方法

GA4のABテストでは、GTMも併用してテストを行います。ここでは、全体の流れからGA4側・GTM側でやること、レポート作成までをご紹介しますので、詳しい手順を見ていきましょう。

全体の流れ

バナーのABテストでは、まずテスト用のページを用意します。このとき、ページAは既存のコンテンツ、ページBはテスト用のコンテンツとします。テスト中は訪問したユーザーに対してページAとページBをランダムに表示するため、それぞれのページでバナーの違いがユーザーにわかるようにしておきましょう。

次に、GA4側でABテストの前にイベントパラメータとカスタムディメンションを設定します。イベントパラメータは、イベントが発生した際の二次情報を取得するためのパラメータで、バナーがクリックされたときにその回数だけでなく、どのバナーがクリックされたのかもわかるようになります。

また、GTM側では、ページをランダムに表示するためのJavaScriptと、その中のtestBanner要素を取得するためのJavaScript、バナーの表示・クリックを取得するトリガー、それをGA4に値を送るタグを作成します。

最後に、レポートを作成すればABテストの結果がわかるようになります。

これらの具体的なやり方については、次で詳しくご紹介します。

GA4側でやること

GA4では、カスタムディメンションとイベントパラメータの作成を行います。

まず、GA4の画面左下にある「管理」アイコンをクリックし、「カスタム定義」を選択します。

「カスタムディメンションを作成」をクリックし、ディメンション名とイベント パラメータに「banner_id」を入力して「保存」をクリックすれば完了です。

GTM側でやること

GTM側では、HTMLの追加やバナーの表示・クリックを取得するトリガーとその情報をGA4に送るタグを作成します。以下では、それらの手順を詳しくご紹介します。

HTMLの追加

ここでは、コンテンツ内のバナーを「contentBannerAB」と定義してABテストを行います。 Webサイト内のバナーを出したい箇所に、以下のHTMLを追加します。

<div id="contentBannerAB"></div>

カスタムHTMLにコードを入力

GTMのホーム画面からテストを行うURLのコンテナを選択し、「ワークスペース」の画面を表示します。次に、画面左のサイドバーにある「タグ」を選択し、「新規」をクリックします。

「名前のないタグ」の画面が表示されるので、タグ名を任意で変更した後に「タグの設定」をクリックし、「カスタム HTML」を選択します。「HTML」にカスタムHTMLのコードを入力できる欄があるため、以下のように入力します。

<script>
(function() {
  if (document.querySelector("#contentBannerAB")) {
    var contentBanner = document.querySelector("#contentBannerAB");

    var banners = [
      {
        //パターンAを表示するページのURL
        href: "https://example.com/blog/a",
        //パターンAの識別ID
        testId: "testA",
        //パターンAのバナーURL
        imgUrl: "http://example.com/a.png"
      },
      {
        //パターンBを表示するページのURL
        href: "https://example.com/blog/b",
        //パターンBの識別ID
        testId: "testB",
        //パターンBのバナーURL
        imgUrl: "http://example.com/b.png"
      }
    ];

    var randomNumber = Math.floor(Math.random() * 2);

    var bannerHtml = '<a class="banner_liapoc" href="' + banners[randomNumber].href + '" testBanner="' + banners[randomNumber].testId + '"><img src="' + banners[randomNumber].imgUrl + '"></a>';

    // バナーAまたはBのHTMLを挿入
    contentBanner.insertAdjacentHTML('afterbegin', bannerHtml);
  }
})();

</script>

最後に、「トリガーの選択」をクリックし、「All Pages」を選択したら「保存」をクリックします。

GTMのカスタムJavaScriptでバナー要素（testBanner）の値を取得

「ワークスペース」の画面左側にある「変数」から「ユーザー定義変数」の「新規」をクリックします。「無題の変数」の画面が表示されるので、変数名を「Banner_AB」に変更します。この変数名が実際の変数として利用できるようになります。

次に、「変数の設定」で「カスタム JavaScript」を選択し、「カスタム JavaScript」の欄に以下のようにコードを入力します。

function getTestBannerValue() {
  var contentBanner = document.getElementById("contentBannerAB");
  var aElement = contentBanner.querySelector("a");
  var testBannerValue = aElement.getAttribute("testBanner");
  return testBannerValue;
}

最後に「保存」をクリックすると、カスタム JavaScriptの設定は完了です。

バナー表示を取得するトリガーを作成

「ワークスペース」の画面左側にある「トリガー」から「新規」をクリックし、「無題のトリガー」の画面が表示されるので、トリガー名を「テストバナー表示」（任意）に変更します。

次に、「トリガーの設定」をクリックし、「ユーザー エンゲージメント」にある「要素の表示」を選択します。「選択方法」は「ID」を選択し、「要素 ID」は「contentBannerAB」を入力して「保存」をクリックすれば完了です。

バナー表示のトリガーが発動した際に、GA4に情報を送るタグの作成

「ワークスペース」の画面左側にある「タグ」から「新規」をクリックし、「名前のないタグ」の画面が表示されるので、タグ名を任意で変更します。

次に、「タグの設定」をクリックし、「Google アナリティクス」>「Google アナリティクス: GA4」を選択します。「測定 ID」にはGA4のIDを入力し、「イベント名」は「BannerView」を、「イベント パラメータ」は「banner_id」を入力します。ここで入力したイベント名とイベント パラメータが、GA4にイベントやその二次情報として送られます。

値として「Banner_AB」を選択後、「トリガー」で「テストバナー表示」（任意）を選択し、「保存」をクリックすれば完了です。

バナークリックを取得するトリガーを作成

「ワークスペース」の画面左側にある「トリガー」から「新規」をクリックし、「無題のトリガー」の画面が表示されるので、トリガー名を「テストバナークリック」（任意）に変更します。

次に、「トリガーの設定」から「クリック」にある「リンクのみ」を選択します。「このトリガーの発生場所」は「一部のリンククリック」を選択し、変数は「Click Classes」を選択後、右側の入力ボックスに「banner_liapoc」を入力します。

バナークリックのトリガーが発動した際に、GA4に情報を送るタグの作成

「ワークスペース」の画面左側にある「タグ」から「新規」をクリックし、「名前のないタグ」の画面が表示されるので、タグ名を任意で変更します。

次に、「タグの設定」をクリックし、「Google アナリティクス」>「Google アナリティクス: GA4」を選択します。「測定 ID」にはGA4のIDを入力し、「イベント名」は「BannerClick」を、「イベント パラメータ」は「banner_id」を入力します。

値には「Banner_AB」を選択後、「トリガー」で「テストバナークリック」（任意）を選択し、「保存」をクリックすれば完了です。

GA4でレポート作成

GA4では、実装した翌日から計測したデータがGA4で表示できるようになります。GA4の「探索」から「空白」を選択します。

「無題のデータ探索」が表示されたら、「変数」列の「セグメント」の右側にある「＋」をクリックし、「イベント セグメント」を選択します。「無題のセグメント」の部分には「バナー ABテスト」と内容がわかりやすい名前をつけ、条件が「BannerView」または「BannerClick」となるように選択して「保存して適用」をクリックします。

次に、「ディメンション」の右側の「＋」をクリックし、「カスタム」>「banner_id」と「イベント名」を選択し、「インポート」をクリックします。

また、「指標」の右側の「＋」をクリックし、「イベント」>「イベント数」を選択し、「インポート」をクリックします。

「設定」の列の「セグメントの比較」には「バナー ABテスト」を、行には「banner_id」と「イベント名」を、値には「イベント数」を選択することで、テーブル形式の表でそれぞれのバナーの表示回数やクリック数を見られるようになります。

ここまでで、ABテストの方法をお伝えしました。次では、ABテストの実施においてよくある質問について詳しくご紹介します。

ABテストの実施でよくある質問

ABテストを実施する際には、効果検証に必要な期間や数値の確認方法がよくある質問としてあげられます。ここでは、それらの質問に対しての回答をご紹介します。

ABテストの効果検証に必要な期間は？

ABテストの検証には、1週間〜数週間以上の期間を設ける必要があります。検証の結果は、データの総数が多いほどより正確となるため、短すぎると十分な量が得られません。

また、時期的な要因も結果に影響します。例えば、法人向けのサイトでは休日にアクセスが減る傾向があるため、休日にデータを取ろうとしても母数が足りなくなります。

このことから、ABテストは十分な期間をかけてデータを収集することが大切です。ただし、期間が長すぎても結果から次のアクションにつなげるまでに時間がかかってしまうため、十分なデータ量を確保できる長すぎない期間を意識して行いましょう。

ABテストの数値確認はどのように行うとよい？

ABテストの数値は、目的に応じた指標を確認することが大切です。指標にはCVRやクリック率などがありますが、1つの施策で複数の指標を見ようとすると、施策の一貫性を保てなくなる恐れがあるため、最も重要な指標を1つに絞ってパターンAとパターンBの数値を比較するとよいでしょう。

また、数値だけでなく、ユーザーからのフィードバックも重要な指標となりますので、意見や行動も分析して質的な要素も確認してみるのがおすすめです。

まとめ

この記事では、GA4でABテストを行う方法をご紹介しました。ABテストはキャッチコピーやCTA、申し込みフォームなどの変更時に活用でき、変更前後の効果を比較検証することが可能です。GA4を使えば無料で高性能なテストを行えるため、結果の違いが小さいと測定ができない点に注意して活用することが大切です。

この記事でご紹介した、GA4側とGTM側でやることをしっかりと確認し、正確な数値を計測できるようにテストを行いましょう。