如何在React中使用Google Analytics（分析）？

Question

在我的react应用程序中，我有一些页面：

1. 主要
2. 服务
3. 联系
4. 个人资料（私人）
5. 等等..

我需要跟踪用户使用Google Analytics（分析）的活动。我用google搜索了react-ga，一切都很好。但是，有了这个库，我必须在使用的每条路线上初始化我的GA。例如：

路线“ /”-主页：

class Main extends Component {

    componentDidMount() {
        initGA();
    }

    render() {
        return (
            <div>
                <Component1 />
                <Component2 />
            </div>
        )
    }
}

我的initGA()样子是：

import ReactGA from 'react-ga';

export const initGA = () => {
    ReactGA.initialize('UA-00000000-1');
    ReactGA.pageview(window.location.pathname + window.location.search);
    console.log(window.location.pathname + window.location.search);
}

我的App class样子是：

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div className="App">

                    <Switch>
                        <Route exact path="/" component={Main} />
                        <Route exact path="/signup" component={SignupLayout} />
                        <Route component={PublicLayout} />
                    </Switch>

                </div>
            </BrowserRouter>
        );
    }
}

在我的使用方式中，react-ga我initGA()在路由响应上呈现的每个组件上添加功能。我认为initGA()在每个组件中重复都是不正确的。拜托，伙计们，您如何使用react-ga？什么是使用react-ga的正确方法？

Answer 1

这是用钩子来做到这一点的方法。

应用程序.js

import React, { useEffect } from 'react'
import { Router, Route } from 'react-router-dom'
import { createBrowserHistory } from 'history'
import ReactGA from 'react-ga'

ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_NO)
const browserHistory = createBrowserHistory()
browserHistory.listen((location, action) => {
  ReactGA.pageview(location.pathname + location.search)
})

const App = () => {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search)
  }, [])

  return <div>Test</div>
}

上面的类组件的答案几乎没问题，但您不会在分析中看到第一个页面加载。在history.listen当路由变化才会触发。第一次加载页面时不会发生这种情况。为了解决这个问题，我useEffect在App组件中添加了一个钩子。如果用户重新加载站点，App将始终重新呈现。ReactGA.pageview(window.location.pathname + window.location.search)如果路线不是'/'.

Answer 2

要使其工作，需要使用Router功能。因此在App组件中import { Router } from 'react-router-dom'。它必须是路由器而不是BrowserRouter。

然后 import createHistory from 'history/createBrowserHistory'

const history = createHistory()
ReactGA.initialize('UA-000000-1');
history.listen((location, action) => {
    ReactGA.pageview(location.pathname + location.search);
    console.log(location.pathname)
});

此代码将在每次更改路线时触发！

比给路由器组件一个历史属性。

完整的代码：

import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'
import Main from './components/pages/Main';
import ReactGA from 'react-ga';


const history = createHistory()
ReactGA.initialize('UA-00000000-1');
history.listen((location, action) => {
    ReactGA.pageview(location.pathname + location.search);
    console.log(location.pathname)
});

class App extends Component {

    render() {
        return (

            <Router history={history}>
                <div className="App">

                    <Switch>
                        <Route exact path="/" component={Main} />
                        <Route exact path="/signup" component={SignupLayout} />
                        <Route component={PublicLayout} />
                    </Switch>

                </div>
            </Router>
        );
    }
}

export default App;

Answer 3

这是一个利用React Router V5.1 中发布的useLocation()的解决方案。

这种方法的好处是，BrowserRouter如果您想继续使用它，它是兼容的。

import React, { useEffect } from 'react';
import { useLocation,} from 'react-router-dom';
import ReactGA from 'react-ga';

// Init Google Analytics
ReactGA.initialize('UA-00000000-1');

const App = () => {
  const location = useLocation();

  // Fired on every route change
  useEffect(() => {
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);

  return (
    <div className="App"></div>
  )
}