如何在 React 中使用 Google 分析？

Question

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

主要
服务
联系方式
个人资料（私人）
等..

我需要使用 Google Analytics 跟踪用户 activity。我用谷歌搜索 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

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

ReactGA.pageview(pagepath);

在你的路线中。

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

Answer 2

要使其正常工作需要使用 Router 功能。所以在 App 组件 import { Router } from 'react-router-dom' 中。它必须是 Router 而不是 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)
});

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

然后为您的 Router 组件提供历史属性。

完整代码：

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

这是用钩子做的方法。

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>
}

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

Answer 4

你可以使用 service.js 文件来解决这个问题，你必须在其中制作多个 expotrs

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 导入并初始化和使用您不需要每次都初始化的服务。

或者你可以用脚本代替react-ga来解决这个问题

Answer 5

这是一个利用 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>
  )
}

Answer 6

在我意识到我正在使用 HashRouter 之前，我没有得到路径（总是“/”）。如果是这种情况，那么您可以应用以下内容：

import React, { useState, useEffect } from 'react';
import { Route, Switch, NavLink, HashRouter as Router } from 'react-router-dom';
import ReactGA from 'react-ga';
import { createHashHistory } from 'history';

const App = () => {
   ReactGA.initialize(trackingId);
   const browserHistory = createHashHistory();
   browserHistory.listen((location, action) => {
      ReactGA.pageview(location.pathname + location.search);
})

// Activate Google Analytics
useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search);
}, []);
}

顺便说一下，不建议将您的 Google 分析 tracking_id 放在 client-side 上。下面是以更安全的方式更新的代码，使用 axios 从服务器检索 tracking_id：

    useEffect(() => {
        const getTrackingID = async () => {
            await axios.get(`${url}/ga/tracking_id`, {
               headers: { 'Content-Type': 'application/json' }
            })
            .then(res => {
                if (res.status === 204) {
                    console.log('No GA tracking_id found');
                } else if (res.status === 200) {
                    const trackingId = res.data;
                    ReactGA.initialize(trackingId);
                    // Capture 1st load in home page
                    ReactGA.pageview(window.location.pathname + window.location.search);
                    // Capture any subsequent page change
                    browserHistory.listen((location) => {
                        ReactGA.pageview(location.pathname + location.search);
                    });
                }
            })
            .catch(err => {
                console.log('Error while retrieving GA tracking_id', err);
            });
       };
       getTrackingID();
   }, []);

Answer 7

这是解决避免在每个组件上“初始化”GA 的方法。

基本上，确保运行的第一个 ReactGA 脚本是 ReactGA.initialize('UA-00000000-1');

为了确保您应该将 initGA(); 放在 componentDidMount() 之外，并将其余的 ReactGA 脚本放在 componentDidMount().

之内

我知道这是一个旧的 post 但所有的答案都解决了路线跟踪问题，而不是这个实际问题。

如何在 React 中使用 Google 分析？

How to use Google Analytics with React?

javascript

reactjs

google-analytics

react-ga