Whoops

用 GTM 追蹤 LINE 按鈕點擊:GA4 設定教學

教你用 Google Tag Manager (GTM) 追蹤 LINE 按鈕點擊,全程免寫程式。先區分加好友與開聊天兩種事件、設定 GA4 觸發條件與參數,再透過 Preview Mode 與 DebugView 雙層驗證,把點擊數據轉成可優化的轉換漏斗。

作者:褚崇名(Sliven)

本頁目錄

為什麼 LINE 按鈕的點擊追蹤,跟一般 CTA 完全是兩回事

LINE 按鈕的點擊數其實是兩個後台在說兩種語言:GA4 記的是「被點了幾下」,LINE 官方帳號記的是「真的加了好友」,兩者天生對不上。網站右下角那顆浮動的 LINE 按鈕,GA4 後台每個月顯示好幾千次點擊,老闆看了很滿意,行銷團隊也覺得「這個版位做對了」,結果你打開 LINE 官方帳號後台對一下實際加好友數,落差大到讓你懷疑 GTM(Google Tag Manager)是不是設定壞了,還是 LINE 那邊漏算。

以醫美診所、線上服飾這類網站為例,最常踩的同一個坑是:一開始很興奮地把 LINE 按鈕的點擊送進 GA4,看著事件數字往上衝,後來才知道那個數字根本不能直接拿來當轉換成果報告。

核心重點:LINE 按鈕追蹤不是「裝好 GTM、綁個 click 觸發條件」就完事。加好友、開啟聊天與分享是不同意圖;跳往外部 App 時,事件也可能因請求尚未送達而漏記。點擊數與加好友數屬於不同漏斗階段,本來就不應視為同一個指標。

這篇帶你把整件事想清楚:從辨認連結類型、挑對 GTM 觸發條件、命名 GA4 事件、用 DebugView 驗證,再把數字串進轉換報表。如果你還沒裝好 GTM,先看過 GTM 新手攻略 再回來,後面的步驟會順很多。

先分清楚:你網站上的「LINE 按鈕」到底是哪一種連結

追蹤會失準,十次有八次是因為你根本沒搞清楚自己在追什麼。LINE 在網站上的呈現方式有好幾種,每一種對應的使用者意圖都不一樣,把它們全丟進同一個事件、用同一個名字,報表就會變成一鍋雜燴。

底下這張表是實際網站上常見的分類,你可以對照自己網站的原始碼(在瀏覽器按右鍵「檢查」,找那顆按鈕的 <a> 標籤)來判斷:

連結類型常見的 href 格式使用者點下去之後發生什麼對你的價值
個人加好友(QR 掃描碼)line.me/ti/p/~帳號line.me/R/ti/p/@帳號開啟 LINE App,跳出該帳號的個人檔案,要再按一次「加入好友」低,多半是舊版或臨時帳號
官方帳號加好友line.me/R/ti/p/@官方帳號ID開啟官方帳號的加好友頁面高,這才是真正的獲客入口
官方帳號開聊天line.me/R/oaMessage/@官方帳號ID/?訊息預設字直接開啟跟官方帳號的對話窗,可能帶一段預設訊息高,等於主動留下聯絡意圖
LINE 社群分享按鈕social-plugins.line.me/lineit/share?url=...跳出分享到 LINE 聊天的視窗低,這是分享不是諮詢
外掛產生的聊天浮動球沒有傳統 href,是 <button> 或 JS 觸發的行為點擊後由 JavaScript 跳轉或開啟 LINE視情境,但要特別處理

LINE 相關按鈕可能代表不同意圖,例如分享內容、加入官方帳號、開啟聊天或使用 LINE 登入;它們的目的網址與追蹤事件不應混用。「用 LINE 登入」會開啟 OAuth 授權流程,設定方式可參考WordPress 串接 LINE 登入

LINE 官方對各類連結格式有文件說明,命名規則與產生方式應以 LINE Developers 文件為準。動手設 GTM 前,先把網站上每一顆 LINE 按鈕的 href 列成表格,確認它們是加好友、聊天或分享,再決定事件名稱與觸發條件。

具體怎麼抓 href?在 Chrome 打開你的網站,在那顆 LINE 按鈕上按右鍵選「檢查」(或快速鍵 Cmd+Option+C / Ctrl+Shift+C),DevTools 會直接跳到對應的元素。如果是 <a>,看它的 href 屬性;如果按鈕包了好幾層,往上一層一層找,直到看到 <a> 為止,記下那個 href。如果怎麼找都沒有 <a>,那就是 JS 觸發的浮動按鈕,記下它的 class 名稱,後面要用 Click Classes 來鎖定。把每一顆按鈕的 href(或 class)、所在位置、按下去的目的地列成一份清單,這份清單就是你後面建 GTM 觸發條件跟命名事件的依據。

