分析脈絡
- 使用 Playwright 自動化訪問 6 個頁面
- 透過 route interception 攔截 KTM API 請求
- 解析 payload 取得 pageName / pageType / pageComponentName
- 捲動觸發 Impression、點擊觸發 Click 事件
- 截取全頁及元件截圖
- api-ktm.kkday.com/api/v1/journey/action (POST request body)
📋 總覽
KTM 追蹤系統架構 & 各頁面掃描結果彙總
| 頁面 | pageName | Total Events | Unique 事件組合 | 元件數 | 元件名稱 |
|---|---|---|---|---|---|
| 首頁 | HomePg | 13 | 4 | 1 | ProdCardView |
| 商品頁 | ProdPg | 11 | 5 | 2 | ProdCardView, SearchWidget |
| 搜尋頁 | ListingPg | 14 | 5 | 2 | ProdCardView, SearchWidget |
| 目的地頁面 | destination-destinationParam___zh-tw | 19 | 6 | 2 | ProdCardView, itemCard |
| 類目頁面 | CategoryLandingPage | 14 | 4 | 1 | ProdCardView |
| 購物車頁面 | HomePg | 24 | 5 | 2 | DestinationFilter, ProdCardView |
KTM (KKday Tracking Module) 是 KKday 自建的前端追蹤系統，透過
POST api-ktm.kkday.com/api/v1/journey/action 發送使用者行為事件。
每個事件包含以下三大核心欄位：
- pageName — 頁面識別名（HomePg, ProdPg, ListingPg, DestinationPg, ...）
- pageType — 事件類型（EntryLoad / PageLoad / Click / Impression / Churn）
- pageComponentName — 觸發事件的 UI 元件名（ProdCardView, SearchWidget, itemCard, ...）
此外，推薦相關事件還附帶 recommendProperty.sectionName，標記元件所在的頁面區塊。
首頁（homepage）
pageName = HomePg
| pageName | pageType | pageComponentName | sectionName | 觸發次數 |
|---|---|---|---|---|
| HomePg | EntryLoad | (page-level) | — | 1 |
| HomePg | PageLoad | (page-level) | — | 1 |
| XXXPg | Impression | ProdCardView | HomePgRecomTag, HomePgRecent, HomePgTopTen, HomePgSelect | 10 |
| ListingPg | EntryLoad | (page-level) | — | 1 |
▶ 全頁截圖（點擊展開）
商品頁（product）
pageName = ProdPg
| pageName | pageType | pageComponentName | sectionName | 觸發次數 |
|---|---|---|---|---|
| ProdPg | EntryLoad | (page-level) | — | 1 |
| ProdPg | PageLoad | (page-level) | — | 1 |
| ListingPg | PageLoad | (page-level) | — | 1 |
| SearchDiscoveryPg | Impression | SearchWidget | — | 1 |
| XXXPg | Impression | ProdCardView | ProdPgRecom, ProdPg | 7 |
▶ 全頁截圖（點擊展開）
搜尋頁（search）
pageName = ListingPg
| pageName | pageType | pageComponentName | sectionName | 觸發次數 |
|---|---|---|---|---|
| ListingPg | EntryLoad | (page-level) | — | 1 |
| ProdPg | Churn | (page-level) | — | 1 |
| ListingPg | PageLoad | (page-level) | — | 1 |
| SearchDiscoveryPg | Impression | SearchWidget | — | 1 |
| XXXPg | Impression | ProdCardView | ProdList | 10 |
▶ 全頁截圖（點擊展開）
目的地頁面（destination）
pageName = destination-destinationParam___zh-tw
| pageName | pageType | pageComponentName | sectionName | 觸發次數 |
|---|---|---|---|---|
| destination-destinationParam___zh-tw | EntryLoad | (page-level) | — | 1 |
| destination-destinationParam___zh-tw | PageLoad | (page-level) | — | 1 |
| DestinationPg | PageLoad | (page-level) | — | 1 |
| XXXPg | Impression | ProdCardView | DestPgRecom, DestPgLatest, DestPgTopTen | 10 |
| XXXPg | Click | ProdCardView | DestPgTopTen | 4 |
| DestinationPg | Click | itemCard | destinationCategory | 2 |
▶ 全頁截圖（點擊展開）
類目頁面（category）
pageName = CategoryLandingPage
| pageName | pageType | pageComponentName | sectionName | 觸發次數 |
|---|---|---|---|---|
| XXXPg | Impression | ProdCardView | CatLandingPgTop10, CatLandingPgRecom, DestPgTopTen | 10 |
| CategoryLandingPage | EntryLoad | (page-level) | — | 1 |
| CatLandingPg | PageLoad | (page-level) | — | 2 |
| CategoryLandingPage | PageLoad | (page-level) | — | 1 |
▶ 全頁截圖（點擊展開）
購物車頁面（cart）
pageName = HomePg
| pageName | pageType | pageComponentName | sectionName | 觸發次數 |
|---|---|---|---|---|
| CatLandingPg | Click | DestinationFilter | — | 1 |
| HomePg | EntryLoad | (page-level) | — | 1 |
| HomePg | PageLoad | (page-level) | — | 1 |
| XXXPg | Impression | ProdCardView | HomePgRecomTag, HomePgRecent, HomePgTopTen, HomePgSelect | 20 |
| ListingPg | EntryLoad | (page-level) | — | 1 |
▶ 全頁截圖（點擊展開）
🔧 KTM 元件總表
跨頁面的追蹤元件彙整——哪些元件出現在哪些頁面、對應什麼事件類型
| pageComponentName | 出現頁面 | 事件類型 | sectionName 清單 | 觸發總次數 |
|---|---|---|---|---|
| DestinationFilter | 購物車頁面 | Click | — | 1 |
| ProdCardView | 商品頁, 搜尋頁, 目的地頁面, 購物車頁面, 類目頁面, 首頁 | Click, Impression | CatLandingPgRecom, CatLandingPgTop10, DestPgLatest, DestPgRecom, DestPgTopTen, HomePgRecent, HomePgRecomTag, HomePgSelect, HomePgTopTen, ProdList, ProdPg, ProdPgRecom | 71 |
| SearchWidget | 商品頁, 搜尋頁 | Impression | — | 2 |
| itemCard | 目的地頁面 | Click | destinationCategory | 2 |
📖 pageType 事件類型說明
| pageType | 說明 | 是否需要 pageComponentName |
|---|---|---|
| EntryLoad | 使用者首次進入該頁（如從外部連結、直接輸入 URL） | ❌ 否（page-level） |
| PageLoad | 頁面完成載入（含 SPA 內部切換） | ❌ 否（page-level） |
| Click | 使用者點擊了某個追蹤元件 | ✅ 是 |
| Impression | 元件進入可視區域（通常由 IntersectionObserver 觸發） | ✅ 是 |
| Churn | 使用者離開頁面（通常在導航到新頁面時觸發，記錄前一頁的離開） | ❌ 否（page-level） |
💡 發現與注意事項
1. 購物車頁面重導問題
訪問 /zh-tw/cart 時因未登入被重導至首頁，導致捕獲到的事件全部屬於 HomePg。
建議：需在登入狀態下重新掃描才能取得真正的購物車 KTM 事件。
2. XXXPg — 推薦元件的通用 pageName
大量的 ProdCardView Impression/Click 事件的 pageName 為 XXXPg，
這是推薦系統元件使用的通用 pageName。真正的頁面資訊需從 recommendProperty.sectionName 來判斷
（如 HomePgRecent、DestPgTopTen、ProdList 等）。
3. 目的地頁面的雙重 pageName
目的地頁面同時發送了兩組 pageName：
destination-destinationParam___zh-tw（Nuxt 路由名稱，來自 B2C 新版）DestinationPg（KTM 統一命名，來自 KTM SDK 層）
這代表目的地頁面有兩層追蹤在運作，分析時需注意合併。
4. 類目頁面的 pageName 不一致
類目頁面出現了 CategoryLandingPage（EntryLoad）和 CatLandingPg（PageLoad）
兩種不同的 pageName 命名，可能是不同版本 SDK 的不一致。
5. Headless Chrome 偵測限制
本次掃描使用 Headless Chrome，部分追蹤邏輯（如 Hotjar、DataDome）因偵測到非真實瀏覽器而未正常載入。 某些需要使用者互動才觸發的 KTM 元件可能未被捕獲（如加入購物車、收藏等按鈕的 Click 事件）。
分析方法說明
透過 Playwright MCP 自動化瀏覽器，依序訪問 6 個 KKday 頁面，使用 page.route() 攔截所有發往 api-ktm.kkday.com 的 POST 請求，解析 request body 中的 additionalJson 取得 pageName / pageType / pageComponentName。同時透過捲動頁面觸發 Impression 事件、點擊元素觸發 Click 事件。截圖使用 Playwright 的 element.screenshot() 和 page.screenshot()。