設計師跟行銷人永遠在吵架
「你們設計的網站好看是很好看，但我們根本追蹤不到使用者點了哪個按鈕。」
「你們行銷團隊要加追蹤碼就加嘛，為什麼要我們改設計？」
這種對話在台灣的網站開發團隊裡每天都在上演。設計師覺得追蹤是工程師的事，行銷人覺得設計師應該配合，工程師覺得這些需求為什麼不早說。
問題的根源是：大部分的設計師不了解追蹤埋點是怎麼運作的，所以在設計的時候不會考慮到「這個設計能不能被追蹤」。而行銷人不了解設計的限制，所以提出的追蹤需求經常跟設計衝突。
這篇文章是寫給設計師看的（但行銷人也該看），目的是建立一個基本的共同語言。你不需要會寫 JavaScript 或設定 GA4，但你需要知道幾個核心觀念，這樣你的設計才不會變成行銷團隊的噩夢。
GA4 在追蹤什麼：兩分鐘搞懂
GA4（Google Analytics 4）是目前最多人用的網站數據分析工具。你需要知道的基本概念只有兩個：頁面瀏覽和事件。
頁面瀏覽很直覺——使用者打開了一個新頁面，GA4 就記錄一次。每個頁面有一個 URL，GA4 用 URL 來辨別不同的頁面。這是 GA4 會自動追蹤的，不需要額外設定。
事件是使用者在頁面上做的各種互動動作。點了一個按鈕、播放了一段影片、滾動到頁面的 50%、提交了一個表單、點了一個外部連結——這些都是事件。GA4 會自動追蹤一些基本事件（像滾動深度、外連點擊），但比較重要的事件（像「點了加入購物車」「提交了聯絡表單」「點了電話按鈕」）通常需要手動設定。
手動設定事件的方式通常是透過 Google Tag Manager（GTM）。GTM 的運作邏輯是：「當使用者在頁面上做了某個動作（觸發條件），就發送一個事件到 GA4（標籤）」。
設計師不需要會操作 GTM，但你需要知道：GTM 在設定觸發條件的時候，是根據頁面上的 HTML 元素來辨別的——按鈕的 ID、Class、文字內容、URL 等等。如果你的設計讓這些元素無法被辨別，追蹤就做不起來。
設計師常犯的五個追蹤殺手
以下這五種設計方式，每一種都會讓負責追蹤的人很頭痛。
所有按鈕都長一樣，沒有獨立的 ID 或 Class
假設你的 Landing Page 上有五個 CTA 按鈕，文字都是「了解更多」，Class 都是 btn-primary，也沒有給 ID。行銷人想知道「使用者是點了頁面頂部的『了解更多』還是底部的」——抱歉，追蹤不到。因為 GTM 沒辦法區分這五個按鈕。
解法：給每個需要追蹤的按鈕一個唯一的 ID 或 data attribute。比如 data-track="hero-cta"、data-track="pricing-cta"。這不會影響你的設計，但會讓追蹤變得可能。
用 JavaScript 做頁面切換但 URL 不變
Single Page Application（SPA）或者用 AJAX 載入內容的時候，使用者看到的內容換了，但 URL 沒有變。GA4 的頁面瀏覽追蹤是靠 URL 變化觸發的，如果 URL 不變，GA4 就以為使用者一直停在同一頁。
這代表你的行銷人看到的數據是「大家都在首頁待了很久」，但其實使用者已經瀏覽了好幾個不同的內容區塊。跳出率、頁面瀏覽量、使用者流程——全部的數據都不準。
解法：SPA 框架通常有對應的 GA4 整合方式，確保每次內容切換都會發送一個頁面瀏覽事件。在設計階段就跟工程師確認這件事。
表單提交後沒有 Thank You Page
使用者填了聯絡表單、按了送出，然後頁面上出現一行「感謝您的填寫」的文字，但 URL 沒有變。
GA4 追蹤轉換最簡單的方式是「使用者到達了某個特定的 URL」。如果你有一個 /thank-you 的頁面，追蹤轉換非常容易。但如果表單送出之後 URL 不變、只是頁面上出現一段文字，追蹤就需要用 JavaScript 事件來做，設定更複雜，也更容易出錯。
解法：表單送出之後跳轉到一個 Thank You Page。這是最簡單、最可靠的轉換追蹤方式。
彈出視窗（Modal）裡的互動沒考慮追蹤
很多網站用 Modal 來做登入、註冊、優惠券領取、商品快速預覽。使用者在 Modal 裡的互動行為跟在一般頁面上的行為一樣重要，但因為 Modal 不會改變 URL，GA4 的自動追蹤抓不到這些互動。
解法：Modal 的開啟、裡面的表單提交、關閉——每個重要動作都要手動設定事件追蹤。在設計 Modal 的時候就規劃好需要追蹤哪些動作。
動態產生的元素沒有穩定的選擇器
前端框架（React、Vue）動態產生的 HTML 元素，Class 名稱可能是自動產生的亂數（像 css-1a2b3c4），每次部署都不一樣。GTM 用 Class 來辨別元素的觸發條件就會壞掉。
解法：在需要追蹤的元素上加 data-* 自定義屬性，這些屬性不受框架影響，可以穩定地被 GTM 選取。
設計階段就該做的追蹤規劃
與其在網站做完之後才開始想追蹤，不如在設計階段就把追蹤需求考慮進去。
建立一份追蹤規格文件
在設計 Wireframe 或 Prototype 的時候，行銷人應該提供一份「我們需要追蹤的互動清單」。哪些按鈕要追蹤點擊、哪些表單要追蹤提交、哪些頁面是重要的轉換節點。
這份文件不需要很技術，一個表格就夠了：
| 元素 | 互動類型 | 追蹤目的 |
|---|---|---|
| Hero 區的 CTA 按鈕 | 點擊 | 衡量首屏的吸引力 |
| 價格方案的「立即購買」 | 點擊 | 衡量哪個方案最受歡迎 |
| 聯絡表單 | 提交 | 追蹤名單轉換 |
| 影片 | 播放 | 衡量影片內容效果 |
有了這份文件，設計師就知道哪些元素需要被追蹤，就可以在設計的時候確保這些元素是可追蹤的。
在設計系統裡加入追蹤的規範
如果你的團隊有設計系統或 Component Library，在每個可互動的元件裡加入 data-track 屬性的規範。按鈕元件、表單元件、Tab 切換元件——每個可互動的元件都應該有一個標準的追蹤屬性。
這樣開發者在使用這些元件的時候，追蹤屬性會自動帶入，不需要每次都額外手動加。
轉換漏斗與設計的關係
行銷人經常在看的「轉換漏斗」，其實跟你的網站設計是直接對應的。
一個典型的 B2B 網站漏斗：首頁 → 產品頁 → 價格頁 → 聯絡表單 → Thank You Page。行銷人想知道的是：每一步的流失率是多少。100 個人進首頁，幾個人到了產品頁？幾個人到了價格頁？最後幾個人填了表單？
如果你的設計把產品資訊和價格放在同一頁（沒有分開的 URL），行銷人就沒辦法看到「對價格有興趣的人有多少」這個數據。如果你用 Accordion 把價格藏起來需要點開才看得到，行銷人就需要另外追蹤「展開價格 Accordion」這個事件才能得到類似的數據。
不是說不能這樣設計，而是設計師要知道每個設計決策會如何影響數據的可追蹤性。
根據 Econsultancy 的研究，只有 22% 的企業對自己的轉換率感到滿意。而轉換率的改善需要數據來支撐——你得先追蹤到正確的數據，才能知道哪裡要改。如果你的設計讓數據追蹤不到，改善就無從做起。
台灣一間做 SaaS 產品的公司重新設計網站時，把原本的單頁式設計（所有資訊都在首頁）改成多頁式設計（功能介紹、定價、客戶案例各一頁）。改版之後不只追蹤變得更準確，行銷團隊還發現了一個關鍵洞察：大量使用者會從功能介紹頁直接跳到客戶案例頁，跳過定價頁。這代表使用者比較在意「別人用了有沒有效」而不是「多少錢」。於是他們把客戶案例的入口從導覽列的最後一個改到第二個、首頁也增加了案例摘要區塊。這個調整讓免費試用的註冊率提升了 23%。
如果是原本的單頁式設計，這個洞察根本無法被發現。
設計交接的時候帶上追蹤需求
當設計稿要交給開發團隊的時候，除了設計規格之外，多交一份追蹤規格。
標記出每個需要追蹤的元素、建議的 ID 或 data attribute 命名、預期追蹤的事件類型。這不需要花太多時間，但能省掉後續來回溝通的大量成本。
好的設計師不只考慮使用者體驗，也考慮數據體驗。當你的設計讓數據可以被準確收集和分析，行銷團隊才能用數據來證明「這個設計改版到底有沒有效」——而這個證據，反過來會支持你做更多好的設計決策。
設計和數據不是對立的。設計師不需要變成數據分析師，但需要知道自己的設計決策如何影響數據的收集。建立這個意識，你跟行銷團隊的合作會順暢很多，你的設計決策也會更有底氣。如果你在找從設計階段就整合追蹤規劃的團隊，澳戰的網頁設計服務在這方面有豐富的實務經驗。