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

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

この記事では、<amp-pixel> の代わりに Google オプティマイズを使って AMP のテストを測定およびレポート化する方法を解説します。この設定を完了すると、Google アナリティクスの目標やコンバージョンを使ってオプティマイズのベイズ統計モデルに情報を供給し、オプティマイズにリーダーを選ばせることができるようになります。この記事は、ユニバーサル アナリティクス アカウントにリンクしたプロパティについての内容です。オプティマイズは現時点では、Google アナリティクス 4 アカウントを使った AMP テストに未対応です。

前提条件

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 テスト作成の際に入力したテスト名は控えておきましょう。後で EXPERIMENT_NAME として参照します。
  3. <amp-experiment> コンポーネントにパターンを作成し、それぞれの比重を設定します。対応するパターンをオプティマイズでも作成し、それぞれ比重を設定します。

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

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

    例 1: <amp-experiment>

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

    例 2: <amp-analytics>

    <amp-analytics type="gtag" data-credentials="include">
      <script type='application/json'>
      {
        "vars": {
          "gtag_id": "<GA_MEASUREMENT_ID>",
          "config" : {
            "<GA_MEASUREMENT_ID>": {"groups": "default"}
          },
          "xid": "<EXPERIMENT_ID>",
          "xvar": "VARIANT(<EXPERIMENT_NAME>)"
        },
        "extraUrlParams": {"exp": "${xid}.${xvar}"}
      }
      </script>
    </amp-analytics>
    

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

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

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

.selector {
  property: value
}

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

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

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