AMP

使用 amp-experiment 优化您的 AMP 页面

未分类

无论您是在运营在线新闻、旅游还是电子商务网站,您可能都投入了时间来审阅您网站的设计和用户旅程,以使您的体验对用户更有用。通常,这意味着运行 A/B 风格的实验来了解哪些增强功能效果最佳。为了在 AMP 中启用此功能,我们已推出 <amp-experiment>,这是一个新的 AMP 组件,允许您在 AMP 页面上进行用户体验实验。

工作原理

您现在可以设计实验并指定将多少流量引导至特定变体。AMP 在客户端处理流量转移,并提供一种使用 <amp-pixel><amp-analytics> 来收集数据的方法。

在 AMP 页面上设置内容实验有三个关键步骤

  1. 配置实验
  2. 实施变体
  3. 收集数据

配置实验

<amp-experiment> 是一款新的自定义元素,您可以使用它通过 JSON 配置指定所有实验行为。以下是一个配置名为“recommendedLinksExperiment”的实验的代码示例

[代码]

<amp-experiment>

<script type=”application/json”>

    {

      recommendedLinksExperiment: {

        sticky: true,

        variants: {

          shorterList: 25.0,

          longerList: 25.0,

          control: 50.0,

        },

      },

      bExperiment: {…}

    }

  </script>

</amp-experiment>

[/代码]

JSON 配置支持指定一个或多个实验的以下属性

  • 是否将分配给某个实验固定:是否应始终将给定用户分配到跨页面浏览的相同实验变量?在上面的示例中,该实验确实具有粘性。
  • 向给定实验的每个变量公开多少流量:您希望 50% 的随机用户看到版本 A,50% 的用户看到版本 B 吗?每个版本 A 到 E 的比例是多少?在上面的示例中,我们将 50% 的用户分配到对照体验,并将 25% 的用户分配到推荐列表较短或较长的体验中。

请查阅 配置文档以了解其他高级设置,如实验依赖项(组)以及在使用粘性设置时采用用户通知约束。

实施变量

接下来,您需要实施每个实验中的每个变量应如何执行。<amp-experiment> 将 公开 <body> 元素上每个变量的属性,用户已分配给这些变量。然后,您可以使用 CSS 更改样式或可见性,以构建变量,就像您希望用户体验它们一样:

[代码]

body[amp-x-recommendedLinksExperiment=”control”] .extra-links {

display: none;

}

[/代码]

在上面的示例中,“control”变量 recommendedLinksExperiment 的目的是不显示(“display: none”)用于构建较长推荐列表的额外链接,如类名 “extra-links” 所示。此行为将提供我们希望作为实验对照体验进行测试的恰当列表长度。

收集数据

最后,AMP 采用配置并决定为所有实验和所有用户分配哪个变量。由于用户根据您定义的实验变量获得不同的体验,因此您可以收集数据,以便衡量您感兴趣的关键指标,例如按钮点击或花费的时间。

<amp-experiment> 提供了一些 新的报告功能。有一个名为 VARIANT 的新替换变量,您可以使用它来查找在给定页面浏览中分配给用户的哪些实验变体。如果您正在运行多个实验,则可以使用 VARIANTS 变量以序列化格式获取每个已定义实验中分配的变体。您可以结合使用用户的实验组合和指示他们在访问期间如何表现的数据来判断每个变体的成功与否。

试一试!

<amp-experiment> 功能为开发者提供了一个方便的工具来优化其用户的体验。

请阅读 文档以全面了解此初始版本中支持的功能,并查看 AMP By Example 中的示例。访问 GitHub 并 让我们知道您的反馈和您对增强 amp-experiment 以使其对您想要运行的内容实验更有用的任何想法。

AMP 项目产品经理 Rudy Galfi 发帖