Как использовать Google Analytics с React?
В моем react
В приложении у меня есть несколько страниц:
- Главный
- обслуживание
- контакт
- Профиль (личный)
- так далее..
Мне нужно отслеживать активность пользователей с помощью 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);
в вашем маршруте.
Вы можете решить эту проблему с помощью файла 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()
.
Я знаю, что это старый пост, но все ответы касались отслеживания маршрута, но не этой реальной проблемы.