寫長的文章或是一個活動網頁,一定希望知道讀者閱讀了多久跟滑了多少內容,我們可以利用Google Analytics事件功能來追蹤網頁瀏覽深度。這是一個進階的GA技巧,以前需要寫Javascript來監聽網頁畫面滑到了百分之幾,並同時送出一個事件到GA中,來達成這個需求。但現在只要使用GTM原生的變數,就可以輕鬆達成這個需求了,完全不用撰寫程式碼,在GTM後台簡單設定即可。
![GTM GA教學_GA瀏覽深度](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_08-23-55_115549.jpg)
GTM架構介紹:代碼、變數、觸發條件
先簡單介紹GTM,GTM分為代碼(Tag)、變數(Variable)、觸發條件(Trigger),在指定觸發條件啟動代碼,在代碼中可以插入變數,來傳送網站互動資訊到追蹤的平台中。用這次追蹤網頁瀏覽深度來舉例,會先設定兩個變數Page Path、Scroll Depth Threshold(瀏覽深度比例),設定觸發條件”捲動頁數”當畫面開始捲動時開始啟動代碼(Tag)、設定代碼GA追蹤碼並搭配UA編號並同時設定Scroll Depth Threshold變數,在使用者捲動畫面時會持續送出瀏覽深度比例到GA中。
![GTM GA教學_GTM介面](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_09-08-02_666259.jpg)
Step1、設定觸發條件
先設定觸發條件,如紅框我們需要先設定”捲動頁數“(紅框),這個條件式當畫面往下捲動時會開始觸發。
步驟:點選新增(黃框)
![GTM GA教學_GTM變數設定-3](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_09-37-01_656552.jpg)
步驟:勾選捲動頁數(紅框),觸發條件命名我建議用Scroll Depth,也可以用”向下滑動”等很清楚描述使用者動作的名詞。
![GTM GA教學_GTM變數設定-4](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_09-38-09_061827.jpg)
Step2、設定滾動變數
變數分為內建變數(通常是網頁系統資訊)、使用者定義變數,我們先點選內建變數中的設定(黃框)將Scroll Depth Threshold勾選起來,在Step3代碼中會需要設定,Scroll Depth Threshold是紀錄網頁瀏覽的百分比的變數。
補充:籃框的使用者定義變數目前記錄了GA的UA追蹤編號,如果你之前已經使用GTM來埋設GA代碼,當時在代碼就已經設定好了。
步驟:點選設定(黃框)
![GTM GA教學_GTM變數設定-1](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_09-16-12_197852.jpg)
步驟:將紅框的三個捲動的內建變數都勾選起來
![GTM GA教學_GTM變數設定-2](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_09-18-40_003661.jpg)
Step3、設定代碼
![代碼名稱,建議分成動作跟GA追蹤編號](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_09-45-35_177884.jpg)
![代碼選通用Analytics設定,Google Analytics(分析)設定要勾選追蹤編號](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_09-52-38_984883.jpg)
![代碼中的觸發條件設定Step1儲存的捲動頁數](https://robert.coffee/wp-content/uploads/2020/06/robert-coffee-2020-06-27_09-55-02_547187.jpg)