GA4打雜實作|解決沒有重載頁面的追蹤難題

2022/10/20閱讀時間約 6 分鐘
對於我們一般熟悉的Pageview瀏覽追蹤,只要使用者訪問跳轉不同頁面時,網址刷新重新加載頁面,新頁面的Hits就會發送給Google伺服器,最後在GA4中呈現出瀏覽頁面的資料報表。但有一些特殊的狀況,比如網站使用單頁應用SPA(single-page application),或者是Popup視窗,這些機制實際上都沒有造成頁面重載,所以就無法單純使用pageview來記錄使用者行為,為了解決此問題來實現正確的追蹤,必須在GTM中進行一些客製化的設定調整,下面就示範了三種常見的網頁狀況,讓各位朋友更理解這方面的操作。
單頁應用SPA(single-page application)是一種網路應用程式或網站的模型,它通過動態重寫當前頁面來與使用者互動,而非傳統的從伺服器重新載入整個新頁面。當使用者在訪問頁面進行事件動作時,URL雖然會產生變化,但頁面是沒有重新加載的,這種方法的好處是,避免了頁面之間切換打斷使用者體驗。

實做單頁應用SPA追蹤

Step1:判斷該頁面是否為單頁應用SPA

想知道自己的網頁是否為單頁應用SPA,最簡單的方式就是透過變數History來進行判別,如果事件動作有造成頁面重新加載,那麼就不是單頁應用,如果沒有重新加載,出現很多的History,就屬於單頁應用。因此,我們必須先開啟內建變數History,建議把全部有關History的變數都勾選。
拿「樂屋網」做為例子,在買屋搜尋頁面(https://www.rakuya.com.tw/sell/result)中,只要使用者進行買屋條件的選擇,就會觸發History change,而每一次的篩選,就會造成每一次的History change,如下圖GTM的預覽畫面示意。

Step2採用虛擬網頁或事件追蹤

假如我們的目的,是希望將每一次的History change都記錄成網頁瀏覽行為,就可以選擇採用虛擬網頁追蹤,Google現在把這工作變得相當簡單,只要到GA4後台Admin->Data Streams,選擇要設定的資料串流名稱,然後到「加強型評估」裡Page views的進階型設定,將「Page changes based on browser history events」勾選並儲存起來,只要在GTM的預覽模式下的History裡API Call中有出現gtm.historyChange-v2,就表示追蹤成功了。
另一種方式就是以事件進行追蹤,這部分就跟一般的事件追蹤沒有太大的差異,詳細作法就不特別說明,只要到GTM中新增一個Trigger,類型選擇為「History Change」,並設定相關觸發條件。
下一步就是新增事件tag,並把剛剛建好的觸發器加上去,完成後就可以預覽發佈了!

實做站內廣告曝光

大多數的流量網站都會有站內廣告,藉由曝光數來賺取廣告收益,此時,就需要監控廣告的曝光成效,GTM中Element Visibility的觸發器,就很適合這類的情況來做應用。

Step1:找出該Element名稱的唯一值

以「樂屋網」首頁來看,如果我們想追蹤最上方的728 x 90的廣告版位,第一步,就是要將該廣告版位的單一Element名稱找出來。我們可以透過Google的開發者工具,進入Elements分頁中,選取廣告版位的id或class名稱。
運用CSS Selector進行選擇(對CSS Selector不清楚的可以參考Reference),先以#Top.mposition測試判斷是否為唯一值,然後到Console分頁,輸入$("#Top.mposition"),結果length長度為1,代表此Element名稱是唯一值,可以單獨追蹤某一特定廣告版位。

Step2:設置Element Visibility Trigger

接著第二步,進入到GTM後台設定Trigger,類型這次換成選擇「Element Visibility」,並將剛剛測試出來的唯一名稱輸入CSS Selector的欄位中,這邊我們採用比較嚴謹的方式,希望同一廣告版位Element只會觸發一次,所以選擇Once per element,並且將元素性的可見百分比設定為70%,以及設置當廣告出現在屏幕的持續時間超過2000毫秒(也就是說使用者至少要花費2秒的時間觀看廣告)才會觸發。

Step3:建立對應的廣告曝光Tag

同樣的方式,新增一個事件tag,並將剛剛建好的觸發器加上去,預覽沒問題後就發佈收工!

實做Popup視窗追蹤

最後一個常見狀況是Popup視窗追蹤,以「樂屋網」來說,我們有去設定一個功能機制,當使用者看到喜歡的物件產品,按下「愛心♥️」進行收藏追蹤後,就會自動跳出一個Popup視窗,邀請使用者進入後台的追蹤清單。

Step1:設置Element Visibility Trigger

首先,要將Popup視窗的單一Element名稱找出來,剛剛有示範過,可以透過Google的開發者工具,從Elements分頁中選出Popup視窗的id或class。
然後到Console分頁,輸入$(".modal-content"),結果出現length=9,由於這次我們希望每一次的Popup視窗跳出,都可以被記錄一次,所以沒有唯一性不適問題,因此就先使用class = modal-content
接著,來到GTM後台設定Trigger,類型這次同樣選擇Element Visibility,並將剛剛測試出來的class = modal-content輸入於CSS Selector的欄位中。

Step2:預覽測試Element Visibility有正確觸發

進入GTM預覽模式,確認每一次的Popup視窗跳出,都有正確觸發Element Visibility。

Step3:建立對應的Popup Tag

最後,這個步驟跟前面建立Tag的方式大同小異,至於如何設置Event Parameters,端看每人的需求進行創意搭配了,這邊就不再多花時間做說明囉!
以上的三種狀況,應該可以涵蓋90%的未重載頁面問題,如果還有遇到不同的難題,歡迎各位朋友留言回覆,我有時間就會盡量回答喔,感謝各位耐心看完!
參考資料:
為什麼會看到廣告
我吃故窩宅
我吃故窩宅
喜歡對稱,也喜歡大膽留白,喜歡狗,也喜歡貓,喜歡朝更好的自己邁進--目前在互聯網時代,從事行銷X數據X運營的工作,現在的我,還喜歡窩在家,用簡單的事物填滿每一天。
留言0
查看全部
發表第一個留言支持創作者!