将 Google Analytics（分析）添加到 AMP 网页

Accelerated Mobile Pages (AMP) 是一个用于构建可快速呈现静态内容的网页的平台。AMP 包含可衡量用户互动的 <amp-analytics> 元素，且内置了对 Google Analytics（分析）的支持。

基本的网页浏览量衡量设置

若要在 AMP 网页上进行基本的 Google Analytics（分析）安装设置，请复制以下代码段并将 <GA_MEASUREMENT_ID> 替换为您的 Google 代码 ID。查找 Google 代码 ID。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

重要提示：如果网页的源代码中已存在配置了 type="gtag" 的 amp-analytics 代码，请将 "GA_MEASUREMENT_ID": { "groups": "default" } 添加到现有的 "config" 参数。为了获得最佳性能，请勿另外添加带有 type="gtag" 的 amp-analytics 代码实例。

向多个目标账号发送数据

您只需将新的衡量 ID <GA_MEASUREMENT_ID_NEW> 添加到 config 命令中，即可使用同一 <amp-analytics> 代码向多个目标账号发送数据。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

运作方式

<amp-analytics> 元素是 AMP 扩展组件，已在脚本代码中作为 custom-element 显式启用。

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

<amp-analytics> 元素块已配置为支持 Google 衡量产品。将 <amp-analytics> 的 type 属性设置为“gtag”（以启用 gtag.js 支持），并将 data-credentials 属性设置为“include”（以启用 Cookie）。

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

除了已批准的自有库之外，AMP 不允许使用任何其他 JavaScript，因此要改用 JSON 执行配置。vars 块中添加了具有有效 <GA_MEASUREMENT_ID> 的 gtag_id 媒体资源，其下还以值的形式添加了具有 <GA_MEASUREMENT_ID>: {} 的 config 属性。

注意：在 amp-analytics 配置了 Google Analytics（分析）媒体资源 ID 时，默认情况下，系统将自动记录 page_view 事件。

衡量事件

要衡量 AMP 网页中的事件，请使用包含各种指定值的 triggers。触发器配置中使用的属性如下：

• selector：用于指定目标元素的 CSS 选择器。
• on：指定事件的类型。
• vars：指定 event_name 中的事件类型，并根据需要添加其他参数。

以下示例演示了如何设置基本的 Google Analytics（分析）事件。该示例会创建一个名为“button”且将在点击 ID 值为“the-button”的元素时触发的触发器。此触发器会将 event_name 值“login”和 method 值“Google”发送到 Google Analytics（分析）：

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google Analytics（分析）事件是 Google Analytics（分析）所特有的事件类别，通常用于生成有关广告系列的报告。可以使用 event_category、event_label 和 value 参数在 vars 块中指定这些值：

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

要详细了解触发器配置，请参阅 amp-analytics 文档。

修改参数

要替换默认的 Google Analytics（分析）参数或添加新的参数，请将所需的值添加到 config 块的 parameter 部分。下面的示例替换了 page_title 和 page_location 的默认网页浏览值和事件值：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

链接网域

借助网域链接器，您能够将多个不同网域上的两个或多个相关网站作为一个整体进行衡量。下面的代码介绍了如何指定应与 "linker": { "domains": [...] } 媒体资源链接的网域：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

在配置了 Google Analytics（分析）的 AMP 网页中，系统会默认启用从 AMP Cache 链接到规范网域的功能。要停用 Google Analytics（分析）链接网域流量的功能，请在 config 参数中添加 "linker": "false"：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

注意：您还可以使用空 domains 数组 ("linker": { "domains": [] }) 来停用网域链接器功能。

Universal Analytics 的网站速度

Google Analytics（分析）配置为针对网站流量的一小部分自动收集网站速度数据。您可以更改采样率以收集更多或更少的数据。要将采样率设置为 100%，请将突出显示的代码添加到您的配置中：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</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",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

AMP 与非 AMP 流量

默认情况下，AMP 流量使用的客户端 ID 与网站流量的不同。与对应的标准网页相比，AMP 网页的加载速度更快，并表现出不同的流量模式，这通常意味着您在 AMP 流量和非 AMP 流量上获得的指标也将有所不同。

使用单独的媒体资源来衡量 AMP 流量，可更好地分析指标，更准确地揭示您的流量状况。如果您需要使用单个媒体资源，则需要区分 AMP 流量和非 AMP 流量：

• 使用数据源维度或自定义维度 (Universal Analytics)。
• 使用自定义事件参数（Google Analytics [分析] 4）。

调试配置

您可以使用 AMP 验证工具确定相关网页是否符合 AMP HTML 规范。将 #development=1 添加到网页的网址即可打开该验证工具。

amp-analytics 扩展组件可提供警告和错误消息，帮助对配置进行调试和问题排查。请将 #log=1 添加到网页的网址，以查看网络浏览器的控制台中记录的错误消息。

完整示例

此示例演示了页面上只包含一个按钮的完整 AMP 网页。此配置会将标准网页浏览量数据和“button-click”事件发送到 Google Analytics（分析）：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>

相关资源

• AMP：AMP 项目
• AMP：什么是 AMP？
• AMP：amp-analytics
• gtag.js：将 gtag.js 与 AMP 配合使用
• Universal Analytics 帮助中心：Accelerated Mobile Pages (AMP)
• Google Analytics（分析）4 帮助中心：Accelerated Mobile Pages (AMP)