2023 年 9 月 30 日を過ぎると、Google オプティマイズはご利用いただけなくなります。この日までは引き続きテストとパーソナライズを実施可能です。詳細

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

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

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

前提条件

プロパティとビューを持つユニバーサルアナリティクスアカウント
上記のアナリティクスプロパティにリンクされたコンテナを含むオプティマイズアカウント
<amp-analytics> および <amp-experiment> コンポーネントの使用経験

Accelerated Mobile Pages（AMP）でのテスト

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

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>

オプティマイズのコンテナで A/B テストを作成します。A/B テスト作成の際に入力したテスト名は控えておきましょう。後で EXPERIMENT_NAME として参照します。
<amp-experiment> コンポーネントにパターンを作成し、それぞれの比重を設定します。対応するパターンをオプティマイズでも作成し、それぞれ比重を設定します。
パターンの作成にオプティマイズのビジュアルエディタを使用することも可能です。
オプティマイズでテストの目標を設定します。目標は、リーダーを特定し、各パターンのパフォーマンスをオリジナルと比較するのに使用される統計モデルに、情報を供給する役割を持ちます。
オプティマイズで、目的の AMP ドキュメントをターゲットにする URL ベースのターゲット設定ルールを作成します。この設定はオプティマイズの動作には影響しませんが、参照用の情報として使用できます。
オプティマイズでテストを開始し、テストの情報パネルに表示されているアナリティクステスト ID（英数字 23 文字から成る「q0AKJL-XRuCmApEIQelcCg」のような文字列）を控えます。アナリティクステスト ID は後で EXPERIMENT_ID として参照します。

適切な <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_ID、EXPERIMENT_ID、EXPERIMENT_NAME は、ここまでの手順で得られた値にそれぞれ置き換えます。

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

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

.selector {
  property: value
}

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

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

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

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

前提条件

Accelerated Mobile Pages（AMP）でのテスト

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

関連資料