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