x

Добро пожаловать в IT Leader Assistant.
Please Войти!

Создать аккаунт

Как настроить Google Аналитику на React проекте

Александра Шаламова
11-18-2020 15:09
Как настроить Google Аналитику на React проекте

Для тех кому удобнее видео-формат

Подключение 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 проекте. Для старта этого более чем достаточно, а дальше все будет зависеть от ваших задач.
Если у вас есть какие-то вопросы или пожелания вы можете воспользоваться формой для связи с нами:

Комментарии

Чтобы оставить комментарий, пожалуйста, авторизуйтесь

Подписывайтесь на обновления

Последние статьи из нашего блога