如何在 React 中使用 Google Analytics? [英] How to use Google Analytics with React?

问题描述

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

1. 主要
2. 服务
3. 联系方式
4. 个人资料(私人)
5. 等等.

我需要使用 Google Analytics 跟踪用户活动.我在 google 上搜索了 react-ga，结果很好.但是有了这个库，我必须在我使用的每条路线上初始化我的 GA.例如:

路由/" - 主页:

class Main 扩展组件 {componentDidMount() {initGA();}使成为() {返回 (<div><组件1/><组件2/>

)}}

我的 initGA() 看起来像:

从'react-ga'导入ReactGA；导出 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 扩展组件 {使成为() {返回 (<浏览器路由器><div className="应用程序"><开关><路由精确路径="/" component={Main}/><路由精确路径="/signup" component={SignupLayout}/><路由组件={PublicLayout}/></开关>

</BrowserRouter>);}}

在我使用 react-ga 的方式中，我在每个渲染路由响应的组件上添加了 initGA() 函数.我认为在每个组件中都复制 initGA() 是不对的.拜托，伙计们，你们如何使用 react-ga?什么是使用 react-ga 的正确方法?

解决方案

要使其工作需要使用 Router 功能.所以在 App 组件 import { Router } from 'react-router-dom'.它必须是 Router 而不是 BrowserRouter.

然后从'history/createBrowserHistory'导入createHistory

const history = createHistory()ReactGA.initialize('UA-000000-1');history.listen((位置，动作)=> {ReactGA.pageview(location.pathname + location.search);控制台日志(位置.路径名)});

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

给你的路由器组件一个历史属性.

完整代码:

import React, { Component } from 'react';从'react-router-dom'导入{路由器，路由，交换机}；从'history/createBrowserHistory'导入createHistory从'./components/pages/Main'导入Main；从'react-ga'导入ReactGA；const 历史 = createHistory()ReactGA.initialize('UA-00000000-1');history.listen((位置，动作)=> {ReactGA.pageview(location.pathname + location.search);控制台日志(位置.路径名)});类 App 扩展组件 {使成为() {返回 (<路由器历史={历史}><div className="应用程序"><开关><路由精确路径="/" component={Main}/><路由精确路径="/signup" component={SignupLayout}/><路由组件={PublicLayout}/></开关>

</路由器>);}}导出默认应用程序；

In my react app I have some pages:

1. Main
2. Service
3. Contact
4. Profile (private)
5. etc..

I need to track users activity with Google Analytics. I googled react-ga and it's just fine. But with this library I have to initialize my GA on every route I use. For example:

Route "/" - main page:

class Main extends Component {

    componentDidMount() {
        initGA();
    }

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

My initGA() looks like:

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

My App class looks like:

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

In my way of using react-ga I'm adding initGA() function on every component which renders on route response. I think it is not right to duplicate initGA() in every component. Please, guys, how do you use react-ga? What is right way to use react-ga?

解决方案

To make it work need to use Router functionality. So in App component import { Router } from 'react-router-dom'. It has to be Router not BrowserRouter.

Then 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)
});

This code will fire on every route change!

Than give a history attribute to your Router component.

Complete code:

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;

这篇关于如何在 React 中使用 Google Analytics?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！