Googleウェブサイトオプティマイザーの使い方ステップbyステップ： 無料でA/Bテスト入門

前回のU会話入門#1では、「テストからユーザー理解を開始させてみる」ということをお伝えしました。今回は弊社が実際に行っている方法を例として、「Googleウェブサイトオプティマイザー」を使ってテストを実施する方法をお伝えします。

ここで言う「テスト」とは、サイト上のデザイン（色、大きさ、配置、写真、イラストなど）や文言（キャッチフレーズや、アクションボタンの誘い文句など）を複数パターン用意しておき、実際のサイト上で、訪問してきたユーザーに対して出し分け、どのデザインや文言を提示するのがコンバージョンにつながりやすいかを数値で調べる「A/Bテスト」を意味します。

こうしたことを手動で行うのはかなり面倒ですが、最近ではテストを自動的に実施するツールを無料で利用できます。最初は少し面倒そうに思われるかもしれませんが、慣れれば簡単ですので、あなたも明日からテストを試せるようになるでしょう。

テストの事前準備

テストするページを決める

最初にテストするページを決めます。ここでは例として、弊社が運営している価格比較サイトECナビ内にある「星付き家電」という「専門家の調査に基づいた本当に良い家電を紹介するガイド」の商品詳細ページをテストしてみたいとおもいます。

ユーザーを理解する

次にこのページに来ているユーザーを理解しましょう。アクセス解析のデータやユーザーテストなどさまざまな手段を利用して、「ユーザーはどういう意識で、何を目的としてこのページに来ていて、現状どういう状態であるか」を理解します。

ここでは、このページを訪れるユーザーが次のような状態であると理解して進めます。

このデジカメに興味をもったユーザーが、商品の詳細を確認するためにこのページに来ていて、さらにこの商品がどのくらいの価格で買えるのかを確認したい状態

ゴールを決める

さらに、ユーザー理解からゴールを決めます。ここではユーザーの目的が「価格の確認」であると理解しました。

このページから価格を詳細に確認するためには、「販売ショップ 価格一覧」というボタンをクリックする必要があります。そのためユーザーがこのボタンに気づきクリックすることがユーザーにとってよい状態であり、このボタンがユーザーのゴールになります。

以上のことより、テストのゴールもこのボタンのクリック数を増やすこととします。

仮説を立ててテストする内容を決める

ユーザーのゴールがボタンをクリックすることであることから、このボタン自体に着目し、ボタン上に示す文言が「販売ショップ 価格一覧」よりも「価格を確認する」という文言のほうがよりわかりやすくよりクリックされるのではないかという仮説を立てます。

この仮説自体がテストの内容であり、以下のような形でテストを実施することにします。

テストするためのツールを決める

テストの事前準備が完了したため、最初にテストを実施するためのツールを決めます。現在テストツールも数多くみられますが、弊社ではGoogleウェブサイトオプティマイザーを利用しています。

• Googleウェブサイトオプティマイザー

Googleウェブサイトオプティマイザーとは、グーグルが提供しているA/Bテスト・多変量テストを実施するためのツールです。

弊社がGoogleウェブサイトオプティマイザーを利用している理由は、「無料で高機能」だからです。無料であれば導入コストを考えることなく実施できますからね。またGoogleウェブサイトオプティマイザーは、無料にもかかわらずA/Bテストはもちろんのこと、2つ以上をテストする多変量テストも実施できる高機能ツールでもあります。

テストの材料を用意する

ここから、Googleウェブサイトオプティマイザーでテストを実施する手順を説明していきます。とはいえ、いきなりGoogleウェブサイトオプティマイザーの管理画面を見てもわからないことが多いので、テストの設定を開始する前に、次のものを用意しておきましょう。

• アカウントや権限

  • Googleアカウント ―― Googleウェブサイトオプティマイザーを利用するには、Googleアカウントが必要です。

  • Googleアナリティクスのアカウント ―― Googleウェブサイトオプティマイザーは、Googleアナリティクスと連携して動作するため、テスト対象サイトのGoogleアナリティクスデータに対する管理者権限をもったGoogleアカウントが必要です。

  • Webサイトの変更権限 ―― テストを実施するには、テスト対象ページのHTMLを修正する必要があります。HTMLを修正して公開サーバーにアップロードする権限をもっているか、それらの作業を行える人に作業を依頼できる必要があります。また、テストではHTMLを修正してJavaScriptのコードを入れる必要がありますので、ブログのようなワープロ風編集画面ではテスト実施に必要な修正ができない場合があります（コードはGoogleウェブサイトオプティマイザーが提供するので、自分でプログラミングできる必要はありません）。

• テスト対象のURLやHTML

  • テストページのURL ―― どのページでテストを実施するか、あらかじめ決定しておきます。

  • オリジナルページのHTML ―― すでに公開されているページを、A/Bテストの「Aパターン（オリジナル）」として使いますので、問題ないはずです。

  • テスト対象箇所の代替パターン用HTML ―― A/Bテストの「Bパターン（代替）」として表示したい、テスト部分のHTMLを用意しておきます。ボタン画像や写真を変えてテストしたい場合は、その画像もあらかじめ公開サーバーにアップロードしておきます。この記事では、ボタン上に表示する文字列を変えるだけですので、代替パターンとしてはHTMLではなくテキストだけを用意しましたが、「文字中心の訴求」と「画像中心の訴求」のように大きく変える場合は、代替のHTMLを用意しておく必要があります。

  • どの時点で「そのテストでコンバージョンした」とみなすかの情報 ―― AパターンとBパターンをランダムにユーザーに提示されたユーザーが、その後どういう行為をする率が高いものを「良い」とみなすかを決めておく必要があります。ユーザーがそのページを見たあとに「申し込み」「購買」といった行動を完了した時点で「テストのコンバージョン」とみなす場合は、通常のアクセス解析のコンバージョンタグと同様に、申し込みが完了したページを「テストのコンバージョンページ」とします。この記事では、同一ページ内のボタンをクリックした時点を「テストのコンバージョン」とみなしますので、テストのコンバージョンページはテストページと同じページ、コンバージョンの動作はボタンのクリック時点となります。

Googleウェブサイトオプティマイザーでテストを設定する

では早速管理画面の利用方法から実際にテストを開始するところまでを説明します。

Googleウェブサイトオプティマイザーにログインすると、図4のようなページが表示されます。アカウントはGoogleアナリティクスと連携していて、Googleアナリティクスの管理者権限がないとログインできないので注意してください。

［別のテストを作成］をクリックして次に進みます。

すると、「新しいテスト」の画面が表示されます。

ここでは、「A/Bテスト」を実施するのか、「多変量テスト」を実施するのかを選べます。この記事でテストするのは単純な「A/Bテスト」なのですが、ここでは「多変量テスト」の方をクリックし、次に進みます（理由は後述）。

Googleウェブサイトオプティマイザーは「A/Bテスト」と「多変量テスト」の両方を実施できますが、弊社では「多変量テスト」に統一しています。というのも、「A/Bテスト」と「多変量テスト」は、それぞれ次のようなものです。

• A/Bテスト ―― ページ内の1つの要素を2パターン以上でテストし、どちらが良いかをみる（またはページ全体をがらっと変えてテスト）

• 多変量テスト ―― ページ内の2つ以上の要素を、それぞれ2パターン以上ずつでテストし、どの組み合わせが良いかをみる

Googleウェブサイトオプティマイザーでは「多変量テスト」を選択してもページ内の1つの要素だけに対してテストする「A/Bテスト」を実施できるからです。そのため弊社ではわかりやすくするために、「多変量テスト」を統一して使うことを推奨しています。

Googleウェブサイトオプティマイザーの管理画面で「多変量テスト」を選ぶと、「新しい多変量テスト」の画面が表示されます。

ここでは、［上記の手順を完了し、テストを開始する準備が整いました。］にチェックを入れて、［作成］ボタンをクリックします。

すると、多変量ページの設定画面のステップ1が表示されます。

ここでは、「テスト名」「テストページのURL」「コンバージョンページのURL」を指定します。

1. テスト名を設定する

   まずはテストの名前を記入します。弊社ではいつどこでどういうテストを開始したかわかるように『[ドメイン名][日付]_施策名』という命名規則にしています。