特別提醒一個常見陷阱:有些網站的 LINE 連結是用短網址(例如 reurl.ccbit.ly)包起來的,href 看不出來是 LINE。這種情況你的 Click URL contains line.me 的觸發條件就會漏抓。解法有兩個,一是請工程師把短網址還原成原始 LINE 連結,二是用 Click Text contains「LINE」或「加入好友」來輔助比對。實務上建議選第一個,因為文字比對容易被改文案破壞,URL 比對才穩。

點擊數不等於加好友數:兩個指標為什麼會有落差

這一節是整篇文章中最該記住的重點。很多人把 LINE 點擊追蹤當成「轉換追蹤」在用,這是根本性的誤解。

真相是:GA4 收到的「LINE 按鈕點擊事件」,量測的是「使用者在網站上按了那顆按鈕」,它不等於「使用者成功加到 LINE 好友」,也不等於「使用者真的送出訊息」。 從點下去到真正變成你官方帳號裡的一個好友,中間至少會經過這幾個漏斗,每一層都會漏水:

  1. 點擊但沒跳轉:使用者按了一下,瀏覽器彈出「要用 LINE 開啟嗎」的確認框,他取消了。GTM 的 click 觸發條件在點下去的那一刻就觸發,所以這次點擊被記到,但使用者根本沒進 LINE。
  2. 跳轉了但沒裝 LINE App:桌機訪客尤其常見,點了連結跳到 LINE 網頁版登入頁,然後離開。手機沒裝 LINE 的也一樣。
  3. 開啟了加好友頁但沒按加入:這是最多人漏掉的一段。LINE 會跳出官方帳號的介紹頁,使用者看完覺得「再說吧」就關掉。點擊數進了 GA4,加好友數卻沒進 LINE 後台。
  4. 加好友了但封鎖:加完立刻封鎖或靜音,LINE 後台的「好友數」會計入,「可觸及好友數」卻不會。

換句話說,點擊數到加好友數之間,隔著多道會流失的關卡。落差大小會受裝置、連結類型、受眾與活動設定影響,沒有可通用的倍數。先確認追蹤沒有重複或漏送,再把兩個數字當成不同漏斗階段觀察。

那正確的態度是什麼?把 GA4 的 LINE 點擊數當成「對 LINE 有興趣的意圖訊號」,把 LINE 官方帳號後台的加好友數當成「實際獲客成果」,兩邊對照看,算出你自己的「點擊到加好友轉換率」。這個比率會變成你優化 LINE 按鈕位置、文案、視覺的依據,遠比單看點擊數有意義。如果你想知道 LINE 廣告那側的版位怎麼運作,可以搭配 LINE LAP 廣告投放教學 一起看,那邊的獲客邏輯是另一套。

GTM 追蹤 LINE 點擊,為什麼不建議用「所有元素」觸發條件

進入實作了。GTM 要追蹤點擊,主要有兩種觸發條件可以選,很多人直接挑「Click - All Elements(所有元素)」覺得最保險,什麼都抓得到。實務建議剛好相反,對 LINE 按鈕這個情境,幾乎都應該用「Click - Just Links(僅連結)」

觸發條件類型觸發時機優點缺點適合 LINE 按鈕嗎
Click - Just Links(僅連結)只有點到 <a> 標籤才觸發可以直接用 Click URL 變數比對 href,精準鎖定 LINE 連結按鈕是 <button> 或 JS 觸發的就不會抓到大部分情境首選
Click - All Elements(所有元素)點到任何元素都觸發可處理非連結元素或 JavaScript 按鈕實際 Click Element 會隨點擊位置改變,條件較容易漏抓或誤抓只在 Just Links 抓不到時才用
Element Visibility(元素顯示)元素進入可視範圍時觸發能追「按鈕被看到幾次」追的是曝光不是點擊,不是這篇要解決的問題不適用

All Elements 的問題不是一個點擊會因巢狀元素自動觸發兩三次,而是 GTM 記錄的實際 Click Element 可能是圖示、文字或外層容器。若只用某個子元素的 class 比對,同一顆按鈕會因點擊位置不同而漏抓;條件寫得太寬,又可能把其他元素算進來。

Just Links 模式則是 GTM 智慧化的設計,它只在你點到的元素(或它的祖先)是 <a> 標籤時觸發,一次點擊就一次事件。而且它會把那個 <a> 的 href 完整帶進 Click URL 變數,這對辨識 LINE 連結超級關鍵。

