オプティマイズで AMP のテストを測定する

Accelerated Mobile Pages(AMP)では、アクティビティの測定に <amp-analytics>、テストの実施に <amp-experiment> など、専用のコンポーネントを使用します。AMP ドキュメントでのテスト実施に <amp-experiment> を使用している場合、Google オプティマイズを使って各パターンのパフォーマンスを測定し、指定した目標を基準にリーダーを選ぶことができます。

この記事では、<amp-pixel> の代わりに Google オプティマイズを使って AMP のテストを測定し、レポートする方法について説明します。この設定を完了すると、Google アナリティクスの目標に基づいてオプティマイズのベイズ統計モデルに情報を提供し、オプティマイズで自動的にリーダーを選ぶことが可能になります。

前提条件

Accelerated Mobile Pages(AMP)でのテスト

オプティマイズで <amp-experiment> コンポーネントのパフォーマンスを測定するテストを作成する方法は次のとおりです。

  1. AMP ドキュメントの <HEAD> 内に <amp-experiment> および <amp-analytics> コンポーネントが含まれることを確認します。たとえば、次のように記述されています。
    <script async custom-element="amp-analytics"
            src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async custom-element="amp-experiment"
            src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
    
  2. オプティマイズのコンテナで A/B テストを作成します。A/B テスト作成の際に入力したテスト名は控えておきましょう。後で experimentName として参照します。
  3. <amp-experiment> コンポーネントにパターンを作成し、それぞれの比重を設定します。対応するパターンをオプティマイズでも作成し、それぞれ比重を設定します。

    パターンの作成にオプティマイズのビジュアル エディタを使用することも可能です。

  4. オプティマイズでテストの目標を設定します。この目標に基づいて統計モデルに情報が提供され、リーダーの特定と、オリジナルと各パターンのパフォーマンスの比較が行われます。
  5. オプティマイズで、AMP ドキュメントをターゲットとする URL ターゲティング ルールを作成します。この設定はオプティマイズの動作には影響しませんが、参照用の情報として使用できます。
  6. オプティマイズでテストを開始し、テストの情報パネルに表示されているアナリティクス テスト ID(英数字 23 文字から成る「q0AKJL-XRuCmApEIQelcCg」のような文字列)を控えます。アナリティクス テスト ID は後で gaExperimentID として参照します。
  7. 適切な <amp-experiment> および <amp-analytics> コンポーネントを AMP ドキュメントにコピーします。

    例 1: <amp-experiment>

    <amp-experiment>
      <script type="application/json">
        {
          "experimentName": {
            "sticky": true,
            "variants": {
              "0": 33.4,
              "1": 33.3,
              "2": 33.3
            }
          }
        }
      </script>
    </amp-experiment>
    

    例 2: <amp-analytics>

    <amp-analytics id='analytics1' type='googleanalytics'>
    <script type='application/json'>
    {
      "vars": {
        "account": "gaPropertyID"
      },
      "requests": {
         "experiment": "${pageview}&xid=${xid}&xvar=${xvar}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "experiment",
           "vars": {
             "xid": "gaExperimentID",
             "xvar": "VARIANT(experimentName)"
           }
        }
      }
    }
    </script>
    </amp-analytics>
    

    gaPropertyIDgaExperimentIDexperimentName は、ここまでの手順で得られた値にそれぞれ置き換えます。

  8. オプティマイズのコンテナのページまたはテスト詳細ページでリアルタイムのアクティブ ユーザー数をチェックし、AMP がテスト トラフィックを受信していることを確認します。

例: オプティマイズの CSS コードエディタを使用する

オプティマイズの CSS コードエディタを使用すると、各 CSS ルールに適切な AMP プレフィックスを追加して、パターンのスタイルを変更できます。たとえば CSS コードエディタが "variant 1" について以下を出力するとします。

.selector {
  property: value
}

この場合は、セレクタの前に次のプレフィックスを追加する必要があります。

body[amp-x-[experimentName]="1"] .selector {
  property: value
}

experimentName は上記の手順 2 の値に置き換えてください。