更新時間：2026年6月8號
在GTM中，除了常見的點擊追蹤、表單提交追蹤之外，還有一個非常實用的觸發條件類型：元素可見度。
本篇將以Contact Form 7表單提交成功訊息追蹤 為例，介紹GTM元素可見度的使用方式。
什麼是元素可見度？
元素可見度（Element Visibility）是 GTM 內建的觸發條件類型。
當指定元素進入瀏覽器可視範圍時，即可觸發對應的標籤（Tag）。
例如：
- 圖片出現在畫面中
- 廣告區塊被使用者看到
- 表單提交成功訊息顯示
都可以利用元素可見度來進行追蹤。
適用情境
元素可見度最常見的應用場景包括：
- 表單提交成功追蹤：某些表單提交成功後，不會跳轉感謝頁，而是在原頁面顯示成功訊息。此時就可以透過追蹤成功訊息是否出現來判斷表單是否送出成功。
- 廣告曝光追蹤：當廣告區塊出現在使用者畫面中時，發送曝光事件。
- Banner曝光追蹤：統計首頁 Banner 的實際曝光次數，而非單純頁面瀏覽量。
- 內容閱讀追蹤：追蹤使用者是否看到文章中的特定段落或CTA區塊。
實作範例
假設我們要追蹤以下頁面（https://www.haranhuang.com/contact-form-7.html）的Contact Form 7表單提交：
當表單送出成功後，頁面會顯示成功提示訊息：
由於成功訊息會動態出現在頁面中，因此非常適合使用元素可見度來追蹤。
Step 1：找出元素選擇器
首先開啟網頁開發者工具（Developer Tools）。
將滑鼠移至成功訊息區塊後，檢查元素（Inspect）：
可以看到成功訊息的 HTML，其中class是wpcf7-response-output，這個就是Contact Form 7 成功訊息使用的 CSS Class，可以透過 CSS Selector來定位這個元素。
Step 2：建立元素可見度觸發條件
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「元素可見度」，命名為“表單提交示範”，然後做如下設定：
元素選擇器裡之所以設定為div.wpcf7-response-output，是因為這個class是在div裡。
若不確定元素類型，也可以直接使用.wpcf7-response-output，效果通常相同。
Step 3：建立GA4事件代碼
接著建立一個GA4事件代碼。
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“表單提交”，做如下設定：
這樣就可以實現事件跟蹤。
Step 4：GTM中預覽調試
接下來就是調試了，在GTM中點擊右上角的“預覽”進入調試狀態，如果你還不知道怎麼調試，請看：新版Google Tag Manager 預覽模式指南——Tag Assistant
調試頁面打開後，返回到Tag Assistant頁面，
事件如預期觸發。
注意事項
元素可見度並非適用於所有表單。
必須符合以下條件：表單提交成功後會顯示特定元素
例如成功訊息、感謝區塊或完成提示
不適用於以下情況
- 提交後直接跳轉感謝頁
- 提交後重新整理頁面
- 沒有顯示任何成功元素
若屬於上述情況，建議改用Form Submission觸發條件、Data Layer事件、感謝頁Page View追蹤等方式實作。
總結
元素可見度是 GTM 中非常實用的觸發條件類型，適合追蹤頁面中特定元素的曝光與顯示狀況。
在表單追蹤方面，如果表單送出成功後會顯示成功訊息，就能利用元素可見度偵測該訊息是否出現，進而發送 GA4 事件，而不需要修改網站程式碼。
相較於傳統的表單提交追蹤方式，元素可見度設定簡單、相容性高，特別適合 WordPress 的 Contact Form 7 等表單外掛使用。