amp-experiment

简介

amp-experiment 组件允许在 AMP 文档上执行用户体验实验并收集结果数据。例如，这对于在您的 AMP 中进行新功能的 A/B 测试非常有用，但您可以测试任意数量的变体。

在此示例中，我们使用 Google Analytics 来跟踪实验。Google Analytics 要求通过索引变量指定不同的变体。但是，amp-experiment 对如何指定这些变体没有意见。

设置

导入 amp-experiment 组件。

<script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>

我们使用 amp-analytics 来衡量实验结果。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

通过使用 body[amp-x-name-of-experiment="nameOfVariant"] 来设置实验的不同变体的样式。

<style amp-custom>
  body[amp-x-button-color-experiment="0"] .button-color-experiment {
    background-color: yellow;
    color: black;
  }
  body[amp-x-button-color-experiment="1"] .button-color-experiment {
    background-color: red;
  }
  body[amp-x-button-color-experiment="2"] .button-color-experiment {
    background-color: blue;
  }
</style>

基本用法

在 JSON 对象内的 amp-experiment 内配置实验。在每个实验中使用 variants 来声明有多少百分比的用户将成为实验变体的一部分。变体的总和必须是一个 <= 100 的数字。如果总和 < 100，则使用默认行为。用户基于 0 到 100 之间生成的随机数属于其中一个变体。

有关变体的更多详细信息，请阅读官方文档。多个实验可以在同一个 AMP 文档上并行运行，并具有各自的变体集。一个 AMP 文档最多只能有一个 amp-experiment 元素。

<amp-experiment>
  <script type="application/json">
    {
      "button-color-experiment": {
        "variants": {
          "0": 30,
          "1": 30,
          "2": 30
        }
      }
    }
  </script>
</amp-experiment>

示例设置

我们使用一个按钮，其中 30% 的用户的背景将为黄色，30% 的用户的背景将为红色，30% 的用户的背景将为蓝色，其余 10% 的用户的按钮背景将为默认颜色，在本示例中为白色。

<button class="button-color-experiment">Click here</button>

使用 amp-pixel 进行报告

使用 amp-pixel 衡量实验结果。

<amp-pixel src="https://example.com/track/?xname=button-color-experiment&xvar=VARIANT(button-color-experiment)"></amp-pixel>

使用 amp-analytics 进行报告

使用 amp-analytics 衡量实验结果。分配的变体可作为 URL 替换变量使用：VARIANT(name-of-the-experiment)。您可以在开发人员工具的网络选项卡中检查分析请求。

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-73836974-1"
      },
      "requests": {
        "experiment": "${pageview}&xid=${experiment}&xvar=${variant}"
      },
      "triggers": {
        "default pageview": {
          "on": "visible",
          "request": "experiment",
          "vars": {
            "experiment": "W4kYemYmQBSTIYNpoezCmg",
            "variant": "VARIANT(button-color-experiment)"
          }
        }
      }
    }
  </script>
</amp-analytics>

开发技巧

您可以通过将 amp-x-experiment-name 添加到 AMP 页面 URL 来强制实验处于特定变体中。

#amp-x-button-color-experiment=0
#amp-x-button-color-experiment=1
#amp-x-button-color-experiment=2

请注意，在选择实验后，您需要手动重新加载页面，因为 amp-experiment 仅在页面加载时进行评估，并且哈希更改不会触发重新加载。

需要进一步解释？

如果此页面上的解释未能涵盖您的所有问题，请随时与其他 AMP 用户联系以讨论您的确切用例。

前往 Stack Overflow

一个无法解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您对您特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

由 @kul3r4 撰写