Как использовать Google Analytics с React?

Question

В моем приложении react есть несколько страниц:

1. Main
2. Сервис
3. Контакт
4. Профиль (личный)
5. и т. Д.

Мне нужно отслеживать активность пользователей с помощью Google Analytics.Я гуглил реаги-га и все нормально.Но с этой библиотекой я должен инициализировать свой 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 функциональность.Так в приложении компонент 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)
});

Этот код будет срабатывать при каждом изменении маршрута!

Чем присвоить атрибут истории для вашего маршрутизаторасоставная часть.

Полный код:

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

Вы должны инициировать только один раз, а затем после этого использовать

ReactGA.pageview(pagepath);

в своей маршрутизации.

Демо: https://github.com/react-ga/react-ga/tree/master/demo