iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
Modern Web

AMP系列 第 20

AMP(Lession 20) - 在 AMP 頁面裡獲取數據 〈Page View 與 Event Tracking 篇〉

在 AMP 頁面裡獲取數據 〈Page View 與 Event Tracking 篇〉

釐清 Page View 與 Event Tracking

Page View 與 Event Tracking 有傻傻分不清嗎? 打資料時、看資料時,方法都不同唷!所以先簡單地來理解一下吧!

Page View - 網頁瀏覽量

又被稱為 「PV 數」 ,也有人稱 「單頁點閱率」。一名 user 每訪問該網頁 1 次,且該頁面由上到下成功完成 download,則 Page View 會加 1 。

從 Page View 延伸出來,有些相類似的觀念也需要釐清:

Traffic - 「流量」,為網站或某一頻道的 Page view 的總合名稱;例如:50萬/天

Unique User - 「不重覆使用者」,又簡稱為 「UU」 。

Event Tracking

Click - 「點擊數

Click 是我們在 Event Tracking 上最常用到的一種。 User 每對頁面上的元件做 1 次點擊,則 Click 數就會加 1 。

scroll - 「滾輪事件

timer - 「定時器

Hide - 「隱藏事件]

頁面隱藏時使用

Access

為訪問流程中的不同狀態發出大量事件


現在我們知道一些基本的類型了,下面就來看一下怎麼設定吧


設定 Tracking ID

如上一篇提到的,在 amp-analytics 有許多的第三方工具可用;在這裡用引用 Google Analytics 的來做範例解說。

"vars": {
    "account": "UA-XXXXX-Y" // 使用 GA 做資源設定時,裡面的「追蹤 ID」
}

設定 Page View

在 GA 時,我們是這樣設的:

ga('send', 'pageview', [page], [fieldsObject]);

到了 amp-analytics 裡,我們是這樣設的:

"requests": {
  "pageview": "https://foo.com/pixel?RANDOM"
},
"triggers": {
  "trackPageview": {
    "on": "visible",
    "request": "pageview"
  }
}

Click Trigger

在 amp 的世界裡,一行 js 都不能寫,請用如下的方式 trigger click tracking

"vars": { // 如果你需要使用到變數的話
  "id1": "#socialButtonId",
  "id2": ".shareButtonClass"
},
"triggers": {
  "anchorClicks": {
    "on": "click",
    "selector": "a, ${id1}, ${id2}", // 如何選取物件呢? 用遏號來區普不用的 selector
    "request": "event",
    "vars": {
      "eventId": 128
    }
  }
}

Scroll Trigger

verticalBoundarieshorizontalBoundaries 至少需要其中一個 ~不然你設這個事件幹麻的?!~而且,為了保持頁面的性能,滾動邊界會四捨五入到最接近5的倍數

"triggers": {
  "scrollPings": {
    "on": "scroll",
    "scrollSpec": {
      "verticalBoundaries": [25, 50, 90], // 垂直頁面在 25% 、 50% 、 90% 時會觸發 scroll 事件
      "horizontalBoundaries": [90] // 水平頁面在 90% 時會觸發 scroll 事件
    },
    "request": "event"
  }
}

Timer Trigger

以下為沒有設 startSpec 項目的狀況

"triggers": {
  "pageTimer": {
    "on": "timer",
    "timerSpec": {
      "interval": 10, // 間隔時間,以秒為單位
      "maxTimerLength": 600 // 最長的間隔時間,以秒為單位,預設為2小時
    },
    "request": "pagetime"
  }
}

以下為有設 startSpec 項目的狀況;利用 onselector 來追蹤特定事件

"triggers": {
  "videoPlayTimer": {
    "on": "timer",
    "timerSpec": {
      "interval": 5,
      "startSpec": { // 設了這個,會以間隔的時間觸發;若沒設,則會立即觸發
        "on": "video-play",
        "selector": "amp-video"
      },
      "stopSpec": { // 像這個項目中沒有設 maxTimerLength 這子選項,將被認定為無止盡
        "on": "video-pause",
        "selector": "amp-video"
      }
    },
    "request": "videoRequest"
  }
}

Hide Trigger

基本用法如下:

"triggers": {
  "defaultPageview": {
    "on": "hidden",
    "request": "pagehide",
  }
}

可以包括visibilitySpec,以便僅在滿足可見性持續時間條件時才觸發請求:

"triggers": {
  "defaultPageview": {
    "on": "hidden",
    "request": "pagehide",
    "visibilitySpec": {
      "selector": "#anim-id",
      "visiblePercentageMin": 20,
      "totalTimeMin": 3000,
    }
  }
}

Access Trigger

欲知詳情如何,請看下回分解


參考來源:


上一篇
AMP(Lession 19) - 在 AMP 頁面裡獲取數據 〈基本觀念篇〉
下一篇
AMP(Lession 21) - 在 AMP 頁面裡獲取數據 〈Access Trigger 篇〉
系列文
AMP30

尚未有邦友留言

立即登入留言