Добавление Google Analytics в Next.js: пошаговая настройка и советы

Зачем добавлять Google Analytics

Google Analytics помогает понять поведение посетителей: какие страницы просматривают, откуда они приходят, какие устройства и интересы у аудитории. Это базовый инструмент для принятия решений о продукте, маркетинге и приоритизации улучшений.

Кратко: GA полезен для метрик посещаемости, воронок конверсии и понимания аудитории. Для SPA (Next.js) важно дополнительно отправлять события при смене маршрутов — иначе теги засчитают только первоначальную загрузку.

Что потребуется перед началом

• Аккаунт Google и доступ в Google Analytics (GA4).
• Проект Next.js (pages router или app router).
• Возможность редактировать глобальные компоненты/лейауты (pages/_app.js или app/layout.js).

Важное: measurement ID (формат G-XXXXXXX) — не секрет, но лучше хранить его в переменной окружения с префиксом NEXTPUBLIC для клиентского доступа.

Быстрая схема действий

1. Создать ресурс (property) в Google Analytics и выбрать поток данных (Web).
2. Скопировать Measurement ID (G-…).
3. В Next.js подключить gtag скрипт в head через next/script.
4. Реализовать отправку page_view при смене маршрутов.
5. Протестировать и проверить в режиме отладки GA.

Настройка в Google Analytics (коротко)

1. Перейдите в панель Google Analytics и создайте ресурс.
2. В разделе “Потоки данных” добавьте веб-поток и укажите URL сайта.
3. На странице потока откройте инструкции по тегированию и скопируйте Measurement ID.

Важно: Measurement ID предназначен для вставки в клиентский код. Он не раскрывает приватные данные аккаунта.

Пример: подключение в проекте на pages router (pages/_app.js)

Ниже — рабочий и упрощённый пример для классического pages/_app.js. Он использует next/script и регистрирует переходы маршрутов через useRouter.

1. Создайте файл lib/gtag.js:

// lib/gtag.js
export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || '';

export const pageview = (url) => {
  if (!window.gtag) return;
  window.gtag('config', GA_MEASUREMENT_ID, {
    page_path: url,
  });
};

export const event = ({ action, category, label, value }) => {
  if (!window.gtag) return;
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value,
  });
};

2. Модифицируйте pages/_app.js:

// pages/_app.js
import '../styles/globals.css'
import Layout from '../components/Layout/Layout'
import Script from 'next/script'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import * as gtag from '../lib/gtag'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <>