Как настроить Google Analytics для React-Router?
Я пытаюсь настроить Google Analytics на своем сайте реакции, и наткнулся на несколько пакетов, но ни один из них не имеет такого типа настроек, как у меня в плане примеров. Надеюсь, что кто-нибудь сможет пролить свет на это.
Посылка, на которую я смотрю, - это реакция-га.
Мой метод рендеринга на моем index.js выглядит так
React.render((
<Router history={createBrowserHistory()}>
<Route path="/" component={App}>
<IndexRoute component={Home} onLeave={closeHeader}/>
<Route path="/about" component={About} onLeave={closeHeader}/>
<Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
<Route path="/contact-us" component={Contact} onLeave={closeHeader}>
<Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
</Route>
<Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
<Route path="/feedback" component={Feedback} onLeave={closeHeader} />
</Route>
<Route path="*" component={NoMatch} onLeave={closeHeader}/>
</Router>), document.getElementById('root'));
9 ответов
Держите ссылку на свой объект истории. т.е.
var history = createBrowserHistory();
ReactDOM.render((
<Router history={history}>
[...]
Затем добавьте слушателя для записи каждого просмотра страницы. (Предполагается, что вы уже настроили window.ga объект в обычном порядке.)
history.listen(function (location) {
window.ga('set', 'page', location.pathname + location.search);
window.ga('send', 'pageview');
});
Поскольку react-router v5.1.0 это можно решить намного проще с помощью useLocation.
usePageTracking.js
import { useEffect} from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";
const usePageTracking = () => {
const location = useLocation();
useEffect(() => {
ReactGA.initialize("UA-000000000-0");
ReactGA.pageview(location.pathname + location.search);
}, [location]);
};
export default usePageTracking;
App.js
const App = () => {
usePageTracking();
return (...);
};
Смотрите также:
Вот немного более умная версия:
usePageTracking.js
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";
const usePageTracking = () => {
const location = useLocation();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
if (!window.location.href.includes("localhost")) {
ReactGA.initialize("UA-000000000-0");
}
setInitialized(true);
}, []);
useEffect(() => {
if (initialized) {
ReactGA.pageview(location.pathname + location.search);
}
}, [initialized, location]);
};
export default usePageTracking;
Учитывая, что Google Analytics загружается и инициализируется с идентификатором отслеживания.
Вот решение для реакции-маршрутизатора версии 4 с использованием <Route> компонент для отслеживания просмотров страниц.
<Route path="/" render={({location}) => {
if (typeof window.ga === 'function') {
window.ga('set', 'page', location.pathname + location.search);
window.ga('send', 'pageview');
}
return null;
}} />
Вы просто визуализируете этот компонент внутри <Router> (но не как прямой ребенок <Switch>).
То, что происходит, - то, что всякий раз, когда изменяется положение, это вызывает повторный рендеринг этого компонента (фактически ничего не рендерит), который запускает просмотр страницы.
Я использую React Router v4 и глобальный тег сайта Google Analytics, который рекомендуется на момент написания этой статьи.
И вот мое решение:
Создайте компонент, завернутый в withRouter из react-router-dom:
import React from 'react';
import { withRouter } from 'react-router-dom';
import { GA_TRACKING_ID } from '../config';
class GoogleAnalytics extends React.Component {
componentWillUpdate ({ location, history }) {
const gtag = window.gtag;
if (location.pathname === this.props.location.pathname) {
// don't log identical link clicks (nav links likely)
return;
}
if (history.action === 'PUSH' &&
typeof(gtag) === 'function') {
gtag('config', GA_TRACKING_ID, {
'page_title': document.title,
'page_location': window.location.href,
'page_path': location.pathname
});
}
}
render () {
return null;
}
}
export default withRouter(GoogleAnalytics);
Просто добавьте компонент в свой маршрутизатор (я считаю, что в идеале после любых подходящих маршрутов и любых компонентов Switch, потому что функция аналитики не должна быть приоритетной по сравнению с визуализацией вашего сайта):
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import IndexPage from './IndexPage';
import NotFoundPage from './NotFoundPage';
import GoogleAnalytics from './GoogleAnalytics';
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={IndexPage} />
<Route component={NotFoundPage} />
</Switch>
<GoogleAnalytics />
</Router>
);
Как указано:
withRouter будет рендерить свой компонент каждый раз, когда маршрут меняется с теми же реквизитами, что и реквизит рендеринга
Поэтому, когда маршрут меняется, GoogleAnalytics компонент будет обновлен, он получит новое местоположение в качестве реквизита, и history.action будет либо PUSH для нового элемента истории или POP сигнализировать о движении назад по истории (что, я думаю, не должно вызывать просмотр страницы, но вы можете настроить операторы if в componentWillUpdate как считаете нужным (можно даже попробовать componentDidUpdate с this.props вместо этого, но я не уверен, что лучше)).
Обратите внимание, если вы используете react-router-dom пакет из react-router-4 Вы можете справиться с этим так:
import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
const initGA = (history) => {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'YOUR_IDENTIFIER_HERE', 'auto');
ga('send', 'pageview');
history.listen((location) => {
console.log("tracking page view: " + location.pathname);
ga('send', 'pageview', location.pathname);
});
};
initGA(history);
class App extends Component { //eslint-disable-line
render() {
return
(<Router history={history} >
<Route exact path="/x" component={x} />
<Route exact path="/y" component={y} />
</Router>)
}
}
Обратите внимание, что для этого необходимо установить history пакет (npm install history). Это уже зависимость от response-router-dom, поэтому вы не добавляете здесь вес страницы.
Также обратите внимание: Невозможно использовать компонент BrowserRouter И инструмент для отслеживания вашего пути таким образом. Это нормально, потому что компонент BrowserRouter - это просто очень тонкая оболочка вокруг объекта Router. Мы воссоздаем функциональность BrowserRouter здесь с <Router history={history}> где const history = createBrowserHistory();,
Я бы предложил использовать отличный react-router-ga пакет, который очень легкий и простой в настройке, особенно при использовании BrowserRouter обертка.
Импортируйте компонент:
import Analytics from 'react-router-ga';
Затем просто добавьте <Analytics> в вашем BrowserRouter:
<BrowserRouter>
<Analytics id="UA-ANALYTICS-1">
<Switch>
<Route path="/somewhere" component={SomeComponent}/>
</Switch>
</Analytics>
</BrowserRouter>
Мне нравится, как Марк Томас Мюллер предлагает здесь:
В вашем index.js
import ReactGA from 'react-ga'
ReactGA.initialize('YourAnalyticsID')
ReactDOM.render(<App />, document.getElementById('root'))
Где ваши маршруты:
import React, { Component } from 'react'
import { Router, Route } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
import ReactGA from 'react-ga'
const history = createHistory()
history.listen(location => {
ReactGA.set({ page: location.pathname })
ReactGA.pageview(location.pathname)
})
export default class AppRoutes extends Component {
componentDidMount() {
ReactGA.pageview(window.location.pathname)
}
render() {
return (
<Router history={history}>
<div>
<Route path="/your" component={Your} />
<Route path="/pages" component={Pages} />
<Route path="/here" component={Here} />
</div>
</Router>
)
}
}
Коротко, масштабируемо и просто:)
Всегда придерживайтесь рекомендуемого пути библиотеки
В документацию React-GA они добавили компонент сообщества, рекомендуемый для использования с React Router: https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker
Реализация
import withTracker from './withTracker';
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Route component={withTracker(App, { /* additional attributes */ } )} />
</ConnectedRouter>
</Provider>,
document.getElementById('root'),
);
Код
import React, { Component, } from "react";
import GoogleAnalytics from "react-ga";
GoogleAnalytics.initialize("UA-0000000-0");
const withTracker = (WrappedComponent, options = {}) => {
const trackPage = page => {
GoogleAnalytics.set({
page,
...options,
});
GoogleAnalytics.pageview(page);
};
// eslint-disable-next-line
const HOC = class extends Component {
componentDidMount() {
// eslint-disable-next-line
const page = this.props.location.pathname + this.props.location.search;
trackPage(page);
}
componentDidUpdate(prevProps) {
const currentPage =
prevProps.location.pathname + prevProps.location.search;
const nextPage =
this.props.location.pathname + this.props.location.search;
if (currentPage !== nextPage) {
trackPage(nextPage);
}
}
render() {
return <WrappedComponent {...this.props} />;
}
};
return HOC;
};
export default withTracker;
Во-первых, в вашем index.js установите функцию onUpdate для вызова ga
import ga from 'ga.js';
onUpdate() {
console.log('=====GA=====>', location.pathname);
console.log('=====GA_TRACKING_CODE=====>', GA_TRACKING_CODE);
ga("send", "pageview", location.pathname);
}
render() {
return (
<Router onUpdate={this.onUpdate.bind(this)}>...</Router>
);
}
И ga.js:
'use strict';
if(typeof window !== 'undefined' && typeof GA_TRACKING_CODE !== 'undefined') {
(function(window, document, script, url, r, tag, firstScriptTag) {
window['GoogleAnalyticsObject']=r;
window[r] = window[r] || function() {
(window[r].q = window[r].q || []).push(arguments)
};
window[r].l = 1*new Date();
tag = document.createElement(script),
firstScriptTag = document.getElementsByTagName(script)[0];
tag.async = 1;
tag.src = url;
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})(
window,
document,
'script',
'//www.google-analytics.com/analytics.js',
'ga'
);
var ga = window.ga;
ga('create', GA_TRACKING_CODE, 'auto');
module.exports = function() {
return window.ga.apply(window.ga, arguments);
};
} else {
module.exports = function() {console.log(arguments)};
}
Вот самый простой способ отследить все пути с некоторыми обходными путями:
npm i --save history react-ga
создать файл history.js
import { createBrowserHistory } from "history"
import ReactGA from "react-ga"
ReactGA.initialize(process.env.REACT_APP_GA)
const history = createBrowserHistory()
history.listen((location) => {
ReactGA.pageview(location.pathname)
})
// workaround for initial visit
if (window.performance && (performance.navigation.type === performance.navigation.TYPE_NAVIGATE)) {
ReactGA.pageview("/")
}
export default history
а затем импортировать его туда, где установлен ваш Router
import history from "./history"
...
class Route extends Component {
render() {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={HomePage} />
...
</Switch>
</Router>
)
}
export default Route
Рекомендации:
Я предлагаю использовать аналитическую библиотеку сегментов и следовать руководству по быстрому старту React для отслеживания вызовов страниц с использованием библиотеки act -router. Вы можете разрешить <Route /> компонент для обработки, когда страница отображает и использует componentDidMount вызывать page звонки. В приведенном ниже примере показан один способ сделать это:
const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
);
export default App;
export default class Home extends Component {
componentDidMount() {
window.analytics.page('Home');
}
render() {
return (
<h1>
Home page.
</h1>
);
}
}
Я поддерживаю https://github.com/segmentio/analytics-react. С помощью сегмента вы сможете включать и выключать разные пункты назначения одним щелчком переключателя, если вы заинтересованы в использовании нескольких аналитических инструментов (мы поддерживаем более 250 направлений) без необходимости писать какой-либо дополнительный код.
Если вы используете хеш или историю браузера, вы можете сделать:
import trackingHit from 'tracking';
import { Router, browserHistory } from 'react-router';
browserHistory.listen(trackingHit);
// OR
import { Router, hashHistory } from 'react-router';
hashHistory.listen(trackingHit);
где./tracking.es6
export default function(location) {
console.log('New page hit', location.pathname);
// Do your shizzle here
}
Для динамического обновления URL-адреса какого-либо события (например, onClick и т. Д.) Можно использовать следующее:
//Imports
import ReactGA from "react-ga";
import { createBrowserHistory } from "history";
// Add following on some event, like onClick (depends on your requirement)
const history = createBrowserHistory();
ReactGA.initialize("<Your-UA-ID-HERE>");
ReactGA.pageview(history.location.pathname);
На основе предложений @david-l-walsh и @bozdoz
Я создал HOC, который выполняет window.ga('set','page','{currentUrl}) а также window.ga('send', 'pageview'); функция и легко используется прямо на странице маршрутизатора...
это HOC:
import React from 'react';
import { history } from '../../store'; // or wherever you createBrowserHistory(); invokation is
function withGAHistoryTrack(WrappedComponent) {
return class extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const { location } = history;
const page = location.pathname + location.search;
if (typeof window.ga === 'function') {
window.ga('set', 'page', page);
window.ga('send', 'pageview');
}
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
export default withGAHistoryTrack;
и используется на странице маршрутизатора следующим образом:
<Route
path={'yourPath'}
component={withGAHistoryTrack(yourComponent)}
exact
/>
Базовая реализация реакции-ga с вашим index.js
var ReactGA = require('react-ga'); // require the react-ga module
ReactGA.initialize('Your-UA-ID-HERE'); // add your UA code
function logPageView() { // add this function to your component
ReactGA.set({ page: window.location.pathname + window.location.search });
ReactGA.pageview(window.location.pathname + window.location.search);
}
React.render((
<Router history={createBrowserHistory()} onUpdate={logPageView} > // insert onUpdate props here
<Route path="/" component={App}>
<IndexRoute component={Home} onLeave={closeHeader}/>
<Route path="/about" component={About} onLeave={closeHeader}/>
<Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
<Route path="/contact-us" component={Contact} onLeave={closeHeader}>
<Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
</Route>
<Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
<Route path="/feedback" component={Feedback} onLeave={closeHeader} />
</Route>
<Route path="*" component={NoMatch} onLeave={closeHeader} />
</Router>), document.getElementById('root'));