ajike switch

はじめてのA/Bテスト Part.1【グロースハック実践】

AB TESTデザイナーの中川です。

僕が在籍しているCU2の山本が「Growth Hack (グロースハック)とは何ぞや?」という記事を書いていたので、今回はグロースハックで利用されるA/Bテストの実装方法について紹介します。

説明が前後してしまいましたが、
A/Bテストとは、異なるWebデザイン、またはwebデザインの一部だけ変えたパターンを2個以上用意し、どのパターンがいいかを比較検証するテストのことです。
事例としてはオバマ大統領の選挙支援サイトが有名ですね。

今回はA/Bテスト実践シリーズの第一弾として、Google Analyticsの「ウェブテスト」を利用した簡単なA/Bテストの設置方法について説明していきます。

目次

  1. 計測する対象を決め、複数のデザインパターンを用意する
  2. サイトにGoogle Analyticsのトラッキングコードを設置する
  3. Google Analyticsで目標設定をする目標設定をする
  4. ウェブテストでA/Bテストの登録する

計測する対象を決め、複数のデザインパターンを用意する

まずは計測する目標を設定します。今回はブログ用に「ボタンがクリックされる(外部リンクへ遷移する)」ことをコンバージョンに設定し、ボタンの色をユーザーごとにランダムに表示して、どの色がよくクリックされるかを測るデモページを作りました。
>>デモページ

ABテストのイメージ

ボタン色は3パターン用意しました。
img_pattern

デザインの方向性がきまったら、3パターン分のページを用意します。
デモページではAパターンをオリジナルのページに設定し、下記のURLにしました。

※AパターンはA/Bテストが実行されているので、A〜Cのパターンがユーザーごとにランダムに表示されます。

ここで注意したいのは、オリジナルのページ以外がクローラーにインデックスされないように正規化する必要があることを忘れないようにしましょう。
オリジナル以外のページに下記のコードを入れる必要があります。

<link rel=”canonical” href=”オリジナルページのURL” />

クローラーにインデックスされないように正規化しよう

サイトにGoogle Analyticsのトラッキングコードを設置する

Google Analyticsのトラッキングコードをテストサイトに設置します。

トラッキングコードをコピペします
自サイトにトラッキングコードを貼り付けます
※Google Analyticsの管理画面で「ステータス: トラッキングがインストールされていません」と表示される場合は1日程時間を開けてみてください。「ウェブテストの設置」はこの状態でもできます。

Google Analyticsで目標設定をする

サイトを訪れたユーザーがどのような行動をとれば目標が達成されたかというのを、Google Analyticsで判別できるように目標設定をします。

Google Analyticsの設定画面からビュー>目標>目標を作成ボタンを選択し、新規の目標を作成します。

  • 【目標設定】カスタム
  • 【目標の説明】名前:好きな名前を記入します 、目標タイプ:目標
  • 【目標の詳細】目標:目標とするURLを記入します

目標の詳細設定をします
※その他のオプションについては省きます(逃げ)

ウェブテストでA/Bテストの登録する

サイトを訪れたユーザーがどのような行動をとれば目標が達成されたかというのを、Google Analyticsで判別できるように目標設定をします。

ウェブテストの設定1

まずはテスト名を記入し、先程作成した目標を選択します。

ウェブテスト設定:テストページを登録します

次にオリジナルのURL、別パターンのURLを登録します。

ウェブテスト:スクリプトコードをコピペします

登録後、スクリプト コードが発行されるので、コードをコピーします。

ウェブテスト:コピーしたスクリプトをオリジナルのページに貼り付けます

スクリプト コードをオリジナルのページに貼り付けます。

ウェブテスト:各パターンにチェックが付いていたら、テストが開始できます

テスト コードの検証が成功していたら、テストを開始できます。
テスト開始から1日程経つと測定の結果がウェブテストから確認できます。

結果はこんな感じでみれます

以上になります。

A/Bテストを仕込んだサイトを公開したら、実際に友人や社内の人にサイトを見てもらいましょう!
次回は実際にコーポレートサイトにA/Bテストを実装して、検証方法やA/Bテストのポイントを紹介する予定です。次回もお楽しみに!

コメントはy.nakagawa@ajike.co.jpまで!

P.S.
アジケでは2014年より事業部のひとつとして「グロースハック(Growth Hack)」事業部を立ち上げました。サイトやサービスの成長させていきたいというご要望にお応えします。是非お問い合わせください。
planGH(グロースハック)| 株式会社アジケ
planGH(グロースハック)| 株式会社アジケ

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×