Those good parts which AMP taught me: Analytics

Paul Li
Paul Li
Jun 3 · 9 min read

Introduction

分析自家服務的使用者行為, 一直都是每個 frontend engineer 應盡的天職, 唯有有效追蹤使用者數據, 才能知道當前 user 的痛點在哪兒, 揚善棄惡, 做出人人都喜愛的服務.

為了有效計算出 Click Through Rate, 基本的分母以及分子自然是少不了, 也就是說 developers 必須要能有效地收集 pageview, module view, 以及 click, 才能精準地計算出最為正確的 CTR.

Module view 的 tracking 一直都是很 trick, 偷懶的人更本不做, 直接把 pageview 當初是 module view, 比較功夫的人, 則會在 pageview beacon 發送後, 觀看當前有哪些 module 需要被 tracking, 進而送出 module view.

Module view 絕對不會等於 pageview, 它應該根據實際 user 是否真的有看過, 才決定是否發送 beacon. 試想: 很多狀況下, 在 2nd fold 的 module 可能 visitor 都還沒有 scroll 到亦或者 content not ready (AJAX based), 你就馬上做 module view +1 的動作, 對於 CTR 的計算絕對是有弊無利的.

能夠正確的收集 module view 便成了決勝的關鍵點.

AMP Analytics

在玩 AMP 的這兩年來, 對於 amp-analytics 這個 component 其實感到驚艷非常, 基本上它跟我是同 tone, 簡易的 config 設置, 讓前後端 developers 都可以快速的 adopt Instrumentation.

除此之外, trigger 的設定更是深得我心, developers 本來就該對哪些 module 需要被 tracking 負責, 自己都搞不懂了, 怎能期待後續看報表的人了解設計的初衷. 太過便利的設定可能會造成後續開發的綁手綁腳, 什麼時候該發送, 什麼情況下要阻止, 傻傻分不清楚.

amp-analytics 的 config 設定, 便利之餘不失靈活, developers 可以自由自在的決定哪些 elements 被 click 之後, 需要發送 click beacon, 那些 module 在被“看到”之後需要發送 module view 的 beacon.

除此之外, 它更可以做到

如此變態且精緻的 module view 是我前所未見的.

這真真就是我理想中的 module view tracking 應有的基本的態度, 也因此, 我個人非常喜愛 amp-analytics, 喜歡之餘並自我省思:

於是乎, 這變成了我的 side-project.

msc-ga

web components 一直是我所關注的議題, 所以我決定撰寫 <msc-ga /> 並將我認為的優良部份, 一起 sign 到這個 web component 中 (msc-ga 主要是以 Google Analytics 為主要 tracking 手段)

<msc-ga /> introduction & demo

其主要 structure 如下所示:

<msc-ga>
  <script type="application/json">
    {
      "vars": {
        var-name: var-value,
        ...
      },
      "extraTrackerData": {
        extraTrackerData-name: extraTrackerData-value,
        ...
      },
      "triggers": {
        trigger-name: trigger-object,
        ...
      }
    }
  </script>
</msc-ga>

如上所示, developers 可以透過最熟悉不過的 JSON Object 來做設定, 清楚地知道哪些變數可以被 reuse, 每個 beacon 的發送又隱含著哪些資訊. 接下來將簡單的介紹各個 section 所負責的部分

vars: 透過 vars, 可以設定基本的變數, 符合 ${var-name} format 的 value 設定更可以直接沿用 vars 裡面的設定, 如下所示, contentGroup1 的 value 即等同於 msc-ga

{
  "vars": {
    "account": "UA-XXXXXX-X",
    "documentGroup": "msc-ga",
    "merchandiseId": "100430268264",
    "categoryId": "23000"
  },
  "extraTrackerData": {
    "contentGroup1": "${documentGroup}",
    "dimension1": "${merchandiseId}",
    "dimension2": "${categoryId}",
    "dimension3": "logined",
    ...
  },
  ...
}

extraTrackerData:

為了方便做更多面向的分析, 有些情況下, beacon 內容的設置並不是那麼單純, 如果有這方面的需求, 並可以透過 extraTrackerData 來做設置.

{
  ...
  "extraTrackerData": {
    "contentGroup1": "${documentGroup}",
    "dimension1": "${merchandiseId}",
    "dimension2": "${categoryId}",
    "dimension3": "logined",
    ...
  },
  ...
}

這些變數的名稱, 可以透過 Google Analytics field reference 來做查詢

不管是 pageview, module view 還是 click, 都可以透過 triggers 來做設定.

pageview:

{
  ...
  "triggers": {
      "defaultPageview": {
          "on": "visible", // [visible || click]
          "request": "pageview" // [pageview || event]
      },
      ...
  }
}

如上所示, <msc-ga /> 會在 init 的時候, 自動發出 pageview 的 beacon, developers 可以自行決定要不要添加該 trigger.

click:

{
  ...
  "triggers": {
      "anchorClicks": {
          "on": "click",
          "request": "event",
          "selector": "#hd a",
          "vars": {
              "eventCategory": "${documentGroup}",
              "eventAction": "header",
              "eventLabel": "none"
          }
      },
      ...
  }
}

透過 selector 的設置, 讓 developers 可以用再熟習不過的 CSS selector 來設定哪些 node 被 click 後需要發送 click 的 beacon. 更可以透過 vars 的設定, 讓每個 beacon 的 event category, event action 以及 event label 有 default 值.

如果想要動態更換 event * 的 value, 也可透過 dataset 來動態做更換.

<a href="?"
   data-vars-event-category="xxx"
   data-vars-event-action="xxx"
   data-vars-event-label="xxx"
>
  trigger element
</a>

module view:

module view 便是整個 <msc-ga /> 的價值所在

{
  ...
  "triggers": {
      "defaultModuleview": {
          "on": "visible",
          "request": "event",
          "selector": ".code",
          "vars": {
              "eventCategory": "${documentGroup}",
              "eventAction": "moduleview",
              "eventLabel": "none"
          },
          "visibilitySpec": {
            "totalTime": 5000, // default is 0 (ms)
            "visiblePercentage": 0.75, // default is 0.75
            "continuousTime": 2000 // default is 0 (ms)
            "repeat": true // default is true
          }
      },
      ...
  }
}

如上所示, 透過 visibilitySpec 的設置, 我們便可以做出

特定 module 的 75% 以上的面積被看到, 在持續 200ms 且總累積被看到的時間達到 5s, 才會發送 module view beacon

這些精緻手工全賴 Web API — Intersection Observer 來達成, 有興趣的朋友不妨點及相關網址進行一覽.

如果對 <msc-ga /> 有興趣的朋友, 也可以點擊下方網址, 觀看更細部的使用與設定.

<msc-ga /> introduction & demo

Conclusion

以上便是我所做的 survey, 更是從 amp-analytics 中習得的優良部份所成的 web component. 態度正確很重要, PM 可以無法理解為什麼要做這麼變態的 tracking. 但是 developers 不能違背心中的那一把尺.

Reference