無限接頁(infinite scroll) 的流量追蹤 GTM設定筆記

宋育泰
宋育泰
Sep 7, 2018 · 6 min read

緣由:網站改版設計了讓文章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. 觸發條件(記錄變更):在「網址變更(換頁)發生」

dataLayer.push的觸發條件(page hostname是我測試環境)

一般來說最常用的觸發條件大概就是網頁瀏覽、點擊、youtube了吧。中文版「記錄變更」字面一直都看不太懂,也不太去找,這次遇上了!主要是gtm處理資料層中紀錄網址變化的資料。這裡是用到New History Fragment的鍵值,RegEx的寫法就是所有網址紀錄有變化就觸發。

3. 代碼(Google Analytics分析):設定送pv動作、送到哪裡等細節

a. 設定GA編號
b. 更多設定 > 要設定的欄位 > Field Name: title、Value: {{title-next}}

4. 觸發條件(自訂事件):只要scrollview事件成立,就啟動代碼。
Event name輸入剛才設定的scrollview即可。

測試:

設定好可以用preview模式檢查

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

也可以用Chrome Tag Assistant外掛檢查

做的時候踩了一個坑,怎麼步驟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>
實際測試:雖然datalayer觸發了10次,但是實際才送出6次pv

宋育泰

Written by

宋育泰

a.k.a 宋卡波,想要寫些python、spreadsheet、ga & gtm,以及一些數據清理的自學大叔。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade