聯絡我們LINE加入 LINEFacebook粉絲專頁
GTM教學|設定GA4事件大全
GTM

GTM教學|設定GA4事件大全

要如何知道客人進入首頁後,點過甚麼,選單列被點了幾次? 教你如何追蹤官網上的選單列、菜單列,並成功將事件傳送回GA4。

GA4要怎麼設定自訂事件? 如果網站要蓋GA4事件漏斗,或是GA4自訂事件、GA4自訂轉換事件,可以透過本篇文章使用GTM,完成GA4自訂事件的埋設。本篇範例透過追蹤網頁的選單列,當然你可以再將這個追蹤設定,延伸至其他網站上的事件設定。再埋設GA4自訂事件前,你需要先將 GA4與GTM串接 好,才有辦法做自訂事件的設定。

GTM後續可實施的追蹤事件。例如「撥打電話、加入社群、ICON圖示、網站指定按鈕、圖片」等GA4事件。這一篇的教學你只要有掌握,基本上都可以自行部署網站的GA4自訂事件。如果你要深入埋設全站事件,那你可能會需要學習「 GTM基礎教學|GTM如何使用DOM抓取表格的值|3分鐘學CSS Selector 」

要如何知道客人進入首頁後,點擊的事件或是選單列被點了幾次。 這一次的教學中,教你如何使用GTM追蹤官網上的選單列、菜單列,並成功將事件傳送回GA4。

直接透過GA4製作自訂事件,可以查看「 如何用GA4怎麼設定自訂事件| 無需使用GTM埋設 」。

收集完整名單型,包含驗證機制追蹤「 GTM教學 - WordPress表單驗證事件 - GA4追蹤教學 」。

如何依照產業規劃GA4事件漏斗

以下將常見的網站轉換事件大致分類,並寫出可行的事件規劃, 每個商業模式都不同,因此寫的事件、參數可能需要再做調整 。另外如果沒有你的產業別適用的事件漏斗規劃,也歡迎留言給我知道。

如果你的事件有包含「自訂參數」,那你可以透過這篇追蹤KOL的來源, 設定 GA4設定自訂參數 。

名單型

如果只是要名單型追蹤,可以查看這篇「 GTM基礎教學|名單型網站追蹤|Thankyou Page & 填寫表單事件 」。

這一篇講述不用驗證使用者「是否有完整」填寫表單的GA4事件。如果你想要追蹤「完整填寫的使用者」 那可以看 填寫表單提交按鈕 。

再來是你想要把填寫表單的資料做外傳,可以 使用CSS Selector將表單的值選取 ,並且回拋給GA4,但要注意有PII的資料無法,需要將資料導外,或是也可以做Google Ads的強化轉換。

**視不同網站,不同事件、參數

轉換事件:form_submit

微轉換事件:add_line, phone_call, social_icon, view_multi_pages, timer, form_start, scroll>50%

一般事件:Page_view, watch_video, view_search_result, File downloads,scroll<50%

私訊/電話/預約型

可以透過 追蹤網站的按鈕點擊來回傳至GA4 ,以便設定轉換事件,但有些產業並不適合這麼做,因為跨入第三方網域,後面使用者的行為都追蹤不了,因此在成效判斷,沒有辦法很明確地看出結果。如果你的私訊數、電話撥打想要設定轉換金額,那 你也可以透過放置Value讓GA4有對應的事件價值 。

假設平均10則私訊數,可以成功成交一筆20000元服務,那你的私訊平均金額就可以設定2000元。

轉換事件:message, phone_call, appointment, submit_application

微轉換事件:social_icon, view_multi_pages, timer, scroll>50%

一般事件:Page_view, watch_video, view_search_result, File downloads, scroll<50%

電商型

加入購物車、結帳頁面、購買事件。這三個算是電商必要的事件,需要搭配Google官方文件, 加上人員手動設定網站的DataLayer ,來返回GA4消費者購買的品項、品項ID、購買金額等資料。

如果你是想要製作微轉換 (潛在客戶),那你可以使用 計時器 、 點擊事件 、 或是部落格文章的追蹤 。透過GTM設定後,再把這些受眾設定至GA4,當作目標對象來投遞廣告。

轉換事件:add_to_cart. checkout, add_to_cart. begin_checkout, purchase

微轉換事件:add_to_cart. checkout,add_to_cart. begin_checkout, singup, scroll>50%, add_to_wishlist

一般事件:Page_view, watch_video, view_search_result

SAAS網頁應用服務

