架站勤拿手

GA4如何替單一按鈕埋設追蹤事件點擊之代碼？

GA4 會自動收集點擊事件，但僅包含「點擊外連連結」的點擊。

可前往「管理 > 資源 > 資料串流」，點擊安裝在網站的資料串流，點擊「加強型評估」，確認「點擊」事件是否被勾選 ( 預設勾選 )，如果已經勾選，表示 GA4 會自動收集的事件。

自訂事件追蹤 : 想對網頁上某個元素做點擊追蹤，仍需先埋好全局的GA代碼，再個別針對想要追蹤的網頁元素埋設另一組代碼來做事件追蹤，一般為「點擊」追蹤。

1、安裝代碼埋設外掛

安裝此外掛「Header Footer Code Manager」，專門給GA追蹤來使用。

2、選好要追蹤的元素

找到想要追蹤點擊事件的元素，例如某按鈕、選單中的某選項…

不論是用什麼編輯器所設計的元素、按鈕都可以。

3、賦予此元素一個CSS的id或class類名。

(如果此元素已有內建可用的CSS id可直接取用，就不用再賦予)

▼替主選單的某一選項加上css類名

▼區塊編輯器的某一按鈕加上css類名

下圖例子的css類別命名為「addline」。

4、修改我準備好的代碼，埋入即可。

4.1 新增片段程式碼

例如以加Line好友的按鈕來做追蹤，按鈕的css類別已命名為「addline」。

▼下圖請務必選「JavaScript」與「Footer」
(為了避免當這段代碼執行時，Google Analytics 的全域代碼還沒載入完成，故在此刻意把插入位置選在「Footer」)

4.2 貼上代碼範本，並修改第6、7、8那三行

• 第6行:那個按鈕的css類名，已命名為「addline」，此處填入「.addline」。
• 第7行:事件名稱，可任命名，我建議要有格式以利GA報表的檢視，可以用「myevent_click_XXXX」的格式，此處命名為「myevent_click_addline」。
• 第8行:事件標籤，可用中文命名，可不必在乎格式，主要知道用途或標示提醒。

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {   // DOM 載入完成後才執行

  // 自訂追蹤設定
  var trackSelector = '.addline';   // 要追蹤的元素 (# 或 .)
  var eventName = 'myevent_click_addline';  // 事件名稱
  var labelName = '加line好友';    	 // 事件標籤

  // 先給元素加 class
  $(trackSelector).addClass("myga");

  // 綁定點擊事件
  $(document).on('click', trackSelector, function() {
    gtag('event', eventName, {
      'event_label': labelName,
      'page_location': window.location.href
    });
    console.log('🎯 GA4 事件送出，並點擊觸發');
  });

});
</script>

存檔。

PS : $(trackSelector).addClass(“myga”); →這句是我用來測試以上代碼是否有正常載入並運作，有正常運作的話該元素的css名稱會動態被新增一個css類名叫「myga」。

▼完成後

5、測試點擊

測試點擊，至GA後台觀察即時事件、報表。

在 即時報表（Realtime / 即時總覽） 中，事件會幾秒內出現。

但要在『標準報表』「管理 → 資料顯示 → 事件」中出現，通常需要 24 小時內（有時幾小時）。