Google Analytics中做單頁應用追蹤

Google Analytics Haran 11个月前 (03-10) 223次瀏覽 0條留言

我們這一節來介紹Universal版Google Analytics如何對單頁應用的跟蹤,對於普通網站的頁面瀏覽跟蹤,我們只需要將追蹤程式碼安裝到每個頁面,使用者訪問不同的頁面時,瀏覽器窗口都會刷新,重新加載頁面,新頁面的Hits就會被發送給Google Analytics,從是實現追蹤,但單頁應用的情況就比較特殊,上述的跟蹤機制就不適用,需要用到虛擬頁面。

如果你用的是Google Analytics 4 ,請看:Google Analytics 4 中做單頁應用追蹤

什麼是單頁應用程序

單頁應用(英語:single-page application,縮寫SPA)是一種網路應用程式或網站的模型,它通過動態重寫當前頁面來與使用者互動,而非傳統的從伺服器重新載入整個新頁面。

使用者在訪問頁面的時候,URL雖然會有變化,但頁面是沒有重新加載的,這種方法避免了頁面之間切換打斷使用者體驗,使應用程式更像一個桌面應用程式。

單頁應用追蹤會遇到什麼問題

但對於單頁應用,頁面只在使用者訪問的時候加載一次,之後的訪問都不再加載頁面,那麼Google Analytics原有的頁面加載跟蹤機制就不適用,會導致,使用者之後的頁面瀏覽都追蹤不到。

單頁應用的追蹤原理

單頁應用的追蹤原理是虛擬頁面(Virtual Pageview)。

虛擬頁面就是實際上沒有產生瀏覽,我們將其看做一個頁面瀏覽行為來追蹤,如SPA中除了第一個頁面之後的其他頁面都是沒有加載,沒有產生瀏覽,我們想把它看做是一個頁面瀏覽,這個就是虛擬頁面。

如何判斷你的網站是不是單頁應用

你可以在GTM 的預覽模式裡從A頁面點擊訪問B頁面,在這個過程裡看Tag Assistant有沒有重新加載頁面,如果重新加載,那麼就不是單頁應用,如果沒有重新加載,出現很多的History,就是單頁應用。

預覽之前,先需要開起這個觸發條件,在GTM中點擊“觸發條件”——“新增”——“請選擇觸發條件類型以開始設定…”——“記錄變更”,然後做如下設定:

Google Analytics中做單頁應用追蹤

然後在變數裡,將內建變數的有關記錄的變數都勾選:

Google Analytics中做單頁應用追蹤

然後點擊“預覽”,隨意點擊一個頁面,然後看Tag Assistant:

Google Analytics中做單頁應用追蹤

點擊後,Tag Assistant出現History,那就是單頁應用。

需要注意,現在有些網站,部分頁面是單頁應用,部分是普通網頁,所以你需要多點擊幾個頁面看看。

如何對單頁應用做追蹤

單頁應用的追蹤目前主要有三種方法,一種是使用記錄變更(History Change),一種是使用dataLayer方法,一種是延遲發送,它是變更記錄和dataLayer同時使用。

至於使用哪種方法,可以通過一個簡單的判斷,如果單頁應用訪問不同的頁面時,URL有變化,可能可以使用記錄變更或延遲發送的方法,如果URL不變,那麼就需要使用dataLayer方法。

需要注意,在URL有變化的時候,我說的是可能可以使用記錄變更的方法,因為還需要看記錄變更裡是否可以拿到準確的URL,如果拿不到,那麼還是需要使用dataLayer方法。

它們的便捷程度是變更記錄>延遲發送>dataLayer, 前兩種方法不需要工程師的支援,只需通過GTM的設定就能完成,但它們只適用於特定的情況。dataLayer方法是一定可以實現單頁應用的跟蹤,什麼情況下都適用,它需要工程師的支援。

方法一:用記錄變更觸發條件

首先看看,記錄變更裡的變數哪些是可以用的。

在GTM裡點擊“預覽”,然後隨意點擊一個頁面,返回到Tag Assistant,在Summary裡找到History,然後看History相關的變數的值:

Google Analytics中做單頁應用追蹤

 

這種方式只獲取到Page Path,獲取不到Page Title,如果你想獲取Page Title,那麼可以使用延遲發送的方法。

方法二:延遲發送的方法

延遲發送的方法就是History觸發的時候,延遲1000ms或500ms,通過JavaScript獲取Page Title和Page Path,再通過dataLayer發送出去,然後在通過GTM的設定,實現頁面的追蹤。

新建HTML延遲發送

在GTM中的點擊“代碼”——“新增”——“請選擇代碼類型以開始設定…”——“自訂HTML”,然後做如下設定:

Google Analytics中做單頁應用追蹤

程式如下:

<script>
// Push the page path and title into the datalayer for all occurrences of the custom event pageview
  setTimeout(function(){ 
    if (history.pushState) {
      var path = window.history.state.as;
      var title = document.title;
      window.<a href="https://www.haranhuang.com/tag/datalayer" title="查看更多关于dataLayer的文章" target="_blank">dataLayer</a> = window.<a href="https://www.haranhuang.com/tag/datalayer" title="查看更多关于dataLayer的文章" target="_blank">dataLayer</a> || [];
      window.<a href="https://www.haranhuang.com/tag/datalayer" title="查看更多关于dataLayer的文章" target="_blank">dataLayer</a>.push({
      event: 'Pageview',  
        pagePath: path,
        pathTitle: title,
      });
    }
  }, 500);

</script>

觸發條件:Custom Event—Pageview

在GTM中的點擊“觸發條件”——“新增”——“請選擇觸發條件類型以開始設定…”——“自訂事件”,然後做如下設定:

Google Analytics中做單頁應用追蹤

這裡的事件名稱要與datalayer裡的event對應。

變數:dlv—pagePath & dlv—pageTitle

要新建兩個變數,在GTM中的點擊“變數”——“新增”——“請選變數類型以開始設定…”——“資料層變數”,然後分別做如下設定:

Google Analytics中做單頁應用追蹤

這裡的資料層變數名稱要與datalayer裡變數名稱對應。

Google Analytics (分析) 設定

接下來是Google Analytics (分析) 設定變數,在“要設定的欄位”裡做如下設定

Google Analytics中做單頁應用追蹤

設定代碼

最後就是對代碼做設定,追蹤類型是網頁流量,觸發條件用Custom Event—Pageview,具體設定如下:

Google Analytics中做單頁應用追蹤

 

方法三:dataLayer方法

dataLayer方法和延遲發送都用到dataLayer,兩種的不同之處在於,延遲發送,是在GTM上控制自己發DataLayer,而datalayer方法是由工程師控制發送,更準確,dataLayer方法是一個萬能的方法,一定可以解決單頁應用的追蹤問題,它需要工程師在用戶點擊不同頁面的時候發送如下示例的資料:

<script>
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'Pageview',
 'pagePath': '/something/contact-us',
 'pageTitle': 'Contact us' //some arbitrary name for the page/state
 });
</script>

工程師需要注意,window.dataLayer = window.dataLayer || [] 的作用是用於清空對象,避免混亂;pagePath和pageTitle都是動態變化,且是一一對應的。

接下來就是在GTM上設定,DataLayer方法的GTM設定和延遲發送方法的GTM設定是一樣,請直接參照 觸發條件:Custom Event—Pageview 起的設置。

 

Rogue Referral問題

虛擬頁面雖然能解決單頁應用的頁面追蹤問題,但它引入Rogue Referral問題,本來是付費流量,如來自Adwords,可能會被錯誤的劃分到有機搜索或引薦來源。

如果你的單頁應用是有付費流量,那麼你一定不能忽略這個問題,詳細解決方案可以看:解決單頁應用追蹤中出現Rogue Referral的幾個方法


如果您在操作上仍有任何疑問,歡迎留言交流。

轉載請註明標題:Google Analytics中做單頁應用追蹤
網址鏈接:https://www.haranhuang.com/single-page-application-tracking-in-google-analytics.html

Like (0)
發佈我的留言
取消留言
表情 贴图 加粗 删除线 居中 斜体

Hi,*为發佈留言必須填寫。

  • 顯示名稱*
  • 電子郵件地址*
  • 個人網站網址