如果你想要觀察 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
參考來源: