Google Analytics 4 傳送自訂事件

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

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

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

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

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

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

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

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

<!-- 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 的方法有一些不同的地方， 這種安裝方法實際上產生在網頁的代碼如下：

<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 只是寫死作為示意，實際上通常會用「資料層變數」來處理動態的附屬資料。

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

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 參數。 重點：直接處理、變更原來的事件，不會產生新的事件。