Single Page Application（SPA）是甚麼、該怎麼用GTM埋設SPA網頁。GTM只有一排事件流；而且頁面好像都不會更新。前面這兩點跡象，你可以先判斷，極大可能是SPA型的網頁。本篇文章要跟你分享面對透過JS渲染頁面 (SPA)站，那可以怎麼進行GTM的埋設?
Google Tag Manager – Debug打開後發現怎麼點網站，都不會有頁面切換的事件，或是有看到「History Change」的事件。看到此跡象，已經可以先推測目前的網頁是SPA了。
如果要說到SPA網頁的原理，大多為保留原始頁面框架，透過後端與資料庫傳送對應頁面內容至前端。這也屬於網頁開發範疇。本篇專注探討「如何辨別該網頁是SPA網站」，以及後續「GTM佈署在SPA的變數設定」。
章節內容
辨別方式1 – GTM Debug
當網頁跳轉，GTM-Debug中的事件，無其他網頁刷新劃分。但事件有持續接收，例如「click, outbound click, History Change」。詳見範例圖。
持續接收到事件，但頁面並沒有重新刷新，事件沒有依照網頁位置做劃分。此現象即SPA網頁在GTM施做的特徵之一。
辨別方式2 – 查看網頁的原始碼
打開該網站的首頁，右鍵點選瀏覽查看網頁原始碼，接著可以把網頁上的任何文字，放入網頁原始碼中，並且按「ctrl + F」搜尋，有沒有辦法找到複製的內容。
如果無法，表示目前頁面內容，並沒有在網頁原始碼中。
辨別方式3 – 觀察頁面更新的方式
這個方式比較細微，你可以打開網頁後，仔細注意網站更新的方式。是不是全部頁面刷新，或是只有一小區塊在更新變動。也可在直接打開F12，開瀏覽器發送的請求，如範例圖。隨著網站工程師的建置方式不同，有些反而是局部不改變，只換頁面內文。
SPA網頁先打開GTM的變數
前往GTM變數頁面中，打開內鍵變數的「紀錄」欄位，如果都還不清楚，建議都可以打開。
後續再看哪個不需要再關閉即可。
SPA可能會有的問題
如果頁面只是更新內容，最常發生的事，使用者可能瀏覽好幾頁網站，但GA4卻只有收到1次Pageview的事件。
如果只有接收到1次的Pageview的事件，建議可以從history_change，裡面push的資料著手。如未來有機會提到，我再寫成另外一篇文章。
當然每個網頁的建製方式都不同，還滿難以一篇文章概括全部會遇到的狀況，如果你剛好也是SPA網頁跟我說其他問題。
更多文章
Looker Studio
- Looker Studio教學｜Looker Studio 公式｜電商指標
- Looker Studio教學｜5個Looker Studio 混和資料功能
- Looker Studio 教學｜指標維度是甚麼
- Looker Studio 教學｜數據工程師帶你從0學Looker Studio
- Looker Studio教學｜導入臉書廣告數據｜Adveronix 免費工具
GA4
- GA4教學｜ 數據保留多久? 延長GA4數據保留時間?
- GA4教學｜Measurment Protocol 實例
- GA4教學｜GA4 如果有Not Set該怎麼辦
- GA4教學｜GA4閾值門檻｜GA4資料不正確
- GA4教學｜GA4常見來源判定順序
- GA4教學｜如何處理GA4重複事件
- GA4教學｜自訂探索報表使用解說介紹｜洞察來源unassigned
- GA4教學｜GA4報表出現Unassigned如何解決
- GA4教學｜排除金物流網域｜Referrer必備知識
- GA4教學｜ 一定要知道的GA4資料設定
GTM
- GTM教學｜GTM觸發條件常失敗
- GTM教學｜設定 Consent Mode 同意聲明模式
- GTM教學｜GTM問題總整理
- GTM教學｜設定臉書像素｜常見Meta問題總整理
- GTM教學｜WordPress表單驗證事件｜GA4追蹤教學
- GTM教學｜手動設定GCP SERVER伺服器配置
- GTM教學｜臉書像素重複事件怎麼解決
- GTM教學｜GTM常用變數中文解說
- GTM教學｜伺服器追蹤｜自訂網域追蹤
- GTM教學｜伺服器追蹤教學4｜Http解說
- GTM教學｜追蹤來自部落格轉換成效
- GTM教學｜伺服器追蹤教學3 | Facebook轉換Capi設定
- GTM教學｜伺服器追蹤教學2 | GA4事件設定
- GTM教學｜伺服器追蹤教學 | 伺服器配置設定
- GTM教學｜Tiktok廣告電子商務埋設大全3｜廣告代碼埋設
- GTM教學｜Tiktok廣告電商埋設2
- GTM教學｜廣告電商埋設1｜電商必要參數抓取
- GTM教學｜電商埋設5｜GA4電商埋設
- GTM教學｜電子商務埋設大全4｜GA4電子商務完整埋設
- GTM教學｜GTM電商埋設3｜抓取ItemName
- GTM教學｜GTM電商埋設2｜抓取ItemID
- GTM教學｜電商埋設1｜抓取Value
- GTM教學｜提升廣告成效｜Adblocker阻擋原理
- GTM教學｜GTAG部署方式三大整理
- GTM教學｜Google Ads 強轉換 | 購買金額
- GTM教學｜自訂網址追蹤｜不是只有「UTM」才能做網址追蹤
- GTM教學｜AutoEvent追蹤使用者點選的圖片
- GTM教學｜CSS Selector抓取表格的值
- GTM教學｜了解網站熱門頁面｜GTM追蹤點擊事件
- GTM教學｜埋設事件｜確認GA4有無收到事件
- GTM教學｜自訂網址追蹤｜不是只有「UTM」才能做網址追蹤
- GTM教學｜3分鐘檢查GA4事件重複錯誤
- GTM教學｜GA4電子商務事件埋設範本
- GTM教學｜DOM抓取電商中的轉換價值
- GTM教學｜新的GTM容器一定要做這設定
- GTM教學｜設定GA4事件大全
- GTM教學｜推薦GTM範本｜全新DataLayer寫入方式
- GTM教學｜網站計時器埋設｜抓出使用者進站停留時間
- GTM教學｜如何辨別是否網站為SPA站
- GTM教學｜名單型網站追蹤｜Thankyou Page 填寫表單事件
- GTM教學｜網站通話追蹤｜臉書私訊、加LINE
- GTM教學｜自訂網址追蹤｜不是只有「UTM」才能做網址追蹤
BigQuery
- BigQuery教學｜BigQuery預測GA4數據
- BigQuery教學｜視覺化報表怎麼製作
- BigQuery教學｜基礎必備語法｜免費BigQuery資料導入
- BigQuery教學｜串接BIgQuery | BIgQuery費用