如果 LINE 按鈕由頁面編輯器或浮動按鈕外掛產生,本體可能不是 <a>,而是由 JavaScript 處理。這時 Just Links 抓不到,需改用 All Elements,並以 Click Classes、Click Element 或自訂屬性限縮範圍。GTM 安裝與容器設定可參考 官方快速入門;WordPress 串接則可看 WordPress GTM 加 GA4 串接教學

啟用內建變數:Click URL 和 Click Text 是整件事的命根子

建立觸發條件前,先確認需要的點擊內建變數已啟用;不同容器可能已有部分變數開啟。若預覽模式裡看不到 Click URL,先到內建變數設定檢查。

在 GTM 後台左側選「變數」,點「設定」按鈕展開「內建變數」,你要勾起底下這幾個:

  • Click Element:點到的 DOM 元素,用於 CSS 選擇器比對,是處理浮動按鈕的關鍵。
  • Click Classes:點到元素的 class 屬性,很多外掛會在 LINE 按鈕上掛特定 class,比對這個最省事。
  • Click ID:id 屬性,最精準但按鈕通常沒有 id。
  • Click Target:連結的 target 屬性,知道是否開新分頁。
  • Click URL:連結的完整 href,這是最常用來辨識 LINE 連結的欄位。
  • Click Text:連結的顯示文字,例如「LINE 諮詢」「加入好友」。

Google 官方對這些內建變數有清楚的對照說明,包括每個變數對應到 DOM 的哪個屬性(見 Built-in variables in Tag Manager)。

啟用之後,你的觸發條件就能這樣設:

觸發條件欄位設成為什麼這樣設
Trigger typeClick - Just Links只追 <a> 連結,避免重複計算
Some Link Clicks(部分連結點擊)Click URL contains line.me比對 href 裡有沒有 line.me,涵蓋前面表格裡所有 LINE 官方格式
第二組條件(需要排除分享時)Click URL does not contain social-plugins.line.me把分享按鈕排除,只留加好友與諮詢連結

這組設定會抓到所有點了 line.me 開頭連結的使用者,而且因為我們用的是 Just Links,一次點擊只會觸發一次。如果你想區分「加好友」和「開聊天」,可以在 GA4 事件裡把 Click URL 連同送出去,之後在 GA4 報表用事件參數(event parameter)來拆分。

dataLayer 主動推送 vs GTM 點擊觸發:兩條路線什麼時候用哪個

追蹤 LINE 按鈕點擊,技術上有兩條完全不同的路線。前面講的 GTM 點擊觸發條件是「無腦追蹤」,GTM 自己在網站上監聽點擊事件,你完全不用動網站程式碼。另一條路是「dataLayer 主動推送」,由網站的 JavaScript 在使用者點下按鈕的那一刻,主動把一筆事件資料 push 進 dataLayer,GTM 再去接。兩條路線各有適用情境,搞清楚差異,你才知道自己該走哪一條。

比較項目GTM 點擊觸發條件(Click Trigger)dataLayer 主動推送(dataLayer.push)
要不要改網站程式碼不用,全在 GTM 後台搞定要,工程師要在按鈕加上 push 程式碼
可靠度中等,受 DOM 結構變動影響高,事件由你定義,不會因為版面改動就漏
能帶的參數只能帶 DOM 上的資訊(class、text、url)想帶什麼就帶什麼(訂單金額、會員等級、商品 ID)
適合情境純點擊追蹤、按鈕數量少、無法改程式電商加購、需要業務參數、有前端工程資源
跨站重複使用每個站要重新建觸發條件程式碼寫一次,多站共用

對大部分只是想追 LINE 按鈕點擊的中小網站來說,GTM 點擊觸發條件綽綽有餘,不用勞動工程師。但有兩種情境強烈建議改走 dataLayer 路線:一是電商網站,你想在 LINE 諮詢事件裡帶上「使用者正在看哪個商品、那個商品多少錢」,這些資訊不在 DOM 上,Click URL 拿不到;二是按鈕行為很複雜,點下去之後要經過好幾步確認才真的觸發 LINE,這時追「點擊」意義不大,你會想追「真正完成諮詢意圖的那個瞬間」,那只能靠程式碼主動推送。

走 dataLayer 路線時,工程師要加的程式碼大概長這樣:在使用者點下 LINE 按鈕的事件處理函式裡,呼叫 window.dataLayer.push({ event: 'line_click', link_position: 'header', link_type: 'add_friend' })。然後在 GTM 裡建一個「自訂事件」觸發條件,事件名稱設成 line_click,接上你的 GA4 事件代碼。這條路的好處是,事件名稱跟參數完全由你定義,不會因為行銷同事改了按鈕文案、換了 class 名稱就追蹤失效。

用自訂 JavaScript 變數把按鈕位置標得更精準

前面提過,把 link_position 參數送進 GA4,才能在報表裡拆解「標頭按鈕 vs 浮動球 vs 文章結尾 CTA」哪個位置成效最好。但 Click Classes 不一定有規律的命名,這時你可以用 GTM 的「自訂 JavaScript 變數」自己寫一段邏輯來判斷按鈕位置,這是一個很實用但少人教的技巧。

原理是這樣:GTM 的內建變數 {{Click Element}} 回傳的是被點到的 DOM 元素,你可以用它往上找祖先元素,判斷這顆按鈕落在頁面的哪個區塊。例如標頭按鈕的祖先裡一定有 <header> 或 class 含 header 的元素;浮動球通常包在 position: fixed 的容器裡;文章結尾的按鈕在 <article> 內而且接近結尾。自訂 JavaScript 變數就是讓你把這段判斷邏輯寫成一個函式,回傳位置標籤。

下面是一段可參考的範例邏輯(實際 class 名稱要換成你自己網站的):

如果點擊元素的祖先有 class="site-header",回傳 header;祖先有 class="floating-line",回傳 floating;祖先有 id="post-cta",回傳 post_cta;祖先有 class="sidebar",回傳 sidebar;都不符合就回傳 other

把這個變數命名成 {{Line Position}},然後在 GA4 事件代碼的事件參數裡把 link_position 設成 {{Line Position}}。送出去之後,GA4 報表的「按事件參數」就能看到每個位置的點擊量。這個做法的好處是,就算行銷同事又新增了第三顆、第四顆 LINE 按鈕,只要它落在已定義的區塊裡,位置標籤會自動帶上,不用每加一顆按鈕就回來改 GTM。

不過要誠實提醒:自訂 JavaScript 變數對不熟 JavaScript 的人有點門檻,而且它跟 DOM 結構綁定,網站改版時可能要跟著調。如果你的網站按鈕就那兩三顆、短期內不會大改,直接用 Click Classes 比對反而更省事。工具是拿來解決問題的,不是越複雜越好。

一頁有多個 LINE 按鈕、浮動按鈕、動態彈窗:進階情境怎麼不追錯

標準作法處理的是「頁面裡就一顆 <a href> LINE 連結」這種乾淨情境。但真實的 WordPress 站,LINE 按鈕常出現在標頭、側邊欄、文章結尾、浮動球與動態彈窗。這時要解決的是「怎麼知道這次點擊來自哪個位置」。

多顆按鈕都連到同一個 LINE 帳號

這是最常見的狀況。解法是把按鈕位置也送進 GA4 事件參數,這樣事後才能拆解。你可以新增一個 GTM 變數來標記位置,或更實際的做法是:直接用 Click Classes 或 Click Element 的 CSS 路徑來反推位置。

具體做法是在送 GA4 事件時,多帶一個自訂參數 link_position,值用 Lookup Table 變數映射。例如 Click Classes 包含 header 就回傳 header,包含 floating 就回傳 floating_ball。沒有 Lookup Table 也行,直接把 Click Classes 整包送進去當參數,事後在 GA4 報表自己分類。

浮動球是 JavaScript 觸發的,沒有 href

部分浮動按鈕外掛產生的按鈕,本質上是 <div><button>,並沒有標準的 <a> 連結,點下去之後才由 JavaScript 跳轉到 LINE。這時 Just Links 抓不到該點擊,必須改用 All Elements,並以 Click Classes、Click Element 或更穩定的自訂屬性限縮。

WordPress 上加浮動 LINE 按鈕的做法,可以參考 WordPress 加 LINE 浮動按鈕教學,那邊會告訴你常見外掛會在按鈕上掛哪些 class。知道 class 之後,觸發條件設成:

觸發條件欄位設成
Trigger typeClick - All Elements
Some ClicksClick Classes contains line-float(換成你外掛實際的 class)

重點是「Click Classes contains」這個條件一定要設,否則頁面上每一個點擊都會被送成 LINE 事件,數字會爆掉。

動態彈窗裡的 LINE 按鈕

動態彈窗的按鈕可能在開啟時才插入 DOM。GTM 的 Click 觸發條件會在實際點擊發生時判斷變數,因此動態插入的 <a> 仍可用 Just Links 搭配 Click URL 條件追蹤。若彈窗外掛攔截點擊、使用 Shadow DOM 或把連結包成非 <a> 元素,則要用預覽模式檢查實際事件與 DOM,再選 All Elements 或自訂事件。

彈窗裡的按鈕若在點擊後立即導向或關閉頁面,追蹤請求可能來不及送出。可在 Just Links 觸發條件評估「Wait for Tags」並設定合理逾時,再用預覽模式與實機驗證;單靠 target="_blank" 不能保證事件送達,也不該只為追蹤而改變使用者導覽方式。

GA4 事件該怎麼命名:點擊意圖與真正名單要分開

追蹤設好了,接下來要想的是「這個事件在 GA4 裡要叫什麼」。這裡有兩派做法,各有適用情境。

做法一:LINE 按鈕點擊用自訂事件。 點擊只代表聯絡意圖,尚未送出訊息或完成加好友,建議用 line_contact_click 這類清楚的自訂名稱。若要把它設成 GA4「重要事件」,報表名稱也應明確標示為點擊,不要把它當成已取得名單。沒有可辯護的價值模型時,不要硬填 value;若送出金額,還要一併提供適用的 currency

做法二:確認名單成立後才用 generate_lead GA4 將 generate_lead 列為使用者提交表單或資訊請求時的推薦事件。若你的系統能從 LINE Messaging API 的 follow webhook、完成諮詢或後端流程確認名單成立,再於該節點送出 generate_lead 比較符合語意。GA4 對自訂事件名稱有明確規範:以英文字母開頭,使用英文字母、數字與底線,並避開保留前綴(見 GA4 事件命名規則文件)。

建議把聯絡按鈕點擊送 line_contact_click,分享按鈕送 share 或明確的自訂事件;只有確認名單成立的節點才送 generate_lead。這樣重要事件與名單報表不會被單純點擊灌大。

行為類型建議事件名稱是否設為重要事件關鍵事件參數
點擊官方帳號加好友連結line_contact_click依報表需求,可設但須標明是點擊method=line_add_friend, link_position
點擊官方帳號聊天連結line_contact_click依報表需求,可設但須標明是點擊method=line_chat, link_position
確認完成加好友或提交需求generate_leadmethod=line
個人帳號加好友line_click否(先觀察)link_type=personal, link_position
分享到 LINEsharemethod=line, page_path

用 DebugView 而不是「發布然後祈禱」:驗證的正確姿勢

設好代碼、按下發布之後,很多人就走了,過幾天回來看 GA4 報表發現沒數字,才開始亂猜哪裡壞掉。這是最浪費時間的做法。正確的驗證有兩層,一層在 GTM,一層在 GA4,缺一不可。

第一層:GTM 預覽模式

GTM 後台右上角點「預覽」,進入 Tag Assistant,輸入你的網站網址。它會在新分頁打開你的網站並連上除錯模式,這時候你點任何一顆 LINE 按鈕,回到 Tag Assistant 視窗就能看到:

  • 左側的「Summary」會列出 Link Click 事件。
  • 點進去之後,中間的「Tags Fired」會顯示你的 GA4 事件代碼有沒有被觸發。
  • 如果沒被觸發,看「Tags Not Fired」找出原因(通常是觸發條件的比對沒過)。
  • 下方的變數區可以確認 Click URL、Click Classes 的實際值,這對除錯觸發條件超有用。

這一層確認的是「代碼有沒有被觸發、觸發條件對不對」。

第二層:GA4 DebugView

GTM 預覽只告訴你代碼送出去了,但送出去的資料有沒有正確進到 GA4、事件名稱跟參數對不對,要在 GA4 的 DebugView 看。路徑是 GA4 後台「管理」→「資料顯示」→「DebugView」。

進入 DebugView 前必須在瀏覽器安裝 GA Debug 擴充功能,或是在 GTM 預覽模式下瀏覽(Tag Assistant 會自動帶入 debug 參數)。然後 DebugView 會即時顯示你這個裝置送出的每一個事件,包含事件名稱、參數、觸發時間軸。你點一次 LINE 按鈕,這裡應該幾秒內就看到對應事件出現。Google 官方對 DebugView 的啟用與判讀有完整說明。

建議建立這樣的 SOP:每次改完 GTM,一定在預覽模式點過每一種 LINE 按鈕(標頭、側欄、結尾 CTA、浮動球、彈窗各點一次),確認 DebugView 裡五次事件名稱跟參數都正確,才按下發布。這個流程能避免大部分「上線後才發現追錯」的事故。如果你對 GA4 報表怎麼讀還不熟,Google Analytics 完整教學 會幫你把基礎補起來。

