デザイナーの中川です。

僕が在籍している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テストの登録する

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

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

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

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

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

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

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

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

Google Analyticsで目標設定をする

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

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

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

※その他のオプションについては省きます(逃げ)

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

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

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

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

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

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

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

以上になります。

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

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

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

planGH（グロースハック）| 株式会社アジケ