GTM教學|GA4教學

GTM基礎教學| 如何辨別是否網站為SPA站

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

如何辨別是否SPA網站 GTM埋設實務

當網頁跳轉,GTM-Debug中的事件,無其他網頁刷新劃分。但事件有持續接收,例如「click, outbound click, History Change」。詳見範例圖。

持續接收到事件,但頁面並沒有重新刷新,事件沒有依照網頁位置做劃分。此現象即SPA網頁在GTM施做的特徵之一。

辨別方式2 – 查看網頁的原始碼

如何辨別是否SPA網站 GTM埋設實務

打開該網站的首頁,右鍵點選瀏覽查看網頁原始碼,接著可以把網頁上的任何文字,放入網頁原始碼中,並且按「ctrl + F」搜尋,有沒有辦法找到複製的內容。

如果無法,表示目前頁面內容,並沒有在網頁原始碼中。

辨別方式3 – 觀察頁面更新的方式

如何辨別是否SPA網站 GTM埋設實務

這個方式比較細微,你可以打開網頁後,仔細注意網站更新的方式。是不是全部頁面刷新,或是只有一小區塊在更新變動。也可在直接打開F12,開瀏覽器發送的請求,如範例圖。隨著網站工程師的建置方式不同,有些反而是局部不改變,只換頁面內文。

SPA網頁先打開GTM的變數

前往GTM變數頁面中,打開內鍵變數的「紀錄」欄位,如果都還不清楚,建議都可以打開。

後續再看哪個不需要再關閉即可。

SPA可能會有的問題

如果頁面只是更新內容,最常發生的事,使用者可能瀏覽好幾頁網站,但GA4卻只有收到1次Pageview的事件。

如果只有接收到1次的Pageview的事件,建議可以從history_change,裡面push的資料著手。如未來有機會提到,我再寫成另外一篇文章。

當然每個網頁的建製方式都不同,還滿難以一篇文章概括全部會遇到的狀況,如果你剛好也是SPA網頁跟我說其他問題。

error: