AMP
英文
德文 法文 阿拉伯文 西班牙文 義大利文 印尼文 日文 韓文 葡萄牙文 俄文 土耳其文 簡體中文 波蘭文 越南文

使用案例

重要事項：本文件不適用於您目前選取的格式電子郵件！

本指南提供一組追蹤使用者互動的常見使用案例

注意事項 – 想要新增使用案例嗎？ 請告訴我們。 或者您也可以貢獻自己的使用案例，請參閱「如何貢獻」。

追蹤網頁瀏覽量

瞭解如何使用 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 事件傳送到指定的網址。當網頁水平捲動至捲動寬度的 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>