Skip to content

Google Analytics 4 傳送自訂事件

本篇內容會提到 GA 跟 GTM,可先參考 GA 與 GTM 的差異

傳送 GA4 自訂事件的兩個方法:

  1. 透過 gtag.js
  2. 透過 GTM 傳送事件

使用 gtag.js 傳送 GA4 自訂事件

透過透過 gtag.js 傳送自訂事件的方法如下:

js
gtag('event', 'event_name', {
  'property1': 'value1',
  'property2': 'value2'
});

需特別注意的是,網頁有 gtag function 可用,不代表網頁有安裝 Google Analytics 4 的追蹤碼,因為 Google 底下很多產品都有 gtag function,例如 Google Ads、DoubleClick,於網頁上安裝這些產品的 JS 代碼時,也都會有 gtag function 可用。

所以須確保網頁上有安裝 GA4 的追蹤碼:

html
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX'); 
</script>

上面的代碼中有兩個可以識別為 GA4 代碼的安裝,其一是 id=G-XXXXXXXXXX,其二是 gtag('config', 'G-XXXXXXXXXX')。 只要是 G- 開頭的,就是 GA4 的追蹤碼。 如果沒有正確安裝 GA4,就算觸發了 gtag("event", "event_name") 程式的執行,也只是把資料寫到資料層變數(dataLayer),雖然不會出錯,但也不會有任何作用。

使用 GTM 傳送 GA4 自訂事件

安裝 GTM 代碼於網頁 的部分不贅述,然後在 GTM 內設定 GA4 的安裝,如下圖:

GTM 設定 GA4 安裝

上圖設定即為用 GTM 完成 GA4 的安裝方法,只要建立一個「Google Analytics (分析):GA4 設定」的代碼,並在「評估 ID」中填入自己的 GA4 ID,將觸發條件設為所有頁面。

嚴格來說,這種安裝方法跟前面提到的 gtag.js 安裝 GA4 的方法有一些不同的地方,這種安裝方法實際上產生在網頁的代碼如下:

html
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX&l=dataLayer&cx=c"></script>

可觀察到 JS 的網址參數多了 l=dataLayer&cx=c,也沒有 gtag function 相關的代碼。

所以同樣安裝了 GA4,使用 GTM 安裝 GA4 是不能使用 gtag("event", "event_name") 這種方式觸發 GA4 自訂事件。

需要在 GTM 當中建立一組「Google Analytics (分析):GA4 事件」的代碼,來傳送自訂事件:

GTM 新增 GA4 事件

在「事件名稱」中填入自訂事件名稱,並在「事件參數」中填入自訂事件的附屬資料,附圖的事件值 iPhone1000 只是寫死作為示意,實際上通常會用「資料層變數」來處理動態的附屬資料。

例如在購買事件發生時,工程師會把自訂事件及商品資料寫到資料層變數:

js
dataLayer.push({ 
  event: "purchase", 
  product_name: "iPhone", 
  product_price: 1000 
});

然後就能在 GTM 當中製作觸發條件變數

  • 製作觸發條件:在 GTM 建立一個「自訂事件」的觸發條件,事件名稱為 purchase 以匹配 dataLayer 的事件名稱。
  • 製作自訂變數:在 GTM 新增兩個「資料層變數」,資料層變數名稱分別為 product_nameproduct_price

當這兩個項目完成後,就可以為事件設定正確的觸發條件,以及正確的附屬資料取代寫死的資料。

GA4 後台的自訂事件與建立事件

GA4 的建立事件與修改事件

最後補充 GA4 後台設定兩個可能又讓人混淆的功能「建立事件」與「修改事件」,這兩個功能都是為「已經傳送到 GA 的事件資料」做後續處理,這裡的 「建立事件」並不是文章前大段講到的「傳送事件」。

  • 建立事件: 可以將收到的事件,基於參數條件,建立成新的事件,並且可以設定新事件的參數。 例如:傳送到 GA 的是 purchase 事件,可以從 GA 後台建立事件,設定判斷事件名稱為 purchase 且參數 product_nameiPhone 的事件,自動產生一個名為 purchase_iphone 的事件。 重點:原來的事件會保留,並產生新的事件。
  • 修改事件: 可將收到的事件在符合設定的條件下做「竄改」,例如:傳送到 GA 的是 purchase 事件,可以從 GA 後台修改事件, 把事件名稱從 purchase 改成 purchase_iphone 把參數名稱從 product_name 改為 name,也可以移除 product_price 參數。 重點:直接處理、變更原來的事件,不會產生新的事件。
Written By
YI FENG XIE
YI FENG XIE

Creative Problem Solver