追蹤使用者註冊會員、使用者開始試用網站APP,如果你的事件想要有一定的轉換值 (幫助我們成效判斷),那你可以在GTM的事件參數帶Value,並給他一個動態變數, 動態變數需要透過前端語言抓取網站事件金額 。如果網站沒有事件金額,那你可以依照以下公式。

假設網站平均10個會員註冊,可以有1個成功付費訂閱,金額4000元,那你就可以把會員註冊傳送固定金額400元。其他轉換事件,或是微轉換事件也可以這樣利用。

轉換事件:complete_registration. subscribe, form_submit

微轉換事件:start_trial, signup, find_location. form_start, scroll>50%

埋設GA4自訂事件

此示範網站為Shopline建置,屬於電商型網站,但我個人認為如果是部落格、服務型網站,也適用這篇教學,如果你有掌握好GTM觸發條件的設定要領,以及CSS基礎語法,基本上全站90%都能自己完成設定。

查閱開發人員工具

進入開發人員模式,可以先釐清,這一類的按鈕是屬於Button型或Link型,有助於後續設定觸發條件,選取對的選項。圖片中的<a>標籤,因此可以判定為這是一個Link型的按鈕。如果不是<a>標籤,則視為Button型的按鈕,待會觸發條件會需要使用到。

學會查看前端開發者工具,是要學好GTM的一個必備功課,尤其 電子商務事件追蹤 ,也絕對會需要CSS selector的輔助。所以學好CSS選擇器是學好GTM網站事件追蹤的關鍵之一。

查看元素的變數製作觸發條件

這邊其實也可以判定,點選的選單類型為「Link Click」就知道待會的觸發條件該如何設定,中間選單中,我分別框起「Click Class, Click Elements」為我個人比較擅長且推薦用的追蹤條件。這邊為待會設定條件重要的參考內容之一。

可以先把「Click Class」-「navigation-menu-item-label」記住,待會觸發條件會需要,當然可以隨時回來看。通常有些人會使用Click Text做為追蹤,但如果有英文介面、或是其他網站變更,基本上GTM的觸發條件很容易失效,所以我個人會推薦 以「Click Class, Click Elements」做為追蹤優先選擇 。

新增GA4事件

事件名稱打上click_menu。事件參數你可以選擇設定也可以不用,看企業各自需求。再選擇剛剛設定的觸發條件。

觸發條件

利用剛剛我們得知的情報<a>,Link Click,所以我們條件類型選取「點擊-僅連結」,並將啟動時機,選取「Click Classes」包含「Navigation-Menu-Item-Label」。 **忘記原由的話,可以記得看一下Debug的圖面,了解我設定的邏輯。

完成事件設定

可以參照我的圖片,看看你的事件是否也是這樣設定,另外事件的參數,我個人習慣帶一個「Click Text」,記錄用戶點過的任何資訊,這樣我後續就可以在GA4隨時查看,如果不知道怎麼設定GA4自訂維度,也可以在這篇文章後閱覽。

確認有無成功觸發

點選預覽,進入Debug View,查看一下是否剛剛的代碼是否有成功Fired。

**TIP:如果你的代碼處於未觸發狀態,可以像我照片中範例這樣,打開它,查看哪一個條件不符合,再回去GTM首頁做修正,這樣就不會盲目亂修正了。如果想要知道如何快速解決錯誤,也可以查看這一篇「 Debug模式 - 快速查詢埋設到底哪裡有誤 。 」

完成並發布

等待24-72HRS,即可在GA4看到今天埋設的事件。很多人會 透過GA4直接設定事件 ,但我個人比較推薦統一使用GTM埋設;原因是未來方便管理代碼、交接給新人員的時候也好溝通、整理;當然還有Server也可以直接透過 GTM伺服器部署 。

如果你的轉換事件過了好幾天都沒有出現,你可以透過Debug模式檢查代碼有無正確觸發以外,也可以從 前端瀏覽器查看有無正確發送事件 ,基本上這邊是最準確的,只要瀏覽器有從前端發送,GA4的伺服器就會收到相對應的資料。

如何設定GA4的自訂維度

GTM除了可以設定GA4的自訂事件以外,同時也能設定GA4的自訂維度,自訂維度也會用於 電子商務事件的事件金額 、購買品項,這些都是透過GTM設定的事件參數來回傳給GA4。

要怎麼判別該設定事件or參數

我只能說這一題有很多種答案,有些人習慣把按鈕設定事件,因此網頁有非常多點擊按鈕的事件,後續再將名稱做好設定,後續來做分析。但 我習慣把「事件」劃分成大項目、「參數」劃分成小項目。

