iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
Modern Web

AMP系列 第 19

AMP(Lession 19) - 在 AMP 頁面裡獲取數據 〈基本觀念篇〉

在 AMP 頁面裡獲取數據 〈基本觀念篇〉

如果你想要觀察 user 在網頁的一些數據,你要怎麼做呢?在 AMP 的世界裡,我們可以使用 amp-pixelamp-analytics 。接下來我們要介紹的是 amp-analytics 這個 component 。

使用 amp-analytics 之前的思考

分析用戶的數據時,你採用的是什麼呢?

第三方的工具

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

triggers

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 事件的條件下的控件。應包含 verticalBoundarieshorizontalBoundaries 的其中一個屬性,兩個屬性的值應該是包含生成scroll事件的邊界的數字數組。
timerSpec 當 on 設為 timer 時為必填 Number 事件每隔多久觸發一次

transport

attribute typeof 敘述
beacon Boolean 指示navigator.sendBeacon用於傳輸請求,送出 POST
xhrpost Boolean 指示 XMLHttpRequest 用於傳輸請求,送出 POST
image Boolean 透過生成 <image> 來發送請求,送出 GET

例如:

'transport': {
  'beacon': false,
  'xhrpost': false,
  'image': true
}

vars

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


參考來源:


上一篇
AMP(Lession 18) - AMP 中的 Twitter
下一篇
AMP(Lession 20) - 在 AMP 頁面裡獲取數據 〈Page View 與 Event Tracking 篇〉
系列文
AMP30

尚未有邦友留言

立即登入留言