このガイドでは、analytics.js を利用してウェブテストを実施する方法について解説します。
概要
Google アナリティクスのウェブテスト フレームワークでは、プロパティに対するさまざまな変更案やパターンをテストし、特定の目標に対するそれぞれの成果を確認できます。たとえば目標完了数の増加や直帰率の低下を目標に設定できます。これにより、ウェブサイトの利用状況に直接どのような影響があるかを確認し、導入する価値のある変更案を割り出すことができます。
このガイドは、ウェブテストの機能のリファレンスに記載されているとおり、高度な要件に対処しなければならない方や、Google アナリティクスのウェブテストをサービスに組み込む開発者の方を対象としています。
標準設定
ウェブテストを初めてご利用になる方は、ウェブサイトで標準設定を使用することをおすすめします。設定手順のほとんどは Google アナリティクスの管理画面で完了できます。analytics.js で利用できる必要な JavaScript コードも取得できます。
この設定手順では、クライアント側のリダイレクトによってテスト対象のユーザーにパターンが表示されます。ウェブテストのメリットとウェブサイトでウェブテストを設定する方法については、以下の Google アナリティクス ヘルプセンターの該当するセクションをご覧ください。
- ウェブテストのメリット（ヘルプセンター） - ウェブテストの概要と機能について説明しています。
- ウェブテストの実施（ヘルプセンター） - ウェブテストの準備と設定の方法や進捗状況の確認方法を説明します。
ブラウザ用の設定
パターンの選択をクライアント側のブラウザで行う設定の場合は、ウェブテスト JavaScript API を活用することで、analytics.js ライブラリの使用時にパターンの選択やユーザーのウェブテストの値の保管といった作業の大部分を行うことができます。
このタイプの設定は、JavaScript でページの DOM や CSS を改変して変更案をテストする場合によく使用されます。つまり、ユーザーごとのパターンの選択や変更案の表示は、すべてクライアント側のブラウザで行われます。たとえば以下の要素のパターンをテストするとします。
- ページの画像
- ボタンの色
- フォントサイズ
- ページ コンテンツ
ユーザーごとにパターンを選択するには、ユーザーがテスト対象になるたびに以下の手順を実行する必要があります。
- experiment クエリ パラメータを使用して
ウェブテスト JavaScript API クライアントを読み込み、ページ上で実行するテストの ID を指定します。 chooseVariationメソッドを呼び出します。- chooseVariation メソッドからの
戻り値を分析し、適切な措置を講じます（画像やボタンの色の変更など）。 - analytics.js ライブラリを読み込み、少なくとも 1 回のヒット（ページビューやイベントなど）を Google アナリティクスに送信します。
例
以下の簡単な例では、ユーザーごとにパターンを選択し、対応する画像を表示します。
<html>
<head>
<!-- 1. Load the Content Experiments JavaScript Client -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YByMKfprRCStcMvK8zh1yw"></script>
<script>
var image_variations = [
'original.png',
'variation1.png',
'variation2.png'
]
// 2. Choose the Variation for the User
var variation = cxApi.chooseVariation();
window.onload = function(){
// 3. Evaluate the result and update the image
exp_image = document.getElementById('hero_image');
exp_image.src = image_variations[variation];
}
</script>
<!-- 4. Load analytics.js and send a hit to Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<h1>Welcome</h1>
<img id="hero_image"/>
<p>Welcome to my experiment!</p>
</body>
</html>
サーバーサイドの設定
このタイプの設定方法は主に以下のような場合に使用します。
- 動的コンテンツを含むウェブサイトでテストを実施する場合。
- ウェブサイト画面以外の、目標に影響する変更案をテストする場合（ユーザーに戻されるデータベースのクエリ結果のセットなど）。
- Google アナリティクス ウェブテストをサービスに組み込む場合（コンテンツ管理プロバイダなど）。
- 独自の最適化プラットフォームを用いてウェブテストを管理する場合。
この場合、パターンの選択はサーバーで行われますが、ユーザーにそのパターンが表示されるのはブラウザであり、analytics.js によって Google アナリティクスにデータが送信される場所もブラウザになります。そのため、テスト対象となったユーザーのデータを Google アナリティクスに適切に送信できるよう、サーバーとクライアント間での連携が必要になります。
Google アナリティクスに送信する値は以下のとおりです。
- テスト ID - ユーザーに表示されたウェブテストの ID。
- 選択されたパターン - ユーザーに表示されたパターンのインデックス。
analytics.js の set メソッドを使用すると、ユーザーに表示されたパターンを Google アナリティクスに送信できます。
ウェブテストの値を設定するには、テスト対象となったユーザーにパターンが表示されるたびに以下の手順を実行する必要があります。
- analytics.js ライブラリを読み込みます。
- テスト ID
expIdを設定します。 - テストパターン
expVarに選択したパターンを設定します。 - 少なくとも 1 回のヒット（ページビューやイベントなど）を Google アナリティクスに送信します。
サーバー側の設定で必要な JavaScript を動的に記述して、テスト ID とパターンの番号をユーザーに表示される最終ページに設定する必要があります。これにより、パターンのページがユーザーのブラウザに表示された際に、ユーザーのウェブテストの値が設定され、analytics.js からヒットとともに Google アナリティクスに送信されるようになります。
例
通常はユーザーごとに、ページでウェブテストが実施されているかどうかをサーバー上で確認し、実施されている場合はどのパターンを表示するかを決定します。ただし PHP を使用した以下の例では、簡略化するためにテスト ID とパターンの番号がページの最初で定義されています。
<?php // The Id of the experiment running on the page $experimentId = 'YByMKfprRCStcMvK8zh1yw'; // The variation chosen for the user $chosenVariation= 2; ?>
テスト ID とパターンの番号をユーザーに割り当てたら、ウェブテストの値の設定に必要な JavaScript 文字列にウェブテストのデータを動的に書き込むためのロジックを追加します。
<html>
<head>
<script>
// 1. Load analytics.js -->
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
// 2. Set the chosen variation for the User (Dynamically in this case) -->
<?php
<<<HTML
ga('set', 'expId', '$experimentId'); // The id of the experiment the user has been exposed to.
ga('set', 'expVar', '$chosenVariation'); // The index of the variation shown to the user.
HTML;
?>
// 3. Send a pageview hit to Google Analytics.
ga('send', 'pageview');
</script>
</head>
<!-- Begin body -->
PHP スクリプトの実行が完了したら、ウェブテストの値がページに出力されます。ページ上の JavaScript がブラウザに表示されると、ウェブテストの値がすべて設定され、analytics.js ライブラリからページビュー ヒットとともに送信されます。
ウェブテスト JavaScript API リファレンス
ウェブテスト JavaScript API の機能は以下のとおりです。
- ユーザーに表示するパターンの選択 - クライアント側の設定の場合、この API を利用すると、新規ユーザーに表示するパターンの選択や、すでにユーザーに表示されたパターンの取得が簡単になります。
- ユーザーに表示するために選択たパターンの設定 - ウェブテストの選択をサーバー側で処理し、選択されたパターンのデータをクライアントから Google アナリティクスに送信したい場合に便利です。
- ユーザーに表示するために選択されたパターンの取得 - これまでにユーザーに表示され、保管されたパターンのデータを取得できます。
API クライアントの読み込み
ウェブテスト JavaScript API クライアントをウェブテストのページで読み込むには、そのページに以下のような JavaScript コードを追加します。
<script src="//www.google-analytics.com/cx/api.js"></script>
または、以下のように experiment クエリ パラメータを使用してテスト ID を指定し、該当のウェブテストの情報を読み込むこともできます。
<script src="//www.google-analytics.com/cx/api.js?experiment=YByMKfprRCStcMvK8zh1yw"></script>
クライアントが同期して読み込まれ、cxApi という名前のグローバル オブジェクトが作成されます。cxApi オブジェクトを使用してパターンを選択し、ウェブテストの値を設定、取得します。
cxApi オブジェクト定数
一般的なパターンを定義するための定数は以下の 3 つです。
cxApi.ORIGINAL_VARIATION- ウェブテストの元のコンテンツを示します。cxApi.NO_CHOSEN_VARIATION- ユーザーに表示するパターンが選択されていないことを示します。cxApi.NOT_PARTICIPATING- ユーザーがウェブテストの対象ではないことを示します。
cxApi オブジェクト メソッド
chooseVariation
ユーザーに表示するパターンを選択します。
すでにユーザーがテスト対象となっている場合は、ユーザーに表示されたパターンの番号が chooseVariation によって返されます。ただし、ウェブテストが終了しているか、該当のパターンが無効になっている場合は除きます。その場合は、元のコンテンツが指定された cxApi.ORIGINAL_VARIATION が返されます。新規ユーザーがウェブテストの候補となった場合は、設定済みのテスト対象の割合に基づき、そのユーザーをウェブテストの対象とするかどうかが判断されます。ユーザーが対象となった場合は、ウェブテストの重み付けによって表示されるパターンが無作為に選択され、Cookie に値が書き込まれます。
chooseVariation では、ユーザーに表示するパターンを選択するプロセスを簡略化できます。このメソッドは常にパターンを返し、ユーザーがウェブテストの対象でない場合は cxApi.ORIGINAL_VARIATION を返します。一方、getChosenVariation では、以前にユーザーのために選択されたパターンを確認できます。このとき、これまでに一度もパターンが選択されていない、またはユーザーがウェブテストの対象から除外されている、などの情報も示されます。
cxApi.chooseVariation();
戻り値
Integer- 選択されたパターンのインデックス。
例
ユーザーに表示するパターンを選択します。
variationNumber = cxApi.chooseVariation();
setChosenVariation
ウェブテストの対象となったユーザーに表示するために選択されたパターンを設定し、Cookie に値を書き込みます。
cxApi.setChosenVariation(chosenVariation, opt_experimentId);
パラメータ
Integer chosenVariation- ユーザーに表示されたパターンのインデックス。またはcxApi.NOT_PARTICIPATINGとなります。String opt_experimentId- 選択されたパターンを設定するためのテスト ID。このパラメータがない場合は、クライアントの読み込み時に最初に指定されたテストを使用します。
例
ユーザーに表示するために選択されたパターンを設定します。
cxApi.setChosenVariation(2, ‘YByMKfprRCStcMvK8zh1yw’);
クライアントの読み込み中にテスト ID を指定する際、ユーザーに表示するために選択されたパターンを設定します。
cxApi.setChosenVariation(2);
getChosenVariation
ユーザーに表示するためにこれまで選択されたパターンを取得します（ある場合）。
cxApi.getChosenVariation(opt_experimentId);
パラメータ
String opt_experimentId- 選ばれたパターンを取得するためのテスト ID。このパラメータがない場合は、クライアントの読み込み時に最初に指定されたテストを使用します。
戻り値
Integer- ユーザーに表示するために選択されたパターンのインデックス。cxApi.NO_CHOSEN_VARIATIONが返された場合、新規ユーザーがテストの対象になったことを示します。その場合、そのユーザーに対する処理（パターンの選択など）を決定する必要があります。cxApi.NOT_PARTICIPATINGが返された場合、そのユーザーは、ウェブテストの対象として選択されなかったリピーターであることを示します。
例
ユーザーに表示するために選択されたパターンを取得します。
variationNumber = cxApi.getChosenVariation(‘YByMKfprRCStcMvK8zh1yw’);
クライアントの読み込み中にテスト ID を指定する際、ユーザーに表示するために選択されたパターンを取得します。
variationNumber = cxApi.getChosenVariation();
ウェブテスト用 Cookie
この API には、Cookie の保存方法を状況に合わせて変更できるオプションの呼び出しがいくつか含まれています。
setDomainName
ウェブテスト用の Cookie を書き込む際に使用するドメイン名を設定します。analytics.js のトラッキング コードで指定されているものと同じ値を設定する必要があります。
cxApi.setDomainName(domainName);
パラメータ
String domainName- 使用するドメイン名。
setCookiePath
ウェブテスト用の Cookie を書き込む際に使用する Cookie パスを設定します。analytics.js のトラッキング コードで指定されているものと同じ値を設定する必要があります。
cxApi.setCookiePath(cookiePath);
パラメータ
String cookiePath- 使用する Cookie パス。
setAllowHash
ウェブテスト用の Cookie を書き込む際に使用する Cookie ドメインのハッシュ値を設定します。analytics.js のトラッキング コードで指定されているものと同じ値を設定する必要があります。
cxApi.setAllowHash(allowHash);
パラメータ
Boolean allowHash- ドメイン ハッシュを許可するかどうかを指定します。