Google Analytics 事件追蹤設定

/

English version: Google Analytics Event tracking setting up

什麼是 Google Analytics 事件追蹤

Google Analytics 事件追蹤,就是我們常聽到的 GA 事件。簡單來說就是紀錄使用者在頁面上做了哪些事?常見的有紀錄某個按鈕的點擊量、頁面捲動的深度、影片多少人看完、報名表單多少人進行到哪一步……等等,通常活動頁、電商網站最常被行銷或企劃人員要求要埋 GA 事件。

會埋 GA Event 的好處

埋 GA 事件是進階使用 GA 的基本功,當你會埋 GA 事件後,另外 2 個功能也就跟著會了,因為這 2 個功能也是從事件裡去整理資料並呈現。

這 2 個功能就是:

  1. 自訂維度
  2. 電商報表

自訂維度的使用在「GA 自訂維度的應用 分類之下的文章成效」這篇有寫。

電商報表的話以後有時間再寫。

埋 GA 事件是主動跟 GA 溝通的方式,如果平常有在用 GA,就一定要會。


GA 事件的 3 + 1 個要素

GA 事件有 3 個必要的值,跟 1 個選填的值,如果你是行銷/企劃想讓工程師埋事件,或是工程師要幫頁面埋事件,3 個必要的值就一定要給,分別是:

  • 事件類別 category
  • 事件動作 action
  • 事件標籤 label

另外一個選填的是:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

  • 事件值 value

類別、動作、標籤要給什麼值?完全要看網站維運者想怎麼看 GA 的事件報表,沒有一定說有固定的規則在。


以下的事件報表範列、截圖,都是來自於 Google 提供的 示範帳戶

示範帳戶很有趣,即便你沒有自己的網站可以讓你實際看 GA 的數據,但用這個示範帳戶,就可以有大量的數據去使用。這些數據的資料還都是真實的,是它們電商網站 Google Merchandise Store 的資料,有些很少有實際數據的報表,像 Google Ads,也可以從示範帳戶中看到。

建議剛開始學 GA 的大大們可以加入示範帳戶。


事件類別 category

進到 GA 後,點「行為」-> 「事件」 -> 「總覽」,就可以看見事件報表:

GA事件報表,截圖來源:Google Demo Account
GA 事件報表,截圖來源:Google Demo Account

報表預設顯示的數據就是事件類別,事件類別就是一個匯總,是事件的總合,因此不能亂取。

就很像我們一般在存資料時的資料夾名稱,我們會亂取嗎?不太會,因為亂取以後就很難找到要的資料。

實務上,假設今天要埋事件的是一個活動頁,頁數少、走期短,那事件類別就可以取這個活動的名稱,像是:2019spring_event、201908member_event。這樣看報表時,就可以直接點進這頁的事件報表看裡面的數據。

如果是針對整個網站的話,就要比較費工了,因為整個站可以有很多種分類,比方從導覽列分、頁面分、廣告分、產品分……這就是網站維運者跟行銷們要去思考的。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝


事件動作 action

動作從名稱上聽就知道,它是紀錄這個事件的行為,從示範帳戶的報表上可以看到:

示範帳戶 事件動作報表
示範帳戶 事件動作報表

比較多在紀錄的是 Click 事件,另外像加入/移除購物車、促銷的點擊也有,這兩個就是電商報表用的,事件報表一併整理出來。

事件,是使用者在頁面上做了某件事後,頁面主動發送給GA的,因此是利用程式碼去發送。所以事件動作跟 JavaScript 的事件有很大的關係。

JavaScript 的事件有蠻多種的,可以參考來設成 GA 事件,如:

  • click:點擊
  • focus / blur:進入 / 離開表單的某個欄位
  • change:表單某個欄位值有變動
  • key*:使用者按了鍵盤某個按鍵
  • mouse*:使用者用滑鼠滑到了某個區域
  • resize:視窗大小有變動
  • scroll:捲動視窗
  • submit:提交某個表單

這個就是列出個大概,拿來當事件動作的參考,實際的使用要跟工程師們討論,看在什麼動作之下埋入什麼事件。


事件標籤 label

這個 GA 文件上是歸為建議要填的選填項目,在實際應用時,建議一定要填。

看一下 GA 事件報表就可以知道為什麼一定要填:

示範帳戶 事件標籤報表
示範帳戶 事件標籤報表

事件類別、事件動作是大分類,標籤就是小分類。

就很像你埋了以下事件:

  • 事件類別:寶可夢
  • 事件動作:捕捉

然後呢?如果行銷人員問你這一千次的捕捉,哪一隻被捉的比較多,是皮卡丘還是伊布?你就會答不出來,因為沒有紀錄到細項。

事件標籤 label 就是讓你紀錄每個事件的細項用。

這邊補充說明一下,在報表裡,「標籤」是寫「活動標籤」,而本文寫成「事件標籤」是為了好理解。如果照寫成活動標籤,覺得會容易誤會是活動報表還什麼的,會覺得跟事件無關。記得平常看報表時還是要找「活動標籤」。

如果看一下官方文件給的例子,就會更清楚事件標籤的必填性:

  • 類別:「影片」,動作:「播放」,標籤:「亂世佳人」
  • 類別:「影片」,動作:「播放」,標籤:「頑童流浪記」

所以剛寶可夢的例子,埋的事件就可以寫成:

  • 類別:「寶可夢」,動作:「捕捉」,標籤:「皮卡丘」
  • 類別:「寶可夢」,動作:「捕捉」,標籤:「伊布」

這樣之後看報表時就分得出事件之下,哪一隻的互動比較多了。

事件值 value

這個是非必填的項目,而且能接受的值是數字,也不接受負數。