把 LINE 點擊串進重要事件與報表,而不是只看一條事件數

事件能正確進 GA4 只是起點。真正有價值的,是把這個事件串成你可以拿來決策的報表。這一塊很多人做到「事件進來了」就停手,很可惜。

依業務定義設定重要事件

在 GA4 管理介面把符合業務定義的事件設為「重要事件」。若只有 line_contact_click,名稱與報表必須清楚標示它是點擊意圖;若已能確認名單成立,再把 generate_lead 設為重要事件。需要用於投放時,可從 Analytics 的重要事件建立 Google Ads 轉換動作,並同步核對歸因設定。

別忘了註冊自訂維度,否則 link_position 在報表裡看不到

這是新手最容易卡關的一步,值得單獨講。你把 link_positionmethod 這些自訂參數跟事件一起送進 GA4,可是打開 GA4 報表卻發現怎麼都找不到這些欄位可以拆分。原因是:GA4 不會自動把每一個事件參數都做成可分析的維度,你得手動註冊成「自訂維度」它才會出現在報表裡。

路徑是 GA4 後台「管理」→「資源設定」→「自訂定義」→「自訂維度」,點「建立自訂維度」,維度名稱自取(例如「按鈕位置」),事件參數填 link_position(要跟你 GTM 送出的參數名一字不差),範圍選「事件」。註冊之後,未來新送進來的資料就會帶上這個維度,過幾個小時到一天後就能在「探索」報表跟標準報表裡用它拆分。

一個小提醒:免費版 GA4 每個資源能註冊的自訂維度有數量上限(目前是 50 個事件範圍的自訂維度,見 Google Analytics 的自訂維度與指標說明),別為了一時方便把什麼參數都註冊,留額度給真正會拿來分析的。對 LINE 追蹤來說,實務上通常只註冊 link_position(按鈕位置)跟 method(聯絡管道)這兩個,夠用了。

用 LINE 官方來源功能追加好友,UTM 留給網站連結

UTM 是網站分析用的查詢參數,不能直接讓 LINE 官方帳號後台辨識加好友來源,也不應任意附加在加好友網址後。要量加好友,可使用 LINE 官方帳號管理工具提供的加入好友路徑或活動連結;需要程式化確認時,則以 Messaging API 的 follow webhook 記錄實際加入或解除封鎖事件。若 LINE 訊息會連回網站,再在那個網站網址使用 UTM 追蹤碼

用 Looker Studio 把點擊數跟加好友數放一張圖

GA4 的點擊數跟 LINE 官方帳號後台的加好友數,分屬兩個系統,預設沒辦法放在同一個圖表。解法是用 Looker Studio(原 Data Studio)把 GA4 的資料來源跟 LINE 後台匯出的 CSV 接起來,做成一個「點擊 vs 加好友」的對比儀表板。這個儀表板一旦做起來,你每個月跟老闆開會時就不用兩個後台切來切去,一張圖講清楚。Looker Studio 怎麼接 GA 跟 Search Console,Looker Studio 教學 有完整步驟,加一個 CSV 資料來源就可以套用。

串到這一層,LINE 按鈕追蹤才算真正閉環:GA4 告訴你「多少人點」、LINE 後台告訴你「多少人加」、Looker Studio 把兩邊兜成轉換率,這才是可以拿來優化按鈕位置跟文案的依據。

廣告阻擋與瀏覽器隱私設定:數字永遠對不齊的另一個真相

就算你的 GTM 設定完美無缺,GA4 收到的 LINE 點擊數還是會比「實際發生」的點擊少。這不是你的錯,是整個網站分析都得面對的結構性耗損,而且這幾年只會越來越嚴重。

主要有三個力量在吃掉你的數字:

  • 內容阻擋擴充功能:部分過濾清單會阻擋 GA4、GTM 的腳本或請求,因此這些訪客的瀏覽與點擊可能不會進 GA4。
  • 瀏覽器隱私機制:不同瀏覽器與使用者設定會限制 Cookie、跨站追蹤或部分分析請求,實際影響因環境而異。
  • 不需要互動就跳轉:LINE 連結點下去會直接跳 App,如果跳轉發生在 GA4 事件送出完成之前,那次事件就會遺失。手機上尤其明顯,因為跳轉速度比桌機快。

因此 GA4 點擊數可能因同意設定、內容阻擋或跳轉時序而漏記,不能視為所有實際點擊。它也不能與 LINE 後台的加好友數逐筆對帳,因為「點擊」與「完成加好友」本來就是不同漏斗階段。觀察趨勢時,先檢查追蹤設定與網站改版,再比較流量組成與同意率是否改變。

伺服器端代碼(Server-side Tagging)可在自有的伺服器容器中處理與轉送量測資料,改善資料控管、效能與品質;使用第一方端點有時能提高請求穩定性,但不能保證繞過內容阻擋,也不能取代同意管理與隱私義務。只追 LINE 按鈕時,先把客戶端事件定義與驗證做好,再依資料治理需求評估是否導入。

五個最常見的追蹤失靈原因,一張表帶走

底下整理五種常見故障狀況。當 GA4 LINE 事件數字異常時,可以依序排查:

症狀最可能的原因排查與修法
事件數完全是零Click URL 等內建變數沒啟用,觸發條件永遠不成立到「變數」→「設定」勾起 Click 類變數,重新預覽確認 Click URL 有值
事件數爆量、明顯灌水用了 All Elements 又沒限縮 Click Classes,全站點擊都送改用 Just Links,或加上 Click Classes contains 條件限縮到 LINE 按鈕
桌機有事件、手機沒有App 跳轉前請求未完成,或行動版使用不同按鈕結構先用實機預覽查 DOM 與事件;需要時評估 Wait for Tags,別只靠 _blank
浮動球怎麼點都沒事件浮動球是 JS 觸發的 <button>,Just Links 抓不到改用 All Elements + Click Classes contains 外掛的 class
事件有、但點擊數跟加好友數差太多這不是設定錯,是漏斗自然耗損(見前面那一節)別 debug,改成追蹤「點擊到加好友轉換率」,當成優化指標

這張表可作為第一輪排查;若仍找不到原因,再檢查同意模式、標籤載入順序、跨網域與外掛自訂事件。

結尾:一份今天就能動工的 LINE 追蹤清單

把上面所有觀念濃縮成一份你可以直接照做的步驟。建議排一個上午的時間,照著走一遍:

  1. 盤點:在網站每個頁面把每一顆 LINE 按鈕找出來,記錄它的 href、位置、是哪一種連結類型(加好友/開聊天/分享/浮動球)。
  2. 啟用變數:到 GTM「變數」→「設定」勾起 Click Element、Click Classes、Click URL、Click Text 這幾個內建變數。
  3. 建觸發條件:有 href 的用「Just Links + Click URL contains line.me」,浮動球那種 JS 按鈕用「All Elements + Click Classes contains 外掛 class」。
  4. 建 GA4 事件代碼:LINE 聯絡按鈕送 line_contact_click,分享型送 share;只有確認名單成立才送 generate_lead
  5. 雙層驗證:用 GTM 預覽模式點過每一種按鈕,再到 GA4 DebugView 確認事件名稱跟參數都正確,全部綠燈才發布。
  6. 設定重要事件:把符合業務定義的事件設為 GA4 重要事件,需要投放時再建立 Google Ads 轉換動作。
  7. 設定來源追蹤:加好友來源使用 LINE 官方工具或 follow webhook;只有連回網站的網址才掛 UTM。
  8. 做儀表板:用 Looker Studio 把 GA4 點擊數跟 LINE 後台加好友數兜成一張對比圖,算出你自己的「點擊到加好友轉換率」。

做完這八步,你拿到的不再是一個會讓老闆誤判的「點擊數」,而是一條從點擊、跳轉、加好友到實際轉換的完整觀測鏈。記得那句話:點擊數是訊號,加好友數才是成果,兩個都要量,但千萬別拿訊號當成果報告。

追蹤上線之後,每個月要看的三個數字

追蹤設好只是開始,重點是上線之後你怎麼用它。很多網站把 LINE 點擊追蹤裝好之後,就再也沒人打開那張報表,等同於白做。給你一份每個月花十分鐘就能跑完的檢查清單,養成習慣,這套追蹤才會發揮價值。

看什麼在哪看異常時代表什麼
各位置 LINE 點擊量(用 link_position 拆分)GA4 探索報表,事件 line_contact_click 按參數分浮動球點擊突然歸零,可能是按鈕結構或 class 改變,需重新預覽
點擊到加好友轉換率(LINE 加好友數 ÷ GA4 點擊數)Looker Studio 對比儀表板比率變化時,先確認兩邊期間、去重與來源口徑一致,再查按鈕或受眾變化
LINE 加好友來源結構LINE 官方帳號管理工具的加入好友路徑或活動資料某一來源占比明顯變化時,回查對應活動與連結設定

