GoogleAnalyticsでA/Bテスト～デザインやコンテンツ、どちらが良いか迷ったその時に～ | ネットPR.JP

Webサイトで表示するバナーや資料請求、販売フォームへの導線ボタンなど、どういうデザインが良いのか、どういうコピーが良いのか。

デザインの評価やコピーの評価は、「私はこっちが好き」「自分はこっちにひかれる」といった主観的、かつ定性的な評価になってしまうことも多いと思います。

こういった場合こそWebサイトで一度公開した後に、実際のユーザーのデータに基づき定量的に評価することが重要です。

A/Bテストとは

簡単に言うと「AとB、2つの選択肢についてどっちが良いですか？」という答えを計測するものです。

例えば資料請求のボタンは「緑色」が効果的なのか、「赤色」が効果的なのか、
例えばキャンペーンページへの導線バナーは「派手さ、インパクト」がより好まれるのか、「高級感や上品さ」がより好まれるのか。

上記は極端な例ですが、比較対象があることで、定量的な比較に基づいて、有効なものを選択することができ、またユーザーへの訴求ポイントはどういったものなのか、を計ることができます。

2つのバナーのどちらがより効果的かを計る！2つのコンテンツの内、どちらがより効果的かを計る！

では、実際にはどうやってテストを行えばいいのか？

LPOツールなどの外部サービスで行う方法もありますが、ここでは、無料で、かつ、導入が非常に手軽なGoogleAnalyticsを使って「A/Bテスト」を実施する方法をご紹介させていただきます。

GoogleAnalyticsでA/Bテスト

A/Bテストを手軽に実施できる方法としてGoogleAnalyticsの「ウェブテスト」をご紹介します。

GoogleAnalyticsでの「ウェブテスト」ではメインのページに対して効果を試したいテストページを用意して、設定した指標について2つのページを比較する仕組みでテストする仕組みです。

すでにWebサイトにGoogleAnalyticsを導入されていれば、設定は非常に簡単です。

1.GoogleAnalyticsにログインして対象のサイトのレポートを表示し、メニューの中から「ウェブテスト」を選択します。2.「テストを作成」をクリックします。3.テストするページ(オリジナルページ)のURLを指定します。

テストを実施する際にはオリジナルとするページと比較するページの2種類が最低限必要になります。ここではまずテストするページ(オリジナルページ)を設定します。正しいオリジナルページのURLを指定すると、指定したページのサムネイル画像が表示されますので確認して「テストを開始」をクリックします。

4.作成するテストの基本設定をします。

ここでは「このテストの名前」、「このテストの目的」、「テスト対象のトラフィックの割合」の基本情報を設定します。

※ここではよりアドバンスな設定も可能ですが基本設定のみ説明します。

■ このテストの名前
1の画面で一覧表示されるテストの名前を設定します。
■ このテストの目的
テストするそれぞれのページをどういう指標で比較するかを設定します。デフォルトではページビュー数、直帰率、訪問の滞在時間、eコマースのトランザクション数、収益などが選択できます。その他イベントクリック数やCVRなど手動で設定した目標を選択することもできます。
■ テスト対象のトラフィックの割合
テストする対象の割合を設定します。ここで注意が必要なのは全アクセスの内、何％にテストを実施するかを設定する項目になりますので、50％に設定するとアクセスして来るユーザーの50％に対して、オリジナルのページ(25％)とテストのページ(25％)をランダムに表示するという意味になります。

必要事項の設定が完了したら「次のステップへ」をクリックします。

5.比較するテストページのURLを指定します。

先に比較する対象のページをアップロードしておく必要があります。今回「Ａ/Ｂテスト」として紹介していますが、比較するページは追加することができますので「A/B/C・・・・テスト」のように、比較したいパターンが多くても一度にテストを行うことができます。正しいテストページのURLを指定すると、指定したページのサムネイル画像が表示されます。正しいことを確認して「次のステップ」へ進みます。

6.テスト用のコードを取得しオリジナルのページに埋め込みます。

取得したコードをオリジナルページのhead開始タグの直後に挿入します。次のステップに進みます。ここで一度GoogleAnalyticsの設定から離れ、ページの編集が必要になりますが途中保存が可能ですので、技術担当者へ埋め込みを依頼して反映待ちの再などには「後で使用する為に保存」をクリックして保存しておきましょう。オリジナルページへのコード埋め込みが完了したら次のステップへ進みます。

7.自動的にコードセッティングの検証が始まります。

自動的にコードが正しくセッティングされたかの検証が始まります。エラーが出た場合、警告文が表示されますので内容に沿ってオリジナルページのコードセッティングを修正します。検証が問題なく完了したら「テストを開始」をクリックします。これで設定は完了です。

8.テストの経過を見てみます。

2.の画面かの一覧から設定したテストを選ぶとオリジナルページと比較する形でテストの経過を確認できます。計測した数値から「オリジナルを上回る可能性」も計算して出してくれます。

応用した使い方

Webサイトのページ改修が売上に直結するeコマースサイトや、求人系のサイトの運用の場合、ページの構成をチャレンジも含めて大きくリニューアルするような時には、失敗した時のインパクトが非常に大きいことがあります。

こういった場合には一度リニューアル用のページをテストページとして設置しておき、テストページの表示される割合を低く設定することでリスクを抑えてリニューアルの効果をテストするような使い方も可能です。