照官方給的範例,比方有人看影片按下暫停時,可以把暫停的秒數設成值。

或者使用者把商品加入購物車時,可以把商品的金額設成值。


事件會影響跳出率

在進到下一段埋事件的程式碼之前,要先說事件會影響跳出率這段,因為這會牽涉到埋碼的參數。

跳出率指的是,使用者進到第一個頁面,沒做任何的互動就離開,這就算在跳出率中。

而 GA 事件會算進互動裡,也就是說,即便使用者進到這個頁面,雖然沒進到其他頁面,但有做了點擊、捲動等設定的事件,就算是有互動,因此就不會算在跳出率裡。

官方文件也說:

假設您有某個內含影片播放器的網頁跳出率一直偏高,且您未在該網頁中導入「事件」評估。如果您之後為該播放器設定「事件」評估,可能會發現該網頁的跳出率下降,這是因為 Analytics (分析) 會記錄使用者與播放器的互動。

請務必注意,凡是在網頁載入時自動執行的「事件」評估,都會導致網頁的跳出率為零。

導入方面的注意事項 對跳出率的影響

這段意思就是說,如果使用者進到第一個頁面,頁面就設定了執行某個事件,例如就執行「捲動深度是 0」的事件,或是「某個廣告曝光 + 1」的事件,那就算使用者沒進到其他頁面就關掉視窗,也不會算進跳出率裡,這頁的跳出率會是 0,因為使用者有執行事件了。

如果要設定事件不會影響跳出率,就是即便執行事件了,也不算進互動裡,那就要把這個事件的「非互動事件」設為 true,這樣就算使用者一進來觸發了事件,而且沒進到其他頁就關掉視窗,一樣會算在跳出率中。

設定非互動事件的方式將一起跟埋 code 寫進下一段。


埋事件追蹤程式碼

埋事件追蹤程式碼有 2 種方式:

  1. 直接寫程式碼
  2. 用 Google Tag Manager(代碼管理工具)來建立事件

由於 Augustsu 是前端工程師,直接寫程式是最快的,就不用在 GTM 上點來點去,因此本篇就提供寫程式碼的方式。

用 GTM 的附上官方說明,請看這:Google Analytics (分析) 事件

寫程式碼的部份有 2 種,主要看埋的 GA 追蹤碼是哪一種:gagtag。這從追縱碼上可以看到,像 gtag 的話就會在程式碼裡看見 gtag

gtag追蹤碼
gtag 追蹤碼

現在 GA 預設提供的追蹤碼都是 gtag 了,本篇 gagtag 兩個都會寫。

ga code

ga 使用事件的程式碼如下:

ga('send', 'event', {
  eventCategory: '事件類別',
  eventAction: '事件動作',
  eventLabel: '事件標籤',
  eventValue: '事件值'
});

也可以簡寫成:

ga('send', 'event', '事件類別', '事件動作', '事件標籤', '事件值');

如果要設定成非互動事件,就是這樣:

ga('send', 'event', '事件類別', '事件動作', '事件標籤', '事件值', {
  nonInteraction: true
});

*事件值非必填,可以不寫。

gtag code

gtag 使用事件的程式碼如下:

gtag('event', '事件動作', {
  'event_category': '事件類別',
  'event_label': '事件標籤',
  'value': '事件值'
});

如果要設定成非互動事件,是這樣:

gtag('event', '事件動作', {
  'event_category': '事件類別',
  'event_label': '事件標籤',
  'non_interaction': true
});

另外,gtag 有提供一些預設事件,預設事件表可以看說明文件:

Default Google Analytics Events

*事件值非必填,可以不寫。


案例示範

這邊提供一個案例,假設有一個提供檔案下載的頁面,下載按鈕的 id 是 btn-download,想要知道有多少人點擊了下載按鈕,可以這樣寫:

var btnDownload = document.getElementById('btn-download');
btnDownload.addEventListener('click', function() {
  gtag('event', 'download_click', {
    'event_category': 'download',
    'event_label': '最強攻略下載'
  });
}, false);

這個是基本的使用方式。

如果想知道的是廣告的點擊,GA 有一個可以換算 CTR 的,這是電商報表的其中一個功能,使用方式請參考這篇:

GA 報表:電子商務 內部宣傳 報表

最後附上官方說明文件的連結:「事件」簡介

Summary
Google Analytics 事件追蹤設定
Article Name
Google Analytics 事件追蹤設定
Description
本篇大綱:什麼是 Google Analytics 事件追蹤、會埋GA事件的好處、GA事件的3+1個要素、事件類別category、事件動作action、事件標籤label、事件值value、事件會影響跳出率、埋事件追蹤程式碼、ga、gtag、案例示範
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

IntersectionObserver:下篇 – 實際應用 lazyload、進場效果、無限捲動

Vue

Vue Transitions 製作簡單的 Carousel / Slider / 輪播功能

Front-End

滿版圖片背景、影音背景

Bot Telegram

Telegram Bot 學習筆記 – 2:用 Google Apps Script 接收 / 推播訊息

Front-End

用 CSS :target 製作頁籤、手風琴功能

WordPress

WordPress:埋 Google AdSense 廣告

Front-End

OSM + Leaflet 學習筆記2:移動中心點、抓目前地點

Front-End

像 Medium 的漸近式圖片加載

Firebase Google

Firebase Authentication 第三方登入 – Google、FB

Front-End

TestCafe 學習筆記 – 1:自動化測試會員登入

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
2 Comments
最舊
最新
Inline Feedbacks
看所有留言
林滋毓
林滋毓
5 月 之前

你好,請教一個問題,「案例示範」的碼要埋在wordpress的哪個頁面裡?其實一直爬文,但找不到解答。