amp-analytics
- 简介设置页面浏览量 UI 元素外观跟踪锚点点击滚动事件计时器 AMP 轮播跟踪表单

网站

amp-analytics

在 Playground 中打开

简介

amp-analytics 元素可用于衡量 AMP 文档上的活动。目前，amp-analytics 支持不同类型的事件

页面浏览量
锚点点击
计时器
滚动
AMP 轮播更改
表单

本示例演示了可以衡量哪些事件以及如何配置它们。有关所有可用选项和参数的完整概述，请查看官方文档。

设置

在标头中导入 amp-analytics 组件。

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

我们需要 amp-iframe 来嵌入分析仪表板。

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

<amp-iframe class="fixed-dashboard" width="200" height="240" layout="fixed" sandbox="allow-scripts" frameborder="0" src="https://amp.org.cn/documentation/examples/components/amp-analytics/embed?test=1&user=&account=ampdev">
  <amp-img src="/static/samples/img/pixel-white.png" layout="fixed-height" height="350" width="auto" placeholder alt="...">
  </amp-img>
</amp-iframe>

页面浏览量

这是一个简单的 amp-analytics 配置，用于在页面变为可见时触发单个请求。请注意我们如何在请求中声明一个变量 eventId，并在 vars 块中定义具体值。

重要提示： amp-analytics 应在文档正文中配置。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "vars": {
            "eventId": "pageview"
          }
        }
      }
    }
  </script>
</amp-analytics>

UI 元素外观跟踪

这是一个更复杂的视图跟踪。当特定元素变为可见时，此示例会触发分析请求。该元素通过 id 指定，并且必须是 AMP 元素（amp-img、amp-iframe、amp-ad，...）。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "visibilitySpec": {
            "selector": "#cat-image-id",
            "visiblePercentageMin": 20,
            "totalTimeMin": 500,
            "continuousTimeMin": 200
          },
          "vars": {
            "eventId": "catview"
          }
        }
      }
    }
  </script>
</amp-analytics>

如果此图像的至少 20% 可见 500 毫秒，且最少持续可见 200 毫秒，则会触发分析请求。

<amp-img id="cat-image-id" src="/static/samples/img/cat-looking-up-300x200.jpg" width="300" height="200" attribution="visualhunt" alt="a cat" layout="responsive"></amp-img>

当图像因操作而变为可见时，此示例会触发分析请求。

<button on="tap:an-image.toggleVisibility">Toggle image</button>
<amp-img hidden id="an-image" src="/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" alt="AMP">
</amp-img>

当图像变为可见时，会发出 elementShown 事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "elementShown": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "defaultPageview": {
          "on": "visible",
          "request": "elementShown",
          "selector": "#an-image",
          "vars": {
            "eventId": "imageShownAfterButtonClick"
          }
        }
      }
    }
  </script>
</amp-analytics>

锚点点击

也可以跟踪用户交互。此配置将跟踪页面中任何锚链接上的点击。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "clickOnAnyAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

单击其中一个链接进行尝试。

一个链接
另一个链接

<ul>
  <li><a>a link</a></li>
  <li><a>another link</a></li>
</ul>

也可以仅针对特定链接触发点击事件。通过指定 selector id 来选择要跟踪的特定元素。此示例仅跟踪 id 为 anchor-id 的锚点上的点击。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "#anchor-id",
          "request": "event",
          "vars": {
            "eventId": "clickOnSpecialAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

这些链接中只有一个会触发 clickOnSpecialAnchor 事件。

一个特殊链接.
一个不太特殊的链接.

<ul>
  <li><a id="anchor-id">a special link</a>.</li>
  <li><a id="another-anchor-id">a not so special link</a>.</li>
</ul>

滚动事件

当页面滚动时，使用滚动事件在特定条件下触发请求。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "scrollPings": {
          "on": "scroll",
          "scrollSpec": {
            "verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
          },
          "request": "event",
          "vars": {
            "eventId": "scroll"
          }
        }
      }
    }
  </script>
</amp-analytics>

计时器

计时器事件在指定的时间间隔触发。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "pageTimer": {
          "on": "timer",
          "timerSpec": {
            "interval": 10,
            "maxTimerLength": 600
          },
          "request": "event",
          "vars": {
            "eventId": "timer"
          }
        }
      }
    }
  </script>
</amp-analytics>

AMP 轮播跟踪

可以使用 amp-analytics 跟踪 amp-carousel 事件（这仅适用于 type="slides"）。这是一个示例轮播

幻灯片 1

幻灯片 2

幻灯片 3

<amp-carousel width="400" height="300" layout="responsive" type="slides">
  <div class="slide" data-slide-id="slide1">Slide 1</div>
  <div class="slide" data-slide-id="slide2">Slide 2</div>
  <div class="slide">Slide 3</div>
</amp-carousel>

您可以使用 fromSlide 和 toSlide 变量来跟踪查看了哪些幻灯片。该值要么取自幻灯片的 data-slide-id 属性（如果存在），要么表示幻灯片的索引（从 0 开始）。

当当前可见的幻灯片发生任何更改时，会发出 amp-carousel-change 事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "ampCarouselChange": {
          "on": "amp-carousel-change",
          "request": "event",
          "vars": {
            "eventId": "carousel-change-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

当遍历到下一张幻灯片时，会发出 amp-carousel-next 事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "ampCarouselNext": {
          "on": "amp-carousel-next",
          "request": "event",
          "vars": {
            "eventId": "carousel-next-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

当遍历到上一张幻灯片时，会发出 amp-carousel-prev 事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "ampCarouselPrev": {
          "on": "amp-carousel-prev",
          "request": "event",
          "vars": {
            "eventId": "carousel-prev-${fromSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

表单

您可以跟踪由 amp-form 触发的事件。在此处查找支持的事件列表。

尝试在表单中插入任意名称作为名称输入，以查看 amp-form-submit-success 事件。

尝试在表单中插入单词“error”作为名称输入，以查看 amp-form-submit-error 事件。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.org.cn/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "formSubmit": {
          "on": "amp-form-submit",
          "request": "event",
          "selector": "#testForm",
          "vars": {
            "eventId": "form-submit"
          }
        },
        "formSubmitSuccess": {
          "on": "amp-form-submit-success",
          "request": "event",
          "selector": "#testForm",
          "vars": {
            "eventId": "form-submit-success"
          }
        },
        "formSubmitError": {
          "on": "amp-form-submit-error",
          "request": "event",
          "selector": "#testForm",
          "vars": {
            "eventId": "form-submit-error"
          }
        }
      }
    }
  </script>
</amp-analytics>
<p>
  Try to insert any name as a name input in the form to see the
  <code>amp-form-submit-success</code> event.
</p>
<p>
  Try to insert the word "error" as a name input in the form to see the
  <code>amp-form-submit-error</code> event.
</p>
<form id="testForm" method="post" action-xhr="/documentation/examples/api/submit-form-input-text-xhr" target="_top">
  <input type="text" name="name" placeholder="Name..." required>
  <input type="submit" value="Subscribe">
</form>

需要进一步解释？

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

转到 Stack Overflow

一个无法解释的功能？

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

在 GitHub 上编辑示例

由 @sebastianbenz 撰写