如果用GA4收集的邏輯來看,page_view底下的參數會有「page_location」、「page_title」、「referrer」等的小參數。依照這樣的設定邏輯,「發生了一個頁面瀏覽,瀏覽了那些頁面、哪些頁面標題、從哪裡推薦而來」。因此你的自訂事件可以仿照該邏輯,例如點擊按鈕,「點了哪些按鈕」、「按鈕的連結」、「在哪個頁面點擊」。

後續你可以打開自訂事件,就可以利用自訂參數的數量,來衡量分析該事件底下的參數多寡囉。

GTM 怎麼設定GA4自訂維度

例如上圖的click_text放置在GTM中自訂事件的參數。左邊為KEY值(查詢值),右邊為VALUE值。你需要將右邊換成對應的GTM變數,或者是將那一格放置常數。

再回去GA4設定中 => 自訂定義,設定自訂參數名稱,對應GTM的KEY值。

維度名稱:打上你要顯示的名稱,可以自訂名稱。 說明:打上這一格自訂維度的註解,方便人員了解它的作用。 事件參數:打上GTM設定的KEY值欄位名稱。

總結

利用GA4自訂事件漏斗,可以後續搭 配探索維度報表 ,來進行網站使用者的行為分析。如果想要看其他 GA4常見的問題 ,如何串接 BigQuery 、 not set、unassigned 等問題,那你可以到這篇文章查看。

需要任何協助嗎?

最快一個工作天將與您聯繫。

其他文章推薦

查看更多 →
GTM 教學|Shopify 如何設定META 免費像素?
GTM

GTM 教學|Shopify 如何設定META 免費像素?

這篇會教你使用SHOPIFY 的顧客事件 (自訂像素) Customer Pixel 來安裝行銷常用代碼。例如,META, GA4, Gads 轉換代碼等。透過AI 可以快速協助我們完成這些行銷追蹤碼的設定。

【成功案例】GA4 電商事件規劃
成功案例

【成功案例】GA4 電商事件規劃

本次黑客協助規劃舒康雞電商網站,完整規劃GA4電子商務必要事件,以及正確觸發事件。精準蒐集網站用戶行為,大幅提高網店轉換率。

【成功案例】轉換率優化模組
成功案例

【成功案例】轉換率優化模組

本次黑客與三隻斑馬合作,提供轉換率優化模組埋設,幫助電商網站改善用戶動線、用戶體驗,以增加廣告用戶的實際購買轉換率。本次黑客協助提供撰寫前端轉換率模組,以及完整設定、指導轉換率模組使用教學。

Meta Ads MCP 是什麼?不用寫程式也能讓 AI 分析 Meta 廣告
AI

Meta Ads MCP 是什麼?不用寫程式也能讓 AI 分析 Meta 廣告

行銷人、廣告投手一定要學的 MCP 串接方式。輕鬆讓 AI 讀取 Meta 廣告資料,透過 MCP 開始分析你的 Meta 廣告數據、GA4 數據等更多。一站式輕鬆分析廣告數據、廣告操作等複雜任務交給AI!

【成功案例】GA4 導入
成功案例

【成功案例】GA4 導入

本次黑客與 低調生活DLIFE 合作,協助提供完整 GA4 數據健檢、完整GA4事件規劃、提供頂尖數據儀表板。再透過快客數據串接,協助客戶打造一系列的數據報表,同時也提供完整數據流工作的完整解說。

【成功案例】GA4 導入
成功案例

【成功案例】GA4 導入

本次黑客與 澄駒國際車業 合作,協助提供完整GA4事件規劃、提供頂尖數據儀表板。透過快客數據串接,協助客戶打造一系列飛快的數據報表,同時也提供完整數據流工作的完整解說。

GA4教學|數據工程師教你使用GA4 MCP
GA4

GA4教學|數據工程師教你使用GA4 MCP

這篇文章會教你使用 CLAUDE 或是其他 AI AGENT 帶你從 0 串接 GA4 MCP。需要注意創立 Service Account 時候,建議使用個人帳號,如果你是使用企業帳號,則會有權限限制的問題,導致你的GA4 沒辦法加入 Service Account。

【成功案例】修復GA4 網店總收益落差
成功案例

【成功案例】修復GA4 網店總收益落差

台灣開店平台常有數據與GA4 數據大幅落差問題。導致數據人員無法判讀數據的困擾。

【成功案例】修復GA4 網店工作階段判讀落差
成功案例

【成功案例】修復GA4 網店工作階段判讀落差

本次黑客修復網店utm 臉書廣告歸因判讀,以及direct / none 歸因判讀錯誤問題。成功將網店的臉書廣告歸因提升141% 正確修復,而direct / none 也有明顯下降!