AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

用例

重要提示：此文档不适用于您当前选择的格式 广告！

本指南提供了一组用于跟踪用户互动情况的常见用例

注意 – 想要添加用例？请告知我们。或者您也可以贡献自己的用例，请参阅如何贡献。

跟踪页面浏览量

了解如何使用 amp-pixel 和 amp-analytics 跟踪页面浏览量。

使用 amp-pixel

使用 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 属性，在每次用户点击链接（<a href>）时将 click 事件发送到指定网址

<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 属性，在每次用户点击推文 (#tweet-link) 时将 click 事件发送到指定网址

<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>