如何在 React 中使用 Google Analytics？

IT技术 javascript reactjs google-analytics react-ga
2021-03-24 03:16:11

在我的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 的正确方法是什么？

6个回答

这是用钩子做的方法。

应用程序.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)如果路线不是'/'.

它只需要调用一次。钩子只记录第一个页面加载。页面加载的其余部分将记录在browserHistory.listen偶数侦听器中。
2021-05-26 03:16:11
你确定这有效吗？看起来useEffect只会被调用一次！
2021-05-30 03:16:11
我使用了你的解决方案，它对我很有用。谢谢你。+1
2021-06-04 03:16:11

为了使其工作需要使用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;
@slinden 旧评论，但也许可以帮助其他人：注册第一页加载只需在 ReactGA.initialize 之后立即启动 ReactGA.pageview 函数，仅此而已
2021-05-24 03:16:11
（与问题无关）但如果您不需要它们，请不要创建类。改用功能组件。我个人喜欢使用class，但仅在需要时使用。
2021-06-05 03:16:11
所以使用这个，我们不需要在 componentDidMount() / componentWillMount() 中的每个组件上调用 initGA() ？
2021-06-12 03:16:11
这个答案没问题，但您不会在分析中保存第一页加载。在history.listen当路由变化才会触发。第一次加载页面时不会发生这种情况。
2021-06-17 03:16:11

这是使用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>
  )
}
这是目前最简单的全面工作的实现，谢谢！
2021-06-22 03:16:11

你应该只初始化一次，然后使用

ReactGA.pageview(pagepath);

在你的路由中。

演示：https : //github.com/react-ga/react-ga/tree/master/demo

我ReactGA.initialize在 index.js 和每个页面上都添加了，ReactGA.pageview('...')但控制台上总是有警报ReactGA.initialize must be called first or GoogleAnalytics should be loaded manually。所以我决定在每一页上添加ReactGA.initialize
2021-05-24 03:16:11
“在你的路由中”是什么意思？你能用代码给出更详细的例子吗？
2021-06-01 03:16:11
以这种方式跟踪不起作用。发出警告：react-ga.js:88 [react-ga] 必须先调用 ReactGA.initialize 否则应手动加载 GoogleAnalytics
2021-06-03 03:16:11

您可以使用 service.js 文件解决此问题，您必须在其中创建多个导出器

import ReactGA from 'react-ga';

export const GAInit = (TrackingID) => {
   ReactGA.initialize(TrackingID)
}

export const GAEvent = (category, action) => {
ReactGA.initialize('TrackingIDHere')   
ReactGA.event({
   category,
   action
})
}

// export pageview and more...

从 App.js 导入并初始化和使用您不需要每次都初始化的服务。

或者你可以使用 script 代替 react-ga 来解决这个问题。

其它你可能感兴趣的问题
上一篇this.props.children 不会在父状态改变时重新渲染 下一篇create-react-app 中的条件 css