如何使用谷歌分析与反应？

Question

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

1. Main
2. 服务
3. 联系方式
4. 概况(私人)
5. 等等。

我需要跟踪用户的活动与谷歌分析。我在谷歌上搜索了反应-加，这很好。但是有了这个库，我必须在我使用的每一条路径上初始化我的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？什么是正确的方式使用反应-嘎？

Answer 1

要使其工作，需要使用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 2

这就是用钩子做这件事的方法。

App.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将始终被重命名。ReactGA.pageview(window.location.pathname + window.location.search)确保在路由不是'/'的情况下，将重新加载归因于正确的路由。

Answer 3

下面是使用ReactiveRoutV5.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>
  )
}