React JS網站上的Google Analytics輸出不正確的數據（會話中斷？）

Question

我們有一個網站，其中大部分內容由Wordpress管理，但是當用戶導航到搜索頁面（用戶搜索產品）時，它由React JS處理。

它們都位於同一個域中，因此用戶永遠不會知道它們與兩個不同的應用程序連接。

但是，網站上的Google Analytics似乎無法正確感知會話。 它將登錄入口（登錄頁面）記錄到具有相當長URL的搜索頁面：

• 有這樣的數千個登陸頁面，這個網站是新的，所以沒有辦法從外部鏈接進入所有流量
• 所有這些會話的推薦人路徑都是“（未設置）”
• 內部IP地址已過濾
• 流量來自各種來源/媒介，表明會話在某種程度上打破了（截圖如下）

目前，GA已與GTM建立。 我嘗試使用它在React中觸發GTM標記。

還嘗試在GTM中使GA標記觸發瀏覽器歷史記錄更改而不是頁面視圖（歷史記錄在React中更改時觸發，在Wordpress中正常頁面視圖）。 但是這些修改仍然存在問題。

請注意，這些會話並非特定於任何一個瀏覽器：

Answer 1

您遇到的問題來自於搜索時的事實，您正在切換您的切入點並將頁面硬刷新到React應用程序。 盡管域名似乎沒有改變，但瀏覽器仍將其視為新頁面加載，因此在您的分析中顯示如此：如此請求所示：

你還沒有真正告訴你是否在你的應用程序中使用react-router（我假設你有不同的路徑），解決問題的方法是使用react-ga而不是默認的GA腳本和利用react-router的onUpdate回調。

首先使用您的GA ID導入並初始化模塊：

import ReactGA from 'react-ga'

ReactGA.initialize('UA-000000-01')

然后在路由配置中，在<Router>上添加onUpdate屬性，並創建一個僅使用路徑名調用google analytics的方法，這樣您就不會得到儀表板中非常討厭的所有查詢參數。

const onUpdate = () => {
  ReactGA.set({ page: window.location.pathname })
  ReactGA.pageview(window.location.pathname)
}

<Router onUpdate={onUpdate}>
  ...
</Router>

不過，如果你想跟蹤用戶搜索，我建議改為使用事件，並在搜索時執行以下操作：

ReactGA.event({
  category: 'User',
  action: 'Search',
  value: 'your formatted search value'
})

它還使您能夠以任何方式格式化搜索的值，這比查詢參數更易讀。