ReactGA.initialize 必须先调用

Question

尽管我在我的应用程序的根目录下进行了初始化，但我多次收到以下警告（针对多个页面）。这让我想知道 google 分析是否正常工作？ [react-ga] ReactGA.initialize must be called first or GoogleAnalytics should be loaded manually

我正在使用 ReactGA 处理我的 google 分析标签，但我无法让它工作。根据在线文档和其他一些问题，我需要做的就是将其插入我的应用程序根目录：

App.js:

import ReactGA from 'react-ga';
ReactGA.initialize('G-xxxxxxxxxx');

const app = () => (
    // Root level components here, like routing and navigation
)

我正在使用服务器端呈现，因此我要确保 window 对象在跟踪之前存在。这行放在我每个页面上导入的末尾：

示例page.js:

import ReactGA from 'react-ga';
if (typeof(window) !== 'undefined') {
    ReactGA.pageview(window.location.pathname + window.location.search);
}

function page() {
    return(<div className="page">Hello, World</div>)
}

export default page;

此时，没有很多关于如何为 SSR 应用程序设置 Google 分析的信息，所以我不完全确定我需要做什么才能让它正常工作。感谢您的帮助！

Answer 1

经过大量修改潜在的解决方案后，我终于找到了解决方案。由于页面浏览量在初始化完成之前被触发，我厌倦了尽可能多地延迟页面浏览量，将它放在 componentDidMount() 中。该实现如下所示：

App.js:

//imports
import ReactGA from 'react-ga';
ReactGA.initialize('UA-xxxxxxxxx-x');

const App = () => (
  <div className="App">
    <Navigation />
            
    <AppRouting />
  </div>
);

Page.js:

import ReactGA from 'react-ga';

class MyPage extends React.Component {
    componentDidMount() {
        ReactGA.pageview(window.location.pathname + window.location.search);
    }

    render() {
        return(
            <Component />
        );
    }
}

Answer 2

在功能组件中，可以使用 useEffect 钩子

完成相同的操作

useEffect(() => {
 ReactGA.pageview(window.location.pathname + window.location.search);
}, ['your dep'])

ReactGA.initialize 必须先调用

ReactGA.initialize must be called first

javascript

google-analytics

reactjs

server-side-rendering

react-ga