サーバーサイド テスト

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

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

この記事では、ご自身のサーバーやその他のインターネット接続されたデバイスで実行するテストのデータを、オプティマイズを使ってレポート化する方法について解説します。サイトでご使用のアナリティクス測定コードを選択してください。

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

  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. [テスト目標を追加] をクリックし、メインの目標を選択します。

テストのターゲティングを設定する

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

テストのターゲティングを設定する手順:

  1. テストのページで、[ターゲティングとパターン] セクションの [パターンを追加] をクリックします。
  2. パターン名（「パターン 1」など）を入力し、[完了] をクリックします。
  3. [ページ ターゲティング] 欄の [URL のルールを追加] をクリックします。
  4. マッチタイプには [次と等しい] を選択し、値には「SERVER_SIDE」と入力します。URL や「http」または「https」で始まる文字列は入力しないでください。これらを入力すると、オプティマイズのタグが設定されているサイトではサーバーサイド テストが実行されなくなります。

    ターゲティング URL の値

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

パターンを作成する

パターンを作成する手順:

  1. テストのページで、[パターン] セクションの [+ パターンを追加] をクリックします。
  2. パターン名（「パターン 1」など）を入力し、[完了] をクリックします。
  3. [追加] をクリックします。

テストを開始する

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

テストの開始

テスト ID を取得する

テスト ID は、[測定と目標] セクションの [Google アナリティクス] 欄で確認できます。

テスト 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 variants of this web page.
$experimentId = '16iQisXuS1qwXDixwB-EWgQ';

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

各パターンに Google アナリティクスの測定コードを追加する

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

多変量テスト（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（色もフォントサイズもオリジナルのまま）を選択する場合、コードは次のようになります。