這三個數字裡,第二個「點擊到加好友轉換率」是最有行動意義的。它一旦建立基準線,你每一次改 LINE 按鈕的位置、顏色、文案、連結類型(加好友 vs 開聊天),都能用這個比率來量化成效。比方說你把按鈕文案從「LINE 諮詢」改成「LINE 立即詢問」,跑兩週看比率有沒有變,這就是用數據取代直覺的循環。這種小步快跑的優化節奏,比一次大改版更能累積出穩定的轉換提升。

還有一個觀念想提醒你:追蹤這件事本身就是會折舊的資產。網站改版、外掛更新、LINE 連結格式調整、GTM 容器被誤改,任何一個變動都可能讓你的追蹤悄悄失效。建議每季排一次「追蹤健檢」,照著前面 DebugView 那一節的 SOP 跑一遍,確認每種 LINE 按鈕的事件都還在正確送出。寧可花一小時定期檢查,也不要等到年底發現半年的數字都是錯的。

若要整合 LINE、表單、電話、Email 與廣告轉換,應先盤點事件、觸發條件、同意模式、跨網域與驗證方式。可先依前述步驟建立 LINE 點擊追蹤,再用 GTM Preview、GA4 DebugView 與實際報表測試;複雜網站則可能需要額外的技術與隱私設定。

常見問題

用 GTM 追蹤 LINE 按鈕點擊需要寫程式嗎?
不用。整個流程從啟用內建點擊變數、建立觸發條件到發送 GA4 事件,全在 GTM 與 GA4 的圖形介面完成,觸發條件用的是 Click URL contains line.me 這類點選條件,全程圖形介面完成。
GTM 怎麼辨識哪個點擊是 LINE 按鈕?
靠點擊當下抓到的元素屬性,最穩定的是 Click URL 是否包含 line.me(用 contains 條件涵蓋加好友與開聊天兩種格式);若按鈕由 JavaScript 產生導致網址為空,改用 Click Classes 或 Click ID 搭配 Click Text 判斷。
為什麼 GTM 設好了 GA4 卻沒收到事件?
九成是三個原因之一:GA4 的 Measurement ID 填錯、GA4 設定代碼沒連到正確的觸發條件、或忘記在 GTM 點提交與發布。用 Preview Mode 確認代碼有觸發,再用 DebugView 確認事件有進到 GA4,兩層都查就能定位斷點。
追蹤 LINE 加好友和開聊天要分開設事件嗎?
建議分開。兩者網址結構與使用者意圖不同(加好友是 line.me/R/ti/p 類、開聊天是 line.me/R/oaMessage 開頭),點擊階段建議共用 line_contact_click 自訂事件,再以 method 參數(line_add_friend/line_chat)區分;只有透過 follow webhook 等後端流程確認名單成立時,才另外送出 generate_lead,這樣重要事件與名單報表才不會被單純點擊灌大。

操作步驟

  1. 盤點網站上每一個導向 LINE 的按鈕(浮動按鈕、頁首、頁尾、文章結尾、聯絡頁),逐一標記是加好友還是開聊天
  2. 在 GTM 啟用 Click 類別的所有內建變數(Click URL、Click Element、Click Classes、Click ID、Click Target、Click Text)
  3. 對網站上的 LINE 按鈕按右鍵檢查,記下 href、class、id,並判斷是否為 JavaScript 觸發的外掛按鈕
  4. 建立觸發條件,Click URL contains line.me 涵蓋加好友與開聊天格式;JS 按鈕則改用 Click Classes 或 Click ID
  5. 建立 GA4 Event 代碼,聯絡點擊用 line_contact_click 並以 method 參數區分加好友或開聊天,帶上 link_position 參數;只有確認名單成立才送 generate_lead
  6. 用 GTM Preview Mode 確認代碼有觸發,再開 GA4 DebugView 確認事件即時進到 GA4,兩層都通過
  7. 回 GTM 點提交與發布,等待 24 至 48 小時查看標準報表,並把數據串成轉換漏斗找出優化層

主題聚落|行銷數據分析(GA4/GTM/Looker) 看「數位行銷與內容行銷」中樞 →

相關文章

褚崇名(Sliven) 創辦人・巫普斯科技有限公司

長期投入技術 SEO、GEO/AEO 與 AI 搜尋實務。本站文章以可驗證資料、公開來源與實作觀察整理而成。

完整作者介紹LinkedInGitHubX

想把這篇的方法用在自己的站上?

SEO 健檢、GEO/AEO 引用優化、網頁設計諮詢——把文章裡的方法落地到你的網站。