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

索引
全文

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

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

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

1、安裝代碼埋設外掛

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

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

2、選好要追蹤的元素

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

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

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

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

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

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

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

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

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


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

4.1 新增片段程式碼

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

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

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

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

  • 第6行:那個按鈕的css類名,已命名為「addline」,此處填入「.addline」。
  • 第7行:事件名稱,可任命名,我建議要有格式以利GA報表的檢視,可以用「myevent_click_XXXX」的格式,此處命名為「myevent_click_addline」。
  • 第8行:事件標籤,可用中文命名,可不必在乎格式,主要知道用途或標示提醒。
GA4如何替單一按鈕埋設追蹤事件點擊之代碼?-7
<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」。

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

▼完成後

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

5、測試點擊

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

即時報表(Realtime / 即時總覽) 中,事件會幾秒內出現。

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

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


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

WordPress教學問答大全-2

作者

我是Facy,浸淫WordPress已十年,前後端技術愛好研究者,學習筆記已數不清寫過幾本了,經手WordPress網站200多個,授課與諮詢數量也超過200個(次)以上。
WordPress很有趣,可深可淺、也可成為你的一技之長,學習永遠不嫌晚,快加入學習行列吧!
一對一教學|企業小型內訓|網站製作|網站搬家|網站維護|網站客製|網站外包 皆可找我!

有問題嗎?歡迎於下方發問

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

下一首

每日登入可以累積學習幣!

Line的不良影響

我個人並不很喜歡用Line,因當我一句訊息回覆後,馬上對方又一句回來,如此往返下去則半小時、一小時就過去了,我無法專心工作,除非是正式諮詢或安排會議的討論,才適合這種模式

有時候對方的問題很多很雜,一傳就是十幾封訊息,這就是訊息轟詐了,我就不知從何回起,我就會只回最後一封的訊息。

有時候對方的問題很多還加上數張截圖,因Line無法條列式呈現,我也無法增加腦力去判斷哪張圖要對應哪則訊息,所以我就會只回最後一封的訊息。

另我不喜歡私人Line被直接來電,因我常常在國道開車需要導航,有時因加班在補眠,這些都會不良干擾。

不是正式會議的討論階段,請您用Email,Email可以條列方式呈現多則問題與截圖,也可以讓我先已讀後再慢慢思考怎樣回覆,避免我自己不小心已讀不回造成對方不佳的感受。🙏 - Wiktionary, the free dictionary

哈囉,在加Line好友之前請先確認一下幾點 :

1、若您是上課的學員或讀者,請直接用Email發問或在該篇文章留言發問,盡量不要直接加Line發問,因我平常很忙,無法守在Line前與您一句一句訊息對答,若每一期 + 每個學員都加Line課後詢問,我短時間內回不完這麼多訊息也會回得很慢喔 ,請見諒。(用Email發問,我會仔細條列說明,你會得到更完整的圖文回覆,甚至還會附上小影片解說。)
Email : [email protected]

2、若是網站外包詢價相關,您再加Line,因我可能需要與您語音會議或遠端連線。

3、補充說明 : Line的不良影響

以上。

目前線上有 41 個使用者: 1 個成員36 個訪客4 個檢索機器人

線上同時最多使用者人數為 121 個使用者,發生於 2024-05-1419:40

1 個成員 正在線上

#1 – Facy 於 2025-12-0701:13
post-tree – 架站勤拿手 [網址] [參照連結網址]

36 個訪客 正在線上

#1 – 訪客 於 2025-12-0701:13
首頁 – 架站勤拿手 [網址] [參照連結網址]

#2 – 訪客 於 2025-12-0701:13
架站勤拿手 » ALL POST – 架站勤拿手 [網址]

#3 – 訪客 於 2025-12-0701:13
post-tree – 架站勤拿手 [網址] [參照連結網址]

#4 – 訪客 於 2025-12-0701:12
架站勤拿手 » 遠振主機簡介 – 架站勤拿手 [網址]

#5 – 訪客 於 2025-12-0701:12
[localwp]電腦本機站如何建立一個WordPress練習環境? – 架站勤拿手 [網址] [參照連結網址]

#6 – 訪客 於 2025-12-0701:11
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#7 – 訪客 於 2025-12-0701:11
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#8 – 訪客 於 2025-12-0701:11
架站勤拿手 » ALL POST – 架站勤拿手 [網址]

#9 – 訪客 於 2025-12-0701:11
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#10 – 訪客 於 2025-12-0701:11
架站勤拿手 » ALL POST – 架站勤拿手 [網址]

#11 – 訪客 於 2025-12-0701:11
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#12 – 訪客 於 2025-12-0701:11
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#13 – 訪客 於 2025-12-0701:11
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#14 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#15 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#16 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#17 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#18 – 訪客 於 2025-12-0701:10
post-tree – 架站勤拿手 [網址] [參照連結網址]

#19 – 訪客 於 2025-12-0701:10
post-tree – 架站勤拿手 [網址] [參照連結網址]

#20 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#21 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#22 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#23 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#24 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#25 – 訪客 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#26 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#27 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#28 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#29 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#30 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#31 – 訪客 於 2025-12-0701:09
post-tree – 架站勤拿手 [網址] [參照連結網址]

#32 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#33 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#34 – 訪客 於 2025-12-0701:09
架站勤拿手外掛 – Page 3 of 10 – 架站勤拿手 [網址]

#35 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

#36 – 訪客 於 2025-12-0701:09
架站勤拿手Page Not Found – 架站勤拿手 [網址] [參照連結網址]

4 個檢索機器人 正在線上

#1 – GPTBot 於 2025-12-0701:14
架站勤拿手 » GA4如何替單一按鈕埋設追蹤事件點擊之代碼? – 架站勤拿手 [網址]

#2 – Google 於 2025-12-0701:12
架站勤拿手Page Not Found – 架站勤拿手 [網址]

#3 – PetalBot 於 2025-12-0701:12
架站勤拿手blog – 架站勤拿手 [網址] [參照連結網址]

#4 – Google 於 2025-12-0701:10
架站勤拿手Page Not Found – 架站勤拿手 [網址]