跳到主要內容

用 Google Tag Manager 建立全站點擊自訂事件至 Google Analytics

用 Google Tag Manager 建立全站點擊自訂事件至 Google Analytics

只要有全站有埋設 Google Tag Manager (GTM) 以及全站網頁瀏覽觸發 Google Analytics (GA) 就不需要編寫任何 Javascript 就可以在有加入「data-」屬性的 html 標籤自動觸發點擊 click 自訂事件,按照 GA 事件衡量文件說明,必需要傳送 eventAction 互動類型,例如點擊 click 以及 eventCategory 互動對象,例如按鈕 button;再來可以選用傳送 eventLabel 事件分類說明(字串形式)還有 eventValue 事件的相關數值(數字形式),所以在 html 標籤上可以利用「data-」屬性建立如下語法:

<a href="連結網址" target="_blank" data-eventAction="click" data-eventCategory="點擊按鈕" data-eventLabel="連結文字說明">連結文字</a>

建立自動事件變數

經過測試 eventCategory 和 eventLabel 可以輸入中文方便日後報表辨識資料,只要在想要追蹤的標籤對象加入以上屬性即可,點擊動作偵測則使用 GTM 追蹤不需要編寫 Javascript 來監聽點擊事件,接著開啟 GTM 的「變數」分頁新增「自動事件變數」然後在「變數屬性」下拉選單選擇「元素屬性」接著在「屬性名稱」填入 data-eventAction 接著為你的變數命名(中英文皆可)儲存即可。另外 data-eventCategory, data-eventLabel 或 data-eventValue 也按照以上方式新增變數。

GTM 自動事件變數設定

全站點擊觸發條件設定

接著切換到「觸發條件」分頁,建立點擊「所有元素」的觸發條件,啟動時機改成「部分點擊」然後變數下拉選單選擇 data-eventAction 的變數名稱,例如我命名的“事件動作”第二個條件選擇「等於」最後的欄位填寫「click」也就是點擊時當「data-eventAction="click」就會觸發,同樣命名完後儲存即可。

GTM 點擊事件觸發條件

設定通用 GA 自訂事件

最後切換到「代碼」分頁,建立「Google Analytics (分析):通用 Analytics (分析)」代碼。然後在追蹤類型下拉選單選擇「事件」,接著在事件追蹤參數分別填入類別、動作、標籤以及值的變數,然後「Google Analytics (分析) 設定」欄位選擇你先前使用的 GA 追蹤編號變數即可,最後觸發條件選擇剛剛設定的事件點擊觸發條件後,就可以儲存了。

GTM 的通用 GA 事件設定

GA4 自訂事件設定

如果要使用「Google Analytics (分析):GA4 事件」傳送自訂事件,GA4 是採用「事件名稱」為主下面再對應事件相關的「參數」而 Google 是建議使用他們的規範事件名稱去命名,但你還是可以自訂事件命名,不過在 GA4 報表中你必須先定義好自訂事件參數的指標與維度,才可以在事件報表中查看。而且也不能使用 eventAction, eventCategory, eventLabel, eventValue 這四種名稱,所以在「事件名稱」與「參數」欄位需要重新命名,請參考下圖

GTM 的 GA4 事件設定

由於 GA4 並沒有規定一定要傳送 eventAction,因此我圖例上的設定就不再傳送,當然如果你要傳送也是沒問題的,GA4 每個事件是可以傳送到 25 個參數的!最後觸發條件選擇先前設定的事件點擊觸發條件,就可以儲存了。

一般的通用 GA 報表直接前往「行為 > 事件」查看即可,而 GA4 報表請先到「事件 > 所有事件」右上角的「管理自訂定義」按鈕設定。「自訂維度」的部分就是建立事件參數,例如我的範例是使用 clickCategory 與 clickLabel 的參數,維度說明分別是點擊事件類別與點擊事件內容,按照你的需求輸入說明即可。

GA4 自訂事件參數需設定維度或指標

如果你傳送的事件參數是以數值為資料,例如是貨幣、距離或是時間,那麼就要切換到「自訂指標」這邊來建立。 最後經過 24 ~ 48 小時接收數據後,就可以在「參與 > 事件」的報表中看到數據與自訂的維度嘍~

這個網誌中的熱門文章

Google Doodles 中文版遊戲全蒐集

Google Doodles  塗鴉牆原本是在節慶或紀念日時,會在 Google 首頁臨時刊登的特別圖案,後來發展成動畫以及互動遊戲的形式,而且有些遊戲做的很用心很好玩!甚至還有直播主會特別開台遊玩。這裡蒐集了歷年有「中文」版本且支援手機遊玩的互動遊戲,have fun 👏 PAC-MAN 2025 萬聖節 推出時間:2025/10/30 遊戲說明:眾所皆知的 PAC-MAN 小精靈遊戲,全部由 8 個關卡,別忘記蒐集所有的物品 好玩程度:⭐⭐⭐⭐

分享 Google 日曆的中華民國 114 ~ 115 年 (2025 ~ 2025 休假行事曆也包含勞動節)

以下是 Google 日曆按照行政院人事行政總處公告的中華民國 115 年 (2026) 政府行政機關辦公日曆表製成的,並且再加入 5/1 勞動節。 請使用此 鏈接開啟 Google 日曆 點擊左下角的《新增至 Google 日曆》匯入,另有 iCAL 格式 提供其他應用程式匯入。

推薦 Visual Studio Code 前端網頁設計的擴充套件(延伸模組 Extensions)

以下整理推薦幾個 Visual Studio Code (VSCode) 前端網頁設計開發會使用到的擴充套件(延伸模組 Extensions)這些都是我使用過後覺得必備也常用的套件,適合 Html, Sass/SCSS, JavaScript 網頁設計語法開發!