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

2019鐵人賽 amp 前端 page view event tracking

majo2013

2018-10-20 23:50:55

2684 瀏覽

分享至

在 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

verticalBoundaries 和 horizontalBoundaries 至少需要其中一個 ~不然你設這個事件幹麻的?!~而且，為了保持頁面的性能，滾動邊界會四捨五入到最接近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 項目的狀況；利用 on 與 selector 來追蹤特定事件

"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,
    }
  }
}