使用情形
本指南提供了一系列跟踪用户互动的常见使用情形：
跟踪网页浏览量
了解如何使用 amp-pixel 和 amp-analytics 跟踪网页浏览量。
使用 amp-pixel
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
使用 amp-analytics - 无供应商
使用 amp-analytics 将网页浏览量数据发送到指定网址：
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
使用 amp-analytics - googleanalytics
将网页浏览量数据发送到 Google Analytics（分析）（另请参见 Google Analytics（分析）中的网页跟踪）：
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
跟踪网页点击次数
了解如何使用 amp-analytics，通过将事件数据发送到指定网址和 Google Analytics（分析）来跟踪网页点击次数。
将数据发送到指定网址
下面的示例使用 selector 属性，在用户每次点击以下链接时将 click 事件发送到指定网址：<a href>):
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
将数据发送到 Google Analytics（分析）
下面的示例使用 trigger 的 selector 属性，在用户点击特定元素时将 click 事件发送到 Google Analytics（分析）（另请参见 Google Analytics（分析）中的 AMP 事件跟踪）：
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
跟踪滚动操作
使用 amp-analytics 跟踪网页滚动操作。下面的示例使用 scrollspec 属性，在网页垂直滚动 25%、50% 和 90% 时将 scroll 事件发送到指定网址。 在网页水平滚动达到 scroll 宽度的 90% 时，该事件也会被触发：
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
跟踪社交互动
了解如何使用 amp-analytics、通过将事件数据发送到指定网址和 Google Analytics（分析）来跟踪社交互动。
将数据发送到指定网址
下面的示例使用 selector 属性，在用户每次点击以下 Twitter 微博时将 click 事件发送到指定网址：#tweet-link):
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
将数据发送到 Google Analytics（分析）
下面的示例使用 trigger 的 selector 属性，在用户点击特定社交按钮时发送事件（另请参见 Google Analytics（分析）中的 AMP 社交互动跟踪）：
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>