Pull to refresh

Google Analytics и React

Это вторая статья по подключению систем, которые собирают информацию о действиях пользователя на вашем сайте. В первой статье мы поговорили о том, как подключить Яндекс.Метрику к 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 сложнее, чем его отечественный аналог, но более гибкий и оптимизированный (но это не точно).

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.