2. テストページの指定

   次に複数パターンを出し分けて表示するページのURLを指定します。ここでは前述の、http://ecnavi.jp/star/compact_digicame/201105/47/ のページ上にあるボタンをテストしますので、そのページのURLを指定します。

3. コンバージョンページの指定

   次に、コンバージョンページのURLを指定します。今回のテストでは、テストページと同じURLを入力しました。なぜならば今回の例では、テストページ上のボタンがクリックされることをゴールとみなすからです。こういった場合はテストページとコンバージョンページが同じであることから、この画面では両方に同じURLを指定します。

   そうではなく、たとえば会員登録のフローの中で、会員登録フォームをテストし、会員登録完了ページが表示されたことをゴールとするならば、この画面のテストページとコンバージョンページには別のURLを指定する必要があります。

3つの項目を入力したら、［続行］ボタンをクリックします。

すると、多変量ページの設定画面のステップ2が表示されます。

Googleウェブサイトオプティマイザーで自動テストするには、テストページやコンバージョンページのHTMLにテスト用のJavaScriptコードを追加する必要があります。ここでは、Googleウェブサイトオプティマイザーの管理画面を操作している人（つまりあなた）が自分でHTMLにJavaScriptコードを追加できるのか、または、JavaScriptコードの情報が記載されたページのURLをHTMLを編集できる他の人に送るのかを選べます。

ここでは自分でHTMLを編集してJavaScriptタグを埋められるという前提で、下の［お客様で JavaScript タグのインストールと検証を行います］にチェックをし、［続行］ボタンをクリックします。

Googleウェブサイトオプティマイザーでテストを設定する（続き）

タグ埋めをする

すると、ページに追加するJavaScriptコードが表示されます。

このページに表示されたJavaScriptコードを、説明を参考にしながらテストページとコンバージョンページのHTMLに追加していきます。

ここからは、Googleウェブサイトオプティマイザーの管理画面をブラウザで開いた状態で、あなたのサイトのHTMLファイルを編集して作業を進めることになります。

制御スクリプトとトラッキング スクリプトを追加する

まずは「制御スクリプトとトラッキング スクリプト」をテストページに追加します（前図の①）。

テキストエリアに表示されているJavaScriptコードをコピーして、テストページのHTMLの開始 <head>タグの直後に貼り付けます。

「制御スクリプト」とはテストパターンをランダムに切り替え、すべてのパターンを均等に表示するためのタグです。一方「トラッキングスクリプト」は、テストするページへのアクセスを記録するタグになります。

テストページの例： http://ecnavi.jp/star/compact_digicame/201105/47/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> 
<head> 
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='YYYYYYYYYY',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return escape(c.substring(i+n.
length+1,j<0?c.length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>
<!-- End of Google Website Optimizer Control Script -->
<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-XXXXXXXX-XX']);
  _gaq.push(['gwo._trackPageview', '/YYYYYYYYYY/test']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- End of Google Website Optimizer Tracking Script -->
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>ECナビ - パナソニック LUMIX DMC-TZ20 | ☆☆☆ | 星付き家電 コンパクトデジタルカメラ 2011年 5月</title> 

テストしたい部分にタグで囲んでセクションに指定する

次に、テストページ上で表示を変えてテストしたい部分をGoogleウェブサイトオプティマイザーが認識して自動的に要素を差し替えられるようにするための「ページ セクション」を指定するスクリプトをテストページのHTMLに埋め込みます（前図の②）。

今回はボタンの文言を複数パターン出し分けるのですが、このステップは次のように進めます。

1. 標準のパターン（たとえばパターンA）のHTMLを、ページに記載しておきます
2. 出し分けたい部分の直前に「<script>～</script>」タグを埋め込みます
3. 出し分けたい部分の直後に「<noscript>」タグを埋め込みます
4. 出し分けたい部分の直前に埋め込んだJavaScriptコードの中で、その部分の名前を指定します

少し面倒な作業になりますが、JavaScriptが動作しない環境では標準のパターンが表示されるようにHTMLを作っておいて、出し分けてテストしたい部分をタグで囲むことでGoogleウェブサイトオプティマイザーに認識させ、同一ページで複数の部分を同時にテストする場合に正しく出し分けてテストできるように名前を付けて区別できるようにするための作業になります。

ここでは、標準のボタンとして次のようなHTMLがあらかじめ用意されているとします。

<a href="http://kakaku.ecnavi.jp/item/10003427141181/price" >販売ショップ 価格一覧</a>

ここに、Googleウェブサイトオプティマイザー用のJavaScriptコードを追加して、次のような状態にします。

<a href="http://kakaku.ecnavi.jp/item/10003427141181/price" ><script>utmx_section("Mongon")</script>販売ショップ 価格一覧</noscript></a>

太字の部分が追加したJavaScriptコードです。赤字で示した「Mongon」の部分は、わかりやすい名前に変更してかまいません（たとえば1つのページ内で画像とキャッチコピーをそれぞれテストする場合は、画像の部分は「utmx_section("gazou")」、キャッチコピーの部分は「utmx_section("copy")」のようにします）。

ちなみに、この状態では終了タグの「</noscript>」だけで開始タグの「<noscript>」がないためHTMLとしてはおかしいのですが、気にしなくて大丈夫です。このように指定することで、<script>の閉じタグである</script>と</noscript>の部分をGoogleウェブサイトオプティマイザーが認識して、後ほど管理画面でテストパターンを入力できるようになるのです。

コンバージョンスクリプトを追加する

次に、「コンバージョンスクリプト」を追加します（前図の③）。

「コンバージョンスクリプト」とはゴールを計測するためのタグです。通常はゴールページ（たとえば会員登録完了ページなど）にスクリプトを設置して、ページが表示されたタイミングでゴールカウントをするのですが、今回はテストページ上のボタンがクリックをゴールとするため、テストページに、さらに追加でコンバージョンスクリプトを追加します。本来このJavaScriptは開始 <head>タグの直後に貼り付けるのですが、今回はさきほど埋め込んだ「制御スクリプト」と「トラッキング スクリプト」の次に貼り付けます。

ただし、今回のようにテストページ上のボタンクリックをゴールとする場合は、表示されている「コンバージョンスクリプト」をそのまま貼り付けてもうまく動作しないため、少しJavaScriptを変更する必要があります。以下のコードでは、ボタンがクリックされたらGoogleウェブサイトオプティマイザーのJavaScriptコードにコンバージョンしたことを知らせるように変更してあります（赤字が変更した部分）。

コンバージョンページの例： http://ecnavi.jp/star/compact_digicame/201105/47/ （今回はテストページと同一ページ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> 
<head> 
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='YYYYYYYYYY',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return escape(c.substring(i+n.
length+1,j<0?c.length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>
<!-- End of Google Website Optimizer Control Script -->
<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-XXXXXXXX-XX']);
  _gaq.push(['gwo._trackPageview', '/YYYYYYYYYY/test']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- End of Google Website Optimizer Tracking Script -->
<!-- Google Website Optimizer Conversion Script -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-XXXXXXXX-X']);
  function doGoal(that) {
    try {
      _gaq.push(['gwo._trackPageview', '/YYYYYYYYYY/goal']);
      setTimeout('document.location = "' + that.href + '"', 100)
    }
    catch(err){}
  }
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- End of Google Website Optimizer Conversion Script -->

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>ECナビ - パナソニック LUMIX DMC-TZ20 | ☆☆☆ | 星付き家電 コンパクトデジタルカメラ 2011年 5月</title> 

onClickを設定する

次に、クリックされたらコンバージョンとみなすボタンのHTMLを少し変更します。

このステップはGoogleウェブサイトオプティマイザーの画面には示されていませんが、今回はテストページと同じページ内のボタンクリックをゴールとみなすため、特別に追加する処理です。テストページとコンバージョンページが異なるページの場合は、このステップは必要ありません。

クリックをゴールとみなすボタンのHTMLコードが次のようなものだったとします（今回は、さきほどGoogleウェブサイトオプティマイザーのセクションとして指定した部分です）。

<a href="http://kakaku.ecnavi.jp/item/10003427141181/price" ><script>utmx_section("Mongon")</script>販売ショップ 価格一覧</noscript></a>

ここにonclick（クリックされたときに実行するコード）を次の赤字のように指定します。

<a href="http://kakaku.ecnavi.jp/item/10003427141181/price" onclick="doGoal(this);return false;"><script>utmx_section("Mongon")</script>販売ショップ 価格一覧</noscript></a>

これで、ボタンがクリックされるとゴールを達成したことをGoogleウェブサイトオプティマイザーが認識できるようになります。

今回は、たまたまテストページとコンバージョンページが同一で、かつ、テスト箇所とゴールとみなす箇所が同じでしたが、ページ上部の見出しをテストしてゴールは同一ページの下のほうにあるボタンという場合は、上記とはまた異なるコードになることに注意してください。

Googleウェブサイトオプティマイザーでテストを設定する（続き）

本番環境へ公開する

ここまでのタグ埋め込みがすべて完了したら、そのHTMLを本番環境（公開サーバー）にアップロードします。本番環境へ公開しただけではテストは開始されませんので、安心して公開してください。

タグが正常に埋まっているかを確認する

ファイルを公開サーバーにアップロードしたら、Googleウェブサイトオプティマイザーの管理画面のさきほどのページに戻って、［ページを検証］ボタンをクリックします。

すると、Googleウェブサイトオプティマイザーが、公開サーバーにアクセスして、ページに埋め込まれたJavaScriptを検証します。コードが正しく埋め込まれていれば、次のようなポップアップが表示されます。

問題がなければ、［続行］ボタンをクリックして次に進みます。

テストパターンを入力する

すると、多変量ページの設定画面のステップ3「パターンを作成する」の画面が表示されます。

ここでテストパターンをGoogleウェブサイトオプティマイザーの管理画面上に入力します。

画面では、「ページのセクション」の欄に、さきほどHTMLを編集して指定したセクションの名前（ここでは「Mongon」）が表示されているはずです。そのセクションの「オリジナル」として、HTMLに標準で書いていた文言がすでに認識されているはずです（ここでは「販売ショップ 価格一覧」）。

ここで［新しいパターンを追加］をクリックすると、次のように新しいパターン名を追加するポップアップが表示されるので、まずわかりやすいパターン名をつけましょう。ここでは「価格を確認する」というパターン名をつけました。

パターン名を入力して［追加］ボタンをクリックすると、テストパターン（標準のパターンと差し替えるHTML）を入力できる状態になります。

今回は差し替えるのはテキスト部分だけですから、パターンBとしてテストする文言である「価格を確認する」という文言を入力します。

入力したら、画面の下にある［保存して次へ］ボタンをクリックして次に進みます。

テストを開始する

すると、多変量ページの設定画面のステップ4「確認して実行する」の画面が表示されます。テストページやコンバージョンページのURLとテストの内容を確認しましょう。

このページの下部にある［このテストを今すぐプレビュー］のリンクをクリックすると、次のようなポップアップが出て、テストがちゃんと機能するか確認するできます。テストを開始する前に、必ず確認しておきましょう。

プレビューで問題なく動作することを確認したら、管理画面のページ最下部にある［今すぐ実行］ボタンをクリックします。これでテストが開始されます。

テストを開始したら、しばらく時間をおいてから管理画面をチェックして、ちゃんと数値が取れているかどうか確認しましょう。

テストを停止する

テストを開始してから、設定を間違えていることに気づいてテストを停止したい場合もあるでしょう。

その時には、Googleウェブサイトオプティマイザーの管理画面で［一時停止］のリンクをクリックしましょう。これでとりあえずテストを止められます。「一時停止」を利用すればまた同じテストを、データが溜まった状態から再開できます。

結果からさらにユーザー理解をする

テストを実施するとその結果が気になりますが、Googleウェブサイトオプティマイザーはデータがたまって統計的に有意な結果が出たら、次のような形で知らせてくれます。そのため、蓄積されたデータを自分たちで計算して分析するといった作業は必要ありません。

この結果から、ユーザーはなぜこちらのパターンを選んだのかということを考えましょう。これによりユーザー理解をさらに深めることができ、次回以降より精度の高い仮説をたてられるようになります。

今回は文言を変更するテストを例として紹介しました。この形であれば画像を作る必要もありません。まずは文言を変更するなど簡単にできるところからテストを開始してみてはいかがでしょうか。

参考資料

• リンクがクリックされたときにコンバージョンをカウントする（ウェブサイト オプティマイザー ヘルプ）
• ウェブサイト オプティマイザー ヘルプ