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

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

  1. Главный
  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? Как правильно использовать реактив-га?

7 ответов

Решение

Чтобы заставить его работать надо использовать 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;

Это способ сделать это с помощью крючков.

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составная часть. Если пользователь перезагружает сайт,App будет всегда перерисовываться. ReactGA.pageview(window.location.pathname + window.location.search) гарантирует, что мы приписываем перезагрузку правильному маршруту, если маршрут отличается от '/'.

Вот решение с использованием useLocation(), выпущенное в React Router V5.1.

Преимущество этого подхода в том, что он совместим с 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>
  )
}

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

ReactGA.pageview(pagepath);

в вашем маршруте.

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

Вы можете решить эту проблему с помощью файла 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, инициализировать и использовать сервисы, которые вам не нужно инициализировать каждый раз.

или вы можете использовать скрипт вместо response-ga для решения этой проблемы.

Я не получал пути (всегда '/'), пока не понял, что использую 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 Analytics tracking_id на стороне клиента. Ниже приведен обновленный код более безопасным способом, использующий 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();
   }, []);

Вот как вы решаете, как избежать «инициализации» GA для каждого компонента.

По сути, убедитесь, что первый запущенный скрипт ReactGA ReactGA.initialize('UA-00000000-1');

Чтобы убедиться, что вы должны разместить свой initGA();снаружи, а остальные скрипты ReactGA держите внутри componentDidMount().

Я знаю, что это старый пост, но все ответы касались отслеживания маршрута, но не этой реальной проблемы.

Другие вопросы по тегам