如何使用gtag.js使Google Analytics（分析）在SPA上顯示正確的活動頁面？

Question

我是Google Analytics（分析）的新手，所以我將gtag.js代碼添加到HTML頁面標題中，它非常適合初始頁面加載。 但是，我使用React和react-router來動態更改URL，並且當我的SPA中發生URL更改時，Google Analytics（分析）不會選擇活動頁面或新匹配中的更改。

我找到的答案是ga.js而不是gtag.js 我試圖通過其他方法將URL偵聽器改編成Google的文檔建議 ，以適應我的需要。.盡管代碼是在動態頁面加載時運行的，但沒有任何內容發送到GA。

window.gtag && history.listen((location)=>{
    console.log('>>>', location.pathname)
    gtag('config', 'GA_TRACKING_ID', {'page_path': location.pathname});
    // window.ga('set', 'page', location.pathname);  //--> this would have worked with ga.js
    // window.ga('send', 'pageview', location.pathname);
});

Answer 1

我想這可能是一個React問題。 考慮檢查此線程： React router 4 history.listen從不觸發

Answer 2

結果證明該解決方案在Google跟蹤代碼管理器方面。 如果我鏈接的GTM文檔中所示的事件觸發失敗，那么如果GTM端沒有偵聽此事件的Tag和偵聽該Trigger的Tag，則不會產生任何效果。

所以步驟是：

1. 將應用程序連接到Google跟蹤代碼管理器
2. 在Google跟蹤代碼管理器中創建觸發器以偵聽VirtualPageview事件
3. 創建一個偵聽步驟2中創建的觸發器的標簽，該標簽是Google Analytics（分析）標簽
4. 現在，所有需要發生的事情就是使代碼觸發VirtualPageview事件。 如下所示完成

-

export function virtualPageviewOnRouteChange(history){
    let previousPathname = null
    window.gtag && history.listen((location)=>{
        if(previousPathname != location.pathname){
            previousPathname = location.pathname;
            gtag('config', 'GA_TRACKING_ID', {'page_path':location.pathname});
            dataLayer.push({
                'event':'VirtualPageview',
                'virtualPageURL':location.pathname,
            });
        }
    });
}