[GA4][GTM] SPA 單頁式網站頁面瀏覽追蹤大全

GA4 網站分析商務實戰 Jul 7, 2026

快速導覽

前言

為了優化使用者體驗、減少切換頁面時的載入時間，越來越多網站架構與設計開始導入【單頁式網頁應用程式 SPA（Single-Page Application）】。

在進入文章之前，先來釐清一個常被搞混的觀念：「單頁式網站」與「一頁式網站（One-Page Website）」。
一頁式網站通常「真的只有一頁」；而 SPA 單頁式網站，雖然使用者在瀏覽時會看到網址變動、內容切換，但實際上瀏覽器根本「沒有重新整理或換頁」。這種看似換頁、實則沒換的方式，如果直接沿用常規的埋設方式，GA4 數據會出問題。

本篇文章就來聊聊，面對 SPA 架構的網站，該如何正確進行 GA4 追蹤？

1. 如何分辨【SPA 單頁式網站】?

	SPA 單頁式網站	換頁式網站
區分方式	換頁當下，沒有頁面加載的符號	換頁當下，有頁面加載 (Loading) 的符號

2. 如何在 SPA 單頁式網站追蹤頁面瀏覽 (GA4 page_view 事件) ?

2-1. 在換頁的當下，推送 dataLayer page_view 事件

由於在 SPA 單頁式網站在換頁過程中，不會進行 Loading，也就是說 SPA 單頁式網站無法透過常見的方式進行設定。

因此，以 SPA 單頁式網站來說，有兩種方式可以追蹤並推送 GA4 page_view 事件，如下表格所示

SPA 單頁式網站

換頁式網站

GA4 page_view 事件追蹤方式

透過History Change 傳送page_view 事件。
但 page_title參數的值不會隨著頁面而變動。

透過 dataLayer 送出page_view 事件和其參數，修正 page_title 參數或增加自訂參數。

設定 Google代碼，埋設 GA4 代碼ID，並設定觸發條件。
在換頁的過程中GA4會自動送出page_view事件。

(此為最常見的設定方式)

如果以維護營運 SPA 單頁式網站的立場，加上 GA4 想要收集 page_title 的資訊，比較建議使用 dataLayer 方式推送 page_view 事件和其必要參數，有點像是手動推送 page_view 事件。

而這個步驟需要網站前端工程師的協助，設定dataLayer。

dataLayer.push({

"event": "custom_page_view", //建議事件名稱用custom_page_view，避免和預設事件page_view一定的命名

"page_title": "Google Play Sticker | Google Merch Shop",

"page_location": "https://shop.merch.google/product/google-play-sticker-ggoegoka245499?itemListName=Category",

"page_referrer": "https://shop.merch.google/",

"content_group": "商品" //可增加自訂參數

});

</script>

2-2. GTM 相關設定

假設工程師已經完成 2-1 步驟，並埋設完 GTM。
接下來就可以進行 2-2 GTM 設定和 2-3 GA4資源設定

2-2-1. 新增 page_title、page_location、page_referrer 等變數

在 dataLayer page_view 事件內事件參數，需要按照以下步驟設定【變數】。

【變數】→【新增】→ 選擇【資料層變數】 → 填寫方式如下

2-2-2. 新增 page_view 事件觸發條件

【觸發條件】→【新增】→ 選擇【自訂事件】 → 填寫方式如下

2-2-3. Google 代碼設定

【代碼】→【新增】→ 選擇【Google 代碼】 → 填入 GA4 代碼 ID → 【配置參數】設定 send_page_view 的值為 false → 【配置參數】設定 page_title、page_location、page_referrer 參數，其值為 2-2-1 所設定的變數 → 【觸發條件】選擇 2-2-2 所設定的

💡

因為要改用 dataLayer 推送 page_view 事件，不用【Google 代碼】自動推送 page_view 事件，所以在【Google 代碼】的【配置參數】設定 send_page_view 的值一定為 false。
否則 page_view 事件會重複推送，造成頁面瀏覽量暴增！！