使用优化工具衡量 AMP 实验

Accelerated Mobile Pages (AMP) 会使用一些特殊组件,例如,使用 <amp-analytics> 衡量活动,使用 <amp-experiment> 运行实验。如果您使用 <amp-experiment> 在 AMP 文档上运行实验,则可以使用 Google 优化工具生成有关各种变体效果的报告,并根据您的目标选择领先变体。

本文介绍了如何使用 Google 优化工具(而不是 <amp-pixel>)来衡量 AMP 实验并生成相应报告。完成相应配置后,您可以依据 Google Analytics(分析)目标来决定优化工具的贝叶斯统计模型,让优化工具能够选择领先变体。

前提条件

Accelerated Mobile Pages (AMP) 实验

如需创建优化工具实验来衡量 <amp-experiment> 组件的效果,请执行以下操作:

  1. 确认您的 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>
    
  2. 在优化工具容器中创建 A/B 测试。请记下您在创建 A/B 测试时输入的实验名称。在下文中,我们会用 experimentName 来指代它。
  3. <amp-experiment> 组件中创建变体并设置其权重。在优化工具中创建匹配变体并设置其权重

    您也可以根据需要使用优化工具的可视化编辑器来帮助创建变体。

  4. 在优化工具中设置实验目标。根据目标,您可以决定用于挑选领先变体的统计模型,确定变体的效果与原始版本相比如何。
  5. 在优化工具中为您希望定位的 AMP 文档创建网址定位规则。优化工具不会使用该规则,但它可用作参考。
  6. 在优化工具中启动实验,并记下位于优化工具的“实验信息”面板中的 Google Analytics(分析)实验 ID(一个包含 23 个字符的字母数字值,例如 q0AKJL-XRuCmApEIQelcCg)。在下文中,我们会用 gaExperimentID 来指代 Google Analytics(分析)实验 ID。
  7. 将正确的 <amp-experiment><amp-analytics> 组件粘贴到您的 AMP 文档中。

    示例 1:<amp-experiment>

    <amp-experiment>
      <script type="application/json">
        {
          "experimentName": {
            "sticky": true,
            "variants": {
              "0": 33.4,
              "1": 33.3,
              "2": 33.3
            }
          }
        }
      </script>
    </amp-experiment>
    

    示例 2:<amp-analytics>

    <amp-analytics id='analytics1' type='googleanalytics'>
    <script type='application/json'>
    {
      "vars": {
        "account": "gaPropertyID"
      },
      "requests": {
         "experiment": "${pageview}&xid=${xid}&xvar=${xvar}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "experiment",
           "vars": {
             "xid": "gaExperimentID",
             "xvar": "VARIANT(experimentName)"
           }
        }
      }
    }
    </script>
    </amp-analytics>
    

    gaPropertyIDgaExperimentIDexperimentName 替换为在上述步骤中记录的值。

  8. 查看优化工具容器页面或实验详情页面上的实时活跃用户数,以确认您的 AMP 正在接收实验流量。

示例:使用优化工具 CSS 代码编辑器

您可以使用优化工具 CSS 代码编辑器来更改变体样式,具体方法是为每条 CSS 规则添加相应的 AMP 前缀。例如,如果 CSS 代码编辑器针对 "variant 1" 输出以下内容:

.selector {
  property: value
}

则您需要在选择器前添加以下前缀:

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

experimentName 替换为在上述第 2 步操作中记录的值。