CREATOR BLOG

実案件でA/BテストをGoogle Analyticsで実施してみたよ!

2014/01/16
くぼた
  • このエントリーをはてなブックマークに追加

アライドアーキテクツで受託制作事業のマネージャー兼プロデューサーを務めている久保田です。
作って終わり!・・・ではないが信条なので、今回はA/Bテストについて実案件での取り組みを通して解説してみます。

A/Bテストについて

A/Bテストとは、画像やテキストなどを複数パターン用意し、それらをユーザーによって出し分けることで、どちらが効果あるかを測定するものです。なお、Google AnalyticsにはA/Bテストを行うことができる「ウェブテスト」という機能があり、こちらを利用することで簡単にテストを行うことができます。

テスト・・・の前に

やみくもにA/Bテストをするのではなく、目標を設定して比較を行います。
ゴルフメーカーのPRGRブランドサイト(http://www.prgr-golf.com/)での導入を通して考えてみましょう。
このサイトではブランドの認知向上に加えて、オンラインショップ(http://prgr-ginza.com/)への誘導も意識したサイト設計となっており、今回のテストでは送客数に絞って考えてみました。

A/Bテスト実施内容

■対象サイト:PRGRブランドサイト(http://www.prgr-golf.com/
■ゴール:オンラインショップへの送客(http://prgr-ginza.com/
■具体策:リンクバナーの配置場所調整(オリジナル・パターンA・パターンB)
■問題点:Google Analyticsによれば商品詳細ページの滞在時間も高く、また送客数・売上も悪くないことから、下までじっくり読んだユーザーがオンラインショップに遷移し、購入までいたったと考えていました。
しかし、ヒートマップではオンラインショップへのリンクバナーがある最下部まで閲覧していたのは10%以下。また、多くのユーザーがざっと下まで眺めてある程度コンテンツ量や内容を確認してから再度上から読んでいました。このことから潜在顧客を逃しているのではないか?ということになりました。

▼ユーザーのマウスモーション
ユーザーのマウスモーション

実際のテストフロー

3通り分のページを作成します。
オリジナル(***.html)、パターンB(***_b.html)、パターンC(***_c.html)というhtmlを作成しました。
なお、og:urlやcanonicalなどは***.htmlで統一しています。

▼それぞれ上からの距離を記載しています
3通り分のページ

目標設定をする

今回外部へのクリックをゴールとしていたため、イベントトラッキングを設定。
そちらを目標に設定しました。

ウェブテストの設定

Google Analyticsの左メニュー「行動」の「ウェブテスト」を選択。

「テストを作成」をクリックします。
表示されたURLにはオリジナルを入れます。
あとは表示された内容に忠実に入力するだけです!
これを行うと「テストコード」が発行されますので、対象ページのhead開始タグ直後に記述します。
※大きな変更の場合は「テスト対象のトラフィックの割合」を低くしておきましょう。

じっくり待つ・・・

2週間程度経ち、結果に差が生じてきたら勝手にテストが終了します。

結果

今回はパターンCがオリジナルに対して129%↑を達成しました。
またパターンBでも38%↑です。

▼結果のグラフ
結果

ただし、パターンCはデザイン的にも違和感があり、クリックされやすかった可能性があります。また、パターンCはファーストビュー内にあるため、売り感が溢れんばかりなので公式サイトとして適切かは疑問が残ります。このように単純に結果が良かったからと言って飛びつくのではなく、ブランディングなどのバランスを総合的に判断し、実際の導入につなげていきましょう。

この記事を書いた人

くぼたプロデューサー

企画、マーケティング、ディレクション、WEB構築・運営、コーディングなどなどマルチに! 都合の良い何でも屋です・・・・。 【著書】個性派 jQuery で魅せる WordPress デザインアレンジBOOK(インプレスジャパン)

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive