無限接頁(infinite scroll) 的流量追蹤 GTM設定筆記
緣由:網站改版設計了讓文章2可以接續在文章1後出現,文章3可以在文章2後出現…這樣創造出專題形式的不間斷閱讀形式,要追蹤流量。
目標:針對這種infinite scroll (其實也算是虛擬頁面),在看到新文章、或回到舊文章時,analytics.js send pageview。
為什麼是個問題?在閱讀流程上不就是文章1看完,文章2看完,文章3嗎?但在技術層面,就是瀏覽器開了一個網頁,再一直把新的內容讀進同一個網頁裡,因此若不特別設定觸發,ga只會送出第一次pageview,後幾篇雖然讀過了,但是沒被紀錄,從數據要分析讀者閱讀歷程就有缺漏。
實際案例,單篇文章讀完後,再往下會有另篇文章:
在gtm設定時要準備的是:
1. 變數(自訂 JavaScript):承接新文章的title,是送pv需要的資料
//我把這個變數命名為title-nextfunction(){
var titles = document.getElementsByTagName('h1');
var title = titles[titles.length-1].textContent;
return title;
}
2. 代碼(自訂 HTML):設定一個事件叫scrollview,等等作為觸發條件,並且把標題送進資料層(dataLayer)GA會來這拿資料
//把這個項目命名為scrollview,title的內容是剛剛命名的title-next,gtm帶入變數的方法是兩組{}包起來<script>
dataLayer.push({
'event':'scrollview',
'title':{{title-next}}
});
</script>
3. 觸發條件(記錄變更):在「網址變更(換頁)發生」

一般來說最常用的觸發條件大概就是網頁瀏覽、點擊、youtube了吧。中文版「記錄變更」字面一直都看不太懂,也不太去找,這次遇上了!主要是gtm處理資料層中紀錄網址變化的資料。這裡是用到New History Fragment的鍵值,RegEx的寫法就是所有網址紀錄有變化就觸發。
3. 代碼(Google Analytics分析):設定送pv動作、送到哪裡等細節
a. 設定GA編號
b. 更多設定 > 要設定的欄位 > Field Name: title、Value: {{title-next}}
4. 觸發條件(自訂事件):只要scrollview事件成立,就啟動代碼。
Event name輸入剛才設定的scrollview即可。
測試:

通用Analytics分析- Fired 1 time(s) 進入頁的 1pv
Analytics-scrollview- Fired 3 time(s) 接頁的 3pv
總共4個pv

做的時候踩了一個坑,怎麼步驟2的自訂 HTML有生效,但是送去GA的資料還是第一頁的資訊呢?後來發現,因為pageview比dataLayer早生效。另外是,如果有讀者在頁面交界處頻繁來回,造成瀏覽量無意義膨脹。(怎麼對業務這麼佛心)。加上第一次發佈這篇文章的時候,以為on-screen duration是有效的時間差做法,所以再修了一下,要回頭改2 scrollview事件的代碼:
//先抓取目前網址,丟進陣列裡
//停5秒,再抓一次目前網址
//如果這兩個網址是一樣的,就送出scrollview事件(代表他沒有跳進來,又跳出去~跳進來,又跳出去)<script>
(function() {
var timeout = 5000;
var ps= [];
ps.push(location.pathname);
window.setTimeout(function() {
ps.push(location.pathname);
if(ps[ps.length-1] == ps[ps.length-2]){
window.dataLayer.push({
'event':'scrollview',
'page':{{url}},'title':{{title-next}}
})
};
}, timeout);
})();
</script>
