Appearance
本篇內容會提到 GA 跟 GTM,可先參考 GA 與 GTM 的差異。
傳送 GA4 自訂事件的兩個方法:
- 透過 gtag.js
- 透過 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 的安裝方法,只要建立一個「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 事件」的代碼,來傳送自訂事件:
在「事件名稱」中填入自訂事件名稱,並在「事件參數」中填入自訂事件的附屬資料,附圖的事件值 iPhone
與 1000
只是寫死作為示意,實際上通常會用「資料層變數」來處理動態的附屬資料。
例如在購買事件發生時,工程師會把自訂事件及商品資料寫到資料層變數:
js
dataLayer.push({
event: "purchase",
product_name: "iPhone",
product_price: 1000
});
然後就能在 GTM 當中製作觸發條件與變數:
- 製作觸發條件:在 GTM 建立一個「自訂事件」的觸發條件,事件名稱為
purchase
以匹配 dataLayer 的事件名稱。 - 製作自訂變數:在 GTM 新增兩個「資料層變數」,資料層變數名稱分別為
product_name
及product_price
。
當這兩個項目完成後,就可以為事件設定正確的觸發條件,以及正確的附屬資料取代寫死的資料。
GA4 後台的自訂事件與建立事件
最後補充 GA4 後台設定兩個可能又讓人混淆的功能「建立事件」與「修改事件」,這兩個功能都是為「已經傳送到 GA 的事件資料」做後續處理,這裡的 「建立事件」並不是文章前大段講到的「傳送事件」。
- 建立事件: 可以將收到的事件,基於參數條件,建立成新的事件,並且可以設定新事件的參數。 例如:傳送到 GA 的是
purchase
事件,可以從 GA 後台建立事件,設定判斷事件名稱為purchase
且參數product_name
為iPhone
的事件,自動產生一個名為purchase_iphone
的事件。 重點:原來的事件會保留,並產生新的事件。 - 修改事件: 可將收到的事件在符合設定的條件下做「竄改」,例如:傳送到 GA 的是
purchase
事件,可以從 GA 後台修改事件, 把事件名稱從purchase
改成purchase_iphone
把參數名稱從product_name
改為name
,也可以移除product_price
參數。 重點:直接處理、變更原來的事件,不會產生新的事件。