Measure AMP experiments with Optimize

Accelerated Mobile Pages (AMP) use special components like <amp-analytics> to measure activity and <amp-experiment> run experiments. If you use <amp-experiment> to run experiments on AMP documents, you can use Google Optimize to report on the performance of your variants and to select a leader based on your objectives.

This article describes how to use Google Optimize to measure and report on AMP experiments instead of <amp-pixel>. When configured, you can use Google Analytics goals to inform Optimize's Bayesian statistical model and allow Optimize to choose a leader.

Prerequisites

An Analytics account with a property and a view.
An Optimize account with a container linked to the Analytics property above.
Experience with the <amp-analytics> component.
Experience with the <amp-experiment> component.

Experiment on Accelerated Mobile Pages (AMP)

To create an Optimize experiment to measure the performance of an <amp-experiment> component:

Confirm that you have the <amp-experiment> and <amp-analytics> components in the <HEAD> of your AMP document. For example:

<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>

Create an AB test in your Optimize container. Note the experiment name you entered when creating the A/B test. It will be later referred to as EXPERIMENT_NAME.
Create variants in your <amp-experiment> component and set their weights. Create matching variants in Optimize and set their weights.
Optionally, you can use the Optimize visual editor to help create variants.
Set your experiment's objective(s) in Optimize. Objectives inform the statistical model used to pick leaders and determine how your variants perform against your original.
Create an URL targeting rule in Optimize for the AMP document that you wish to target. This isn't used by Optimize, but can be used for reference.
Start your experiment in Optimize and note the Analytics Experiment ID, a 23-character alphanumeric value (e.g. q0AKJL-XRuCmApEIQelcCg) found in the Experiment information panel in Optimize. The Analytics Experiment ID will be later referred to as GA_EXPERIMENT_ID.

Paste the correct <amp-experiment> and <amp-analytics> components into your AMP document.

Example 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>

Example 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": "<GA_EXPERIMENT_ID>",
      "xvar": "VARIANT(<EXPERIMENT_NAME>)"
    },
    "extraUrlParams": {"exp": "${xid}.${xvar}"}
  }
  </script>
</amp-analytics>

Replace >GA_MEASUREMENT_ID, GA_EXPERIMENT_ID, and EXPERIMENT_NAME with the values from the steps above.

Confirm that your AMP is receiving experiment traffic by checking the real-time active users on the Optimize container page or the experiment details page.

Example: Use the Optimize CSS code editor

You can use the Optimize CSS code editor to change the style of a variant by adding the appropriate AMP prefix to each CSS rule. For example, if the CSS code editor outputs the following for "variant 1":

.selector {
  property: value
}

you need to add the following prefix before the selector:

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

Replace experimentName with the value from step 2 above.

Measure AMP experiments with Optimize

Prerequisites

Experiment on Accelerated Mobile Pages (AMP)

Example: Use the Optimize CSS code editor

Related resources