Как добавить Google Analytics в сайт на Next.js
Google Analytics помогает понять поведение посетителей вашего сайта: какие страницы просматривают, откуда приходят пользователи, какие устройства используют и как ведут себя на сайте. Эти данные помогают принимать продуктовые и маркетинговые решения.
Ниже приведено детальное руководство по подключению Google Analytics к Next.js, включая примеры кода, рекомендации по конфигурам и чек‑листы для разработчиков и маркетологов.
Что вам понадобится
- Рабочий проект на Next.js. Если проекта нет, начните с официального руководства Next.js.
- Аккаунт Google и доступ к Google Analytics (рекомендуется использовать GA4).
- Права редактирования кода проекта.
Как получить идентификатор измерения в Google Analytics
- Откройте панель Google Analytics и создайте учётную запись или выберите существующую.
- В разделе администратора нажмите Create Account и заполните имя аккаунта.
- Создайте ресурс (property) и укажите его имя.
- Заполните данные о бизнесе и выберите подходящие опции.
- Нажмите Create, чтобы завершить создание ресурса.
- Откройте поток данных (web stream) и задайте URL сайта и имя потока.
- Перейдите в раздел Tagging instructions и скопируйте скрипт отсюда.
- Скопируйте идентификатор измерения (measurement ID), он нужен в коде вашего сайта.
Вставка глобального тега в Next.js
При создании свойства Google даёт глобальный сайт‑тег примерно такого вида:
В Next.js рекомендуют использовать компонент Script из next/script. Он расширяет обычный тег
Это гарантирует, что при каждой навигации в приложении будет отправлен новый просмотр страницы.
Отслеживание событий (event) и пользовательских параметров
Вы можете отправлять события для кликов, отправок форм и других взаимодействий:
// пример вызова
gtag.event({
action: 'submit_form',
category: 'Contact',
label: 'Footer contact form',
value: 1,
});События помогают измерять конверсии и построить воронки в отчётах GA4.
Отладка и проверка
- Используйте режим реального времени в панели Google Analytics, чтобы увидеть события в реальном времени.
- Установите расширение Google Tag Assistant для браузера.
- В консоли браузера проверьте window.dataLayer и window.gtag.
- Убедитесь, что значения process.env доступны и корректны в окружении сборки.
Модели и альтернативы
- Альтернатива: Google Tag Manager (GTM). GTM удобен, если вам нужно часто менять теги без деплоя кода.
- Альтернатива: серверная отправка аналитики (server-side tracking). Подходит для улучшения конфиденциальности и обхода блокировщиков, но сложнее в реализации.
- Модель: Клиентская аналитика = быстро внедряется, даёт богатые данные, но зависит от блокировщиков и согласий пользователя.
Когда этот подход не работает
- Если пользователи блокируют трекеры с помощью расширений — события не дойдут.
- Если требования GDPR/CCPA запрещают отправку персональных данных без явного согласия — нужно реализовать окно согласия и задерживать загрузку тега до подтверждения.
- Если нужен высокий уровень точности (атрибуция офлайн/серверная), рассмотрите гибридный подход с серверной отправкой.
Приватность и соответствие требованиям (GDPR/локальные правила)
- Не отправляйте PII (личные идентификаторы) в GA. Никогда не кладите e‑mail, имя или другие чувствительные данные в параметры событий.
- Реализуйте CMP (consent management platform) и загружайте теги только после согласия, если это требуется регуляцией.
- Рассмотрите режим анонимизации IP в GA4 и настройку хранения данных в админке.
Чек‑лист перед релизом
- Идентификатор измерения добавлен и берётся из .env.local.
- Теги подключены через next/script с strategy=”afterInteractive”.
- Для SPA реализован pageview при router.events.on(“routeChangeComplete”).
- События (event) отправляются через библиотеку lib/gtag.js.
- Протестировали в режиме реального времени GA и Tag Assistant.
- Проверили поведение при отключённых cookies/блокировщиках.
- Убедились, что не отправляются PII.
Роли и обязанности
- Разработчик: реализует код, следит за корректной загрузкой скриптов, кладёт переменные окружения и проводит тесты.
- Маркетолог: проверяет, какие события нужны, описывает требования по событиям и воронкам.
- Privacy officer / юрист: утверждает текст CMP и правила хранения данных.
Критерии приёмки
- На тестовом окружении видно просмотры страниц в режиме реального времени при навигации по сайту.
- События из формы и кликов корректно отображаются в отчетах.
- Переменная окружения доступна в браузере и скрыта из публичного репозитория.
- CMP блокирует загрузку тега до получения согласия (если необходимо).
Мини‑методология внедрения аналитики
- Определите KPI и какие события нужно отслеживать.
- Настройте ресурс GA и получите идентификатор.
- Подключите глобальный тег через next/script и одну точку входа (lib/gtag.js).
- Реализуйте pageview для SPA.
- Настройте CMP при необходимости.
- Проверьте данные в реальном времени и согласуйте отчёты с маркетологом.
Примеры тест‑кейсов
- Навигация по сайту вызывает pageview при смене маршрута.
- Отправка формы создаёт событие с правильными параметрами.
- Отклонение cookies блокирует загрузку тега.
- Переменная NEXT_PUBLIC_GA_MEASUREMENT_ID корректно подставляется в src тега.
Советы по миграции с Universal Analytics на GA4
- GA4 использует модель событий. Переосмыслите события и параметры.
- Настройте сравнение данных и параллельный сбор, если возможно, прежде чем отключать UA.
- Проверьте настройки конверсий и аудитории в новой панели.
Краткое содержание
Добавление Google Analytics в Next.js — это комбинация корректного включения глобального тега и ручного отслеживания переходов в SPA. Храните идентификатор в .env, используйте next/script и слушайте event routeChangeComplete для регистрации просмотров. Обратите внимание на приватность и тестируйте интеграцию перед запуском.
Важно: при необходимости перехода на серверную отправку данных или использовании GTM, продумайте архитектуру так, чтобы маркетологи могли менять теги без частых код‑деплоев.
Спасибо за внимание. Если нужно, подготовлю готовые сниппеты для TypeScript версии проекта, или пример CMP-интеграции под GDPR.
Похожие материалы
RDP: полный гид по настройке и безопасности
Android как клавиатура и трекпад для Windows
Советы и приёмы для работы с PDF
Calibration в Lightroom Classic: как и когда использовать
Отключить Siri Suggestions на iPhone
