x
Как настроить Google Аналитику на React проекте
11-18-2020 15:09
Для тех кому удобнее видео-формат
Подключение Google Аналитики
Google Аналитика чрезвычайно важна для проекта. Она помогает увидеть не только как много пользователей заходит на ваш сайт на какие страницы, но и помогает понять многие другие параметры, которые помогут менять проект под реакцию пользователей. В этот статье я хочу рассказать о том, как подключить Google Аналитику на React проекте и какие нюансы стоит учитывать.
Подключить Google Аналитику очень просто, нужно всего лишь вставить тег в head вашей html страницы:
<script
defer
src="https://www.googletagmanager.com/gtag/js?id=YOUR_PROJECT_ID">
</script>
Атрибут
defer стоит здесь не случайно, это один из первых нюансов, с которым вы столкнетесь, если следите за производительностью своего сайта, например через PageSpeed Insights. Без defer и даже с атрибутом async выполнение скрипта аналитики будет сказываться на времени до доступности вашего сайта для пользователя. Поэтому на это стоит обратить внимание. Дальше, как указано в официальной документации, подключаем аналитику следующим inline-скриптом, так же с
defer:
<script defer>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', YOUR_PROJECT_ID);
</script>
После этого аналитика начнет работать и вы уже сможете следить за посещаемостью своего сайта.
Отслеживание переходов между страницами
Дальше, если вы используете в вашем проекте React Router, идет следующий нюанс: Google Аналитика по умолчанию не умеет распознавать переходы между страницами React Router. И в вашей статистике посещаемость всегда будет состоять из одной страницы. Исправить эту ситуацию можно следующим образом: подписаться на события роутера и при смене страницы отправить данные в аналитику вручную. Для удобства можно создать React-компонент и добавить его в свое приложение. Вот его
пример:
import React from 'react';
import { withRouter } from 'react-router-dom';
class GoogleAnalytics extends React.Component {
componentWillUpdate ({ location, history }) {
const gtag = window.gtag;
if (location.pathname === this.props.location.pathname) {
return;
}
if (history.action === 'PUSH' &&
typeof(gtag) === 'function') {
gtag('config', 'UA-87269926-3', {
'page_title': document.title,
'page_location': window.location.href,
'page_path': location.pathname
});
}
}
render () {
return null;
}
}
export default withRouter(GoogleAnalytics);
Теперь в вашей статистике будет отображаться верное количество страниц, посещенных вашими пользователями.
Использование событий
Также я рекомендую использовать события, чтобы понимать какие действия совершают пользователи, куда они доходят на сайте, а куда нет. Я для себя сделала следующую обертку, чтобы использовать ее в любом удобном месте в коде:
export const sendMetrik = (action, category, label, value) => {
const values = {};
if (typeof category !== 'undefined') {
values['event_category'] = category;
}
if (typeof label !== 'undefined') {
values['event_label'] = label;
}
if (typeof value !== 'undefined') {
values['value'] = value;
}
if (typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
window.gtag('event', action, values);
} else {
// на случай, если локально статистика отключена
console.log('event', action, values);
}
}
Отслеживание видимости элемента
Еще один полезный лайфках - модуль react-visibility-sensor. Он помогает отследить видимость определенных блоков и это часто очень полезно для анализа поведения пользователей на вашем сайте. Например, вы добавили какой-то блок внизу страницы и хотите понимать сколько людей действительно его видели и соотнести это с количеством людей кликнувших в нем на какую-то кнопку. В этом вам поможет этот модуль. Пример его использования:
<VisibilitySensor partialVisibility onChange={(isVisible) => {
if (!this.state.metrikSended && isVisible) {
this.setState({
metrikSended: true
})
sendMetrik('show', this.props.metrik)
}
}}>
// ваш контент
</VisibilitySensor>
Важно исключать повторное отправление статистики, если пользователь несколько раз пролистал страницу, так как это будет влиять на последующий анализ.
На сегодня это все лайфхаки, которые я хотела вам рассказать по использованию Google Аналитики в React проекте. Для старта этого более чем достаточно, а дальше все будет зависеть от ваших задач.
Если у вас остались вопросы, вы можете воспользоваться формой для связи или оставить комментарий ниже.
Комментарии
Чтобы оставить комментарий, пожалуйста, авторизуйтесь
Подписывайтесь на рассылку, участники первыми узнают о скидках
Последние статьи из нашего блога
ИП Шаламова Александра Сергеевна
ИНН 662007045961 / ОГРН 320774600352647
Телефон +7 (925) 219-07-88 Пн-Пт с 10:00 до 18:00 (Москва, UTC + 3)
Для связи: info@oros-it.ru
