サーバーサイド テスト

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

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

テストのターゲティング設定はサーバーサイド コードによって行われるため、ここで入力した内容は使用されませんが、オプティマイズの設定上、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 アナリティクスの測定コードを追加する

テストごとに experiment_impression イベントを送信します。

gtag.js を使った実装例:

<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){window.dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>
</head>
<body>
<!-- Content -->
  <script>
    gtag('event', 'experiment_impression', {​
      'experiment_id': '$experimentId',
      'variant_id': '$experimentId.$variantid',
      'send_to': 'GA_MEASUREMENT_ID',
    });
  </script>
</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（色もフォントサイズもオリジナルのまま）を選択する場合、コードは次のようになります。

gtag('event', 'experiment_impression', {​
'experiment_id': '$experimentId',
'variant_id': '$experimentId.0-0',
'send_to': 'GA_MEASUREMENT_ID',
});

複数のサーバーサイド テスト

複数のサーバーサイド テストでヒットを送信するには、複数の experiment_impression イベントを送信します。

gtag('event', 'experiment_impression', {​
'experiment_id': '$experimentId1',
'variant_id': '$experimentId1.1-0',
});

gtag('event', 'experiment_impression', {​
'experiment_id': '$experimentId2',
'variant_id': '$experimentId2.2-0',
});