Это вторая статья по подключению систем, которые собирают информацию о действиях пользователя на вашем сайте. В первой статье мы поговорили о том, как подключить Яндекс.Метрику к React приложению. Тут сделаем то же самое, только уже с Google Analytics.
github наш тестовый проект:
git clone https://github.com/Katsiaryna-Yaravaya/react-Y.Analytics.git
Google Analytics
После регистрации на главной странице обозначаем, что мы хотим собирать данные с сайта.
Затем вводим url нашего сайта. Так как он у нас развернут локально, мы туда напишем просто test.com. И название потока, в моем случае Test stream. И нажмем кнопку создать поток.
Следующая форма дает нам всю информацию о потоке. Но нас интересует раскрывающаяся область - Глобальный тег (gtag.js). При нажатии на нее, мы увидим скрипт, который отвечает за интеграцию между Google Аналитика и нашим приложением.
Подключение к react приложению
Копируем скрипт и вставляем его порямо в <head>script</head>. Подключение происходит аналогично, yandex.metrika.
Стартуем наш проект. Открываем network, смотрим запросы, если у вас этот скрипт заблокирован -отключаем все блакировщики рекламам и проблема должна решиться.
Если переходить между страницами нашего небольшого сайта, то можно увидеть, что все переходы отслеживаются, и наше приложение отправляет отчеты.
Попробуем обработать событие нажатием на нашу кнопку. Добавляем код с именем кнопки и событием.
window.gtag('event', 'click', { event_category: 'clickBtn' })
И в network мы можем увидеть, что события отправляются.
Это пример самого простого подключение google analytics и нашего приложения. Google analytics мощнейший инструмент для сбора статистики. На первый взгляд Google analytics сложнее, чем его отечественный аналог, но более гибкий и оптимизированный (но это не точно).