GA資源設定

首先在管理頁面建立資源

建立資料串流

點擊「查看代碼操作說明」取得安裝代碼

安裝gtag

將以下這串代碼至於網頁的head內

即可使用gtag

從GA即時報表確認代碼使否開始運作

安裝好gtag代碼之後

基本上網頁執行下去就會開始進行最基本的pageview追蹤

這時候可以從GA後台的報表>即時頁面查看是否有資料

有的話代表安裝成功

進階Pageview設定

若不想使用ga4預設的自動發送pageview功能

而是希望手動發送pageview

可在安裝代碼中的config event中使用send_page_view功能

gtag('config', 'STREAM_ID', {
  'send_page_view': false
})

手動發送pageview

ref

這時候就可以如下方程式碼的方式自行發送pageview event

並可加入其他資定的dimensions或metics

gtag('event', 'page_view', {
  page_title: 'your-page-title',
  page_location: window.location.href,
  page_path: window.location.pathname,
  userType: 'member',
})

Custom event/dimensions/metrics

在GA資源中設定custom dimensions/metrics

我們可以在GA後台的管理>自訂定義頁面中

自訂dimensions/metrics

gtag代碼

我們可以使用以下方式自訂一個internal_search event

並

gtag('event', 'internal_search', {
  keyword: 'foobar',
  searchType: 'tag'
})

自訂報表

scenario

假設目前我們需要追蹤「pageview」、「影片的觀看次數」及「影片的觀看時間長度」

而且紀錄的影片資訊要包含影片的名稱(videoName)、ID(videoId)、類型(videoType)

並且要區分非會員(anonymous)及會員(member)

custom dimensions/metrics

這時候我們需要建立以下自訂定義

自訂維度: videoName、videoId、videoType、userType(anonymouse/member)

自訂指標: duraction(影片觀看時間, 單位為秒)

追蹤代碼

// pageview
gtag('event', 'page_view', {
  page_title: 'page title',
  page_location: window.location.href,
  page_path: window.location.pathname,
})

// 追蹤影片觀看次數
gtag('event', 'videoWatch', {
  videoId: 'videoId',
  videoType: 'series',
  videoTitle: 'video001',
  userType: 'member',
})

// 追蹤影片觀看時間(前端若video player有在播放中, 每5秒發送一次)
gtag('event', 'videoWatchDuration', {
  videoId: 'videoId',
  videoType: 'series',
  videoTitle: 'video001',
  userType: 'member',
  duration: 5,
})

GA4 設定、自訂維度/指標、自訂報表