如果你想要觀察 user 在網頁的一些數據，你要怎麼做呢？在 AMP 的世界裡，我們可以使用 amp-pixel 與 amp-analytics 。接下來我們要介紹的是 amp-analytics 這個 component 。
amp-analytics 用於測量一次並向許多人報告。請做如下這般的設定：
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // GA的追蹤代碼
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
上述的 configs 也可以採用 inline 方法引入
<amp-analytics config="https://example.com/analytics.account.config.json">
除了 Google 之外，還有許多的第3方工具可用，可以看AMP官網上有列出來
將要分析的數組成1組的 URL ，而這個 URL 就是用來送出資料用的；或者是，把資料送給各個 URL ，就像 Page View 那樣。
－ 只有 page view 嗎，還是有其他的 user 行為
－ 你想獲取的有哪些數據？內容、 user 、 device 、 browser
| attribute | 必填與否 | typeof | values | 敘述 |
|---|---|---|---|---|
| on | Y | String | click , scroll , timer , visible |
要監聽的事件 |
| requests | Y | Object | 要發送的請求名稱 | |
| vars | N | Object | 包含 key 與 value | |
| selector | 當 on 設為 click 時為必填 |
String | 例如：#header |
用 CSS selector 的方式選物件 |
| scrollSpec | 當 on 設為 scroll 時為必填 |
Object | 例如：{"verticalBoundaries": [25, 50, 90], "horizontalBoundaries": [90]} |
觸發 scroll 事件的條件下的控件。應包含 verticalBoundaries 和 horizontalBoundaries 的其中一個屬性，兩個屬性的值應該是包含生成scroll事件的邊界的數字數組。 |
| timerSpec | 當 on 設為 timer 時為必填 |
Number | 事件每隔多久觸發一次 |
| attribute | typeof | 敘述 |
|---|---|---|
| beacon | Boolean | 指示navigator.sendBeacon用於傳輸請求，送出 POST |
| xhrpost | Boolean | 指示 XMLHttpRequest 用於傳輸請求，送出 POST |
| image | Boolean | 透過生成 <image> 來發送請求，送出 GET |
例如：
'transport': {
'beacon': false,
'xhrpost': false,
'image': true
}
| var | value | 由誰定義 |
|---|---|---|
| canonicalUrl | http://example.com/path/to/the/page | Platform |
| title | My homepage | Trigger |
| account | UA-XXXXX-Y | Remote configuration |
| clientId | my user | Trigger |
註：
如果你要做的是比較不複雜的追蹤的話，建議你可以使用 amp-pixel 即可；深度追蹤的話，建議你仍使用 amp-analytics
參考來源：
iThome鐵人賽
看影片追技術