使用GTM追蹤網頁瀏覽深度(Scroll Depth),用GA事件來觀察網友滑了多長讀了多少

寫長的文章或是一個活動網頁,一定希望知道讀者閱讀了多久跟滑了多少內容,我們可以利用Google Analytics事件功能來追蹤網頁瀏覽深度。這是一個進階的GA技巧,以前需要寫Javascript來監聽網頁畫面滑到了百分之幾,並同時送出一個事件到GA中,來達成這個需求。但現在只要使用GTM原生的變數,就可以輕鬆達成這個需求了,完全不用撰寫程式碼,在GTM後台簡單設定即可。

GTM GA教學_GA瀏覽深度
利用GA的事件報表,可以追蹤到讀者讀到了網頁百分之幾,進而可以根據數據優化網頁內容。

GTM架構介紹:代碼、變數、觸發條件

先簡單介紹GTM,GTM分為代碼(Tag)、變數(Variable)、觸發條件(Trigger),在指定觸發條件啟動代碼,在代碼中可以插入變數,來傳送網站互動資訊到追蹤的平台中。用這次追蹤網頁瀏覽深度來舉例,會先設定兩個變數Page Path、Scroll Depth Threshold(瀏覽深度比例),設定觸發條件”捲動頁數”當畫面開始捲動時開始啟動代碼(Tag)、設定代碼GA追蹤碼並搭配UA編號並同時設定Scroll Depth Threshold變數,在使用者捲動畫面時會持續送出瀏覽深度比例到GA中。

GTM GA教學_GTM介面
GTM分成代碼、觸發條件、變數,每一個代碼只有一次性任務。

Step1、設定觸發條件

先設定觸發條件,如紅框我們需要先設定”捲動頁數“(紅框),這個條件式當畫面往下捲動時會開始觸發。

步驟:點選新增(黃框)

GTM GA教學_GTM變數設定-3
觸發條件的名稱可以自己設定

步驟:勾選捲動頁數(紅框),觸發條件命名我建議用Scroll Depth,也可以用”向下滑動”等很清楚描述使用者動作的名詞。

GTM GA教學_GTM變數設定-4
觸發條件都是系統內建的,跟網頁互動有關

Step2、設定滾動變數

變數分為內建變數(通常是網頁系統資訊)、使用者定義變數,我們先點選內建變數中的設定(黃框)將Scroll Depth Threshold勾選起來,在Step3代碼中會需要設定,Scroll Depth Threshold是紀錄網頁瀏覽的百分比的變數。

補充:籃框的使用者定義變數目前記錄了GA的UA追蹤編號,如果你之前已經使用GTM來埋設GA代碼,當時在代碼就已經設定好了。

步驟:點選設定(黃框)

GTM GA教學_GTM變數設定-1
分為內建變數、使用者定義的變數

步驟:將紅框的三個捲動的內建變數都勾選起來

GTM GA教學_GTM變數設定-2
內建變數中的捲動相關全部勾起來,等下可以用

Step3、設定代碼

代碼名稱,建議分成動作跟GA追蹤編號
代碼名稱,建議分成動作跟GA追蹤編號
代碼選通用Analytics設定,Google Analytics(分析)設定要勾選追蹤編號
代碼選通用Analytics設定,Google Analytics(分析)設定要勾選追蹤編號
代碼中的觸發條件設定Step1儲存的捲動頁數
代碼中的觸發條件設定Step1儲存的捲動頁數

補充:如何在GTM設定GA追蹤碼