サーバーサイド テスト

Google オプティマイズのテストを通常の方法で実装した場合、配信するパターンの決定は、ブラウザがウェブページ内で実行する JavaScript によって行われます。この方式のテストは、実装が容易な反面、扱える内容はクライアントサイドの変更(たとえばページ内要素のスタイルや配置の変更)に限られます。

クライアントサイド テストであればオプティマイズ側で自動的に処理されるタスクも、サーバーサイドのテストではコード内で記述する必要があります。たとえば、ターゲット オーディエンスかどうかを判定し、常にユーザーに応じた最適なパターンを配信する仕組みも、コード側で賄うことになります。オプティマイズのインターフェースを通して行うのは、テストの作成、目標の設定、パターンの作成、レポートの参照のみです。

この記事では、ご自身のサーバー、またはその他のインターネット接続された端末で実行するテストのデータを、オプティマイズを使ってレポート化する方法を解説します。

この方法でサーバーサイド テストを実施する場合、以下の処理をご自身で管理する必要があります。

  • コンテンツの配信
  • テスト対象の判定
  • パターンの割り当て
  • ユーザーごとの配信パターンの固定
  • 各パターンでユーザーが発生させたヒット(例: ページビュー ヒット)の Google アナリティクスへの送信

ウェブページの各パターンに対してサーバーサイド テストを実施するまでの流れは次のとおりです。

  1. オプティマイズでテストを作成する
  2. テストの目標を設定する
  3. テストのターゲット設定を行う
  4. パターンを作成する
  5. テストを開始する
  6. テスト ID を取得する

テスト実施中は以下を行います。

  1. テスト ID を設定し、サーバーから適切なパターンを取得する
  2. 各パターンに Google アナリティクスのトラッキング コードを追加する

オプティマイズでテストを作成する

この方法では、A/B テスト多変量テスト(MVT)の作成と実施が可能です。

A/B テストを作成する手順は次のとおりです。

  1. オプティマイズ アカウントを開きます。
  2. コンテナを選択します。
  3. [テストを作成] をクリックします。
  4. テスト名を入力します。
  5. URL 欄の内容は無視されます。プレースホルダとして、サイト上に存在しない URL を入力してください。
  6. [A/B テスト] を選択します。
  7. [作成] をクリックします。

テストの目標を設定する

設定した目標は、テスト結果の測定に使用されます。

  1. テストのページで、[設定] セクションの [目標] をクリックします。
  2. [テスト目標を追加] をクリックし、メインの目標を選択します。
  3. [保存] をクリックします。

テストのターゲット設定を行う

テストのターゲット設定はサーバー側のコードによって行われるため、ここで入力した内容は使用されませんが、オプティマイズの設定上、URL ルールを作成しておく必要があります。

  1. テストのページの [設定] で [ターゲット設定] をクリックします。
  2. [ルールを作成] をクリックします。
  3. [URL] をクリックします。
  4. マッチタイプとして [次と一致] を選択し、[値] 欄には「SERVER_SIDE」と入力します。ここに URL や「http」「https」で始まる文字列を入力してしまうと、オプティマイズによるタグ設定済みのサイトの場合、サーバーサイド テストが実施されません。

    ターゲット設定の URL の値

  5. [追加] をクリックします。
  6. [保存] をクリックします。

パターンを作成する

作成するパターンごとに、次の手順を繰り返します。

  1. テストのページで、[パターン] セクションの [新規パターン] をクリックします。
  2. パターン名(例: 「パターン 1」)を入力します。
  3. [追加] をクリックします。
  4. [保存] をクリックします。

テストを開始する

テストのページで [テストを開始] をクリックします。

テストの開始

テスト ID を取得する

テスト ID は、テスト詳細ページの右側のパネルに表示されます。

テスト ID

テストを実装する

テストはそれぞれ固有のテスト ID を持ち、オリジナルを含めて 2 つ以上のパターンを含みます。各パターンにはパターン ID(0 から始まるインデックス)が付与されます。たとえば、あるページに計 6 つのパターンがある場合、オリジナルを ID 0 として、各テストパターンに 1~5 の ID が付与されます。パターン ID の順序は、UI 内の記載順どおりです。

テスト ID を設定し、サーバーから適切なパターンを取得する

テスト実施中のウェブページにユーザーがアクセスすると、サーバーはパターンを 1 つ選択してブラウザに返します。ユーザー エクスペリエンスの一貫性を高めるには、ユーザーごとに表示するパターンを固定することが望ましいため、それが可能な仕組みでパターン割り当てを行うことをおすすめします(アルゴリズムにより ID をハッシュ化するなど)。また、1 人のユーザーの同一セッション中に、同じテストのパターンが複数表示された場合、そのセッションはテストのカウント外となります。次のコードは、3 つのパターンを持つテストで 1 パターンを選択する場合の例です。

<?php
// Sets the ID of the experiment on variations of this web page.
$experimentId = '16iQisXuS1qwXDixwB-EWgQ';

// Randomly picks a variation for the user.
$variationId = rand(0, 2);
?>

各パターンに Google アナリティクスのトラッキング コードを追加する

以下を行うため、各パターンに Google アナリティクスのトラッキング コードを追加します。

  1. analytics.js ライブラリを読み込む
  2. トラッカーを作成する
  3. テスト ID とパターン ID を設定する
  4. 少なくとも 1 件、ヒット(ページビューなど)を Google アナリティクスに送信する

例:

<html>
<head>
<script>
  // 1. Load the analytics.js library.
  (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');

  // 2. Create a tracker.
  ga('create', 'UA-XXXXX-Y', 'auto');

<?php
<<<HTML
  // 3. Set the experiment ID and variation ID.
  ga('set', 'exp', '$experimentId.$variationId');
HTML;
?>
  // 4. Send a pageview hit to Google Analytics.
  ga('send', 'pageview');
</script>
</head>
<body>
<!-- Content -->
</body>
</html>

多変量テストのヒットの送信

多変量テスト(MVT)では、複数の要素(または「セクション」)をテストし、相互の影響を調査します。A/B テストのようにどのパターンが最も効果的か割り出すのではなく、パターンの最も効果的な組み合わせを割り出すのが MVT の特徴です。例として、「色」と「フォントサイズ」の 2 つのセクションを持つ MVT について考えてみましょう。「色」セクションには赤、緑、青の 3 種類のテストパターンが、「フォントサイズ」セクションには 10 pt と 12 pt の 2 種類のテストパターンがあるものとします。

この場合、サーバーは各セクションについて 1 つずつパターンを選択し、その情報を Google アナリティクスに報告する必要があります。実際の流れは、パターンの設定を除けば A/B テストと変わりません。

MVT のパターンを報告する際は、各セクションの選択パターンを「-」で区切ります。

[variant for section 1]-[variant for section 2]-...-[variant for section N]

次のリストは、上記の MVT で選択し得るパターン(の組み合わせ)を 3 種類示したものです。前述のとおり、「色」セクションにはオリジナルを含めて 4 つのパターンがあり(0 = オリジナル、1 = 赤、2 = 緑、3 = 青)、「フォントサイズ」セクションにはオリジナルを含めて 3 つのパターンがあります(0 = オリジナル、1 = 10 pt、2 = 12 pt)。

  • 「0-0」: 色もフォントサイズもオリジナルのまま
  • 「1-0」: 色は赤に変更、フォントサイズはオリジナルのまま
  • 「2-1」: 色は緑に、フォントサイズは 10 pt に変更

テストにおいてパターン 0-0(色もフォントサイズもオリジナルのまま)を選択する場合、コードは次のようになります。

ga('set', 'exp', '$experimentId.0-0');