Интеграция Google Analytics 4 в Next.js: Пошаговая инструкция с примерами кода GitHub на русском языке

30.11.2025
65951

5 мин
26

Google Analytics 4 (GA4) – это новое поколение аналитической платформы от Google, пришедшее на смену Universal Analytics. GA4 предлагает event-ориентированную модель данных, расширенные возможности измерения, кросс-платформенное отслеживание и улучшенные функции конфиденциальности. Интеграция GA4 с Next.js позволяет отслеживать поведение пользователей на вашем сайте, анализировать эффективность маркетинговых кампаний и принимать решения на основе данных.

В этой статье мы рассмотрим пошаговую инструкцию по интеграции Google Analytics 4 в Next.js приложение, включая примеры кода и лучшие практики. Мы рассмотрим различные методы интеграции, отслеживание событий и решение распространенных проблем. Вы найдете примеры кода и готовые решения на GitHub для упрощения процесса интеграции.

Подготовка к интеграции: Настройка Google Analytics 4 и Next.js проекта

Прежде чем начать интеграцию, необходимо настроить аккаунт Google Analytics 4 и подготовить ваш Next.js проект.

Создание и настройка Google Analytics 4 аккаунта и потока данных

Перейдите на сайт Google Analytics и создайте новый аккаунт или используйте существующий.
Создайте новый ресурс GA4.
Настройте поток данных для вашего веб-сайта, указав URL и название.
Получите Measurement ID (G-XXXXXXXXXX), который потребуется для интеграции.

Создание Next.js проекта или подготовка существующего: установка зависимостей

Если у вас еще нет Next.js проекта, создайте его с помощью команды:

npx create-next-app my-nextjs-app
cd my-nextjs-app

Установите необходимые зависимости. В большинстве случаев дополнительных зависимостей не требуется, так как мы будем использовать либо gtag.js напрямую, либо библиотеку react-ga4 (если вы ее выберете).

npm install react-ga4 # если выбрали react-ga4
# или
yarn add react-ga4 # если используете yarn

Интеграция Google Analytics 4: Методы и примеры кода

Существует несколько способов интеграции Google Analytics 4 в Next.js.

Интеграция с использованием gtag.js: пошаговая инструкция и примеры кода (SSR, SSG, CSR)

gtag.js — это стандартный способ интеграции Google Analytics. Он поддерживается Google и предоставляет гибкие возможности для отслеживания.

Добавление скрипта gtag.js: Вставьте следующий код в <Head> вашего _document.js или _app.js. Это обеспечит загрузку скрипта на каждой странице.

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`} />
          <script
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());

                gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}', {
                  page_path: window.location.pathname,
                });
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Убедитесь, что переменная окружения NEXT_PUBLIC_GA_ID содержит ваш Measurement ID.

Отслеживание просмотров страниц: В Next.js, при использовании SSR (Server-Side Rendering) или SSG (Static Site Generation), page_path обновляется автоматически. Для CSR (Client-Side Rendering) необходимо отправлять события вручную при переходе между страницами. Используйте useEffect в _app.js или Router.events для отслеживания изменений маршрута.

// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

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

  useEffect(() => {
    const handleRouteChange = (url) => {
      window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
        page_path: url,
      });
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

export default MyApp;

Отправка событий: Используйте функцию gtag() для отправки событий. Например:

gtag('event', 'event_name', { event_parameter: 'event_value' });

Интеграция с использованием react-ga4: настройка и примеры отслеживания событий

react-ga4 — это React библиотека, упрощающая интеграцию Google Analytics 4. Она предоставляет React компоненты и хуки для отслеживания событий.

Инициализация: Инициализируйте react-ga4 в вашем _app.js:

// pages/_app.js
import ReactGA from 'react-ga4';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    ReactGA.initialize(process.env.NEXT_PUBLIC_GA_ID);
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Отслеживание просмотров страниц: react-ga4 автоматически отслеживает просмотры страниц. Можно также отправлять просмотры страниц вручную:

import ReactGA from 'react-ga4';

ReactGA.pageview(window.location.pathname);

Отправка событий: Используйте функцию ReactGA.event() для отправки событий:

import ReactGA from 'react-ga4';

ReactGA.event({
  category: 'category_name',
  action: 'action_name',
  label: 'label_name',
  value: 10,
});

Отслеживание событий и пользовательского поведения

Отслеживание просмотров страниц: реализация для разных типов рендеринга

Как упоминалось ранее, отслеживание просмотров страниц зависит от типа рендеринга:

SSR/SSG: gtag.js автоматически отслеживает просмотры страниц. Дополнительная настройка не требуется.
CSR: Используйте useEffect и Router.events для отправки событий при изменении маршрута (пример выше).

Отслеживание пользовательских событий: отправка событий в GA4 с помощью gtag.js и react-ga4

Отслеживайте важные пользовательские действия, такие как клики по кнопкам, отправка форм и загрузка файлов. Используйте gtag() или ReactGA.event() для отправки этих событий.

Пример (gtag.js):

<button onClick={() => gtag('event', 'button_click', { button_id: 'my_button' })}>Click me</button>

Пример (react-ga4):

import ReactGA from 'react-ga4';

<button onClick={() => ReactGA.event({ category: 'button', action: 'click', label: 'my_button' })}>Click me</button>

Решение проблем и лучшие практики

Решение распространенных проблем: отладка и устранение ошибок интеграции

Убедитесь, что Measurement ID правильный. Проверьте переменную окружения NEXT_PUBLIC_GA_ID.
Проверьте консоль браузера на наличие ошибок JavaScript.
Используйте Google Analytics Debugger Chrome extension для отладки событий.
Проверьте отчеты в Google Analytics 4 через 24-48 часов после интеграции. Данные появляются не сразу.

Конфиденциальность данных и соблюдение GDPR при использовании Google Analytics 4 в Next.js

Получите согласие пользователя на отслеживание. Используйте cookie banner или другое решение для получения согласия.
Анонимизируйте IP-адреса. В GA4 это делается автоматически, но убедитесь, что настройка включена.
Предоставьте пользователям возможность отказаться от отслеживания. Реализуйте механизм для отключения Google Analytics на основе предпочтений пользователя.
Ознакомьтесь с требованиями GDPR и другими законами о конфиденциальности.

Заключение и дальнейшие шаги

Интеграция Google Analytics 4 в Next.js – важный шаг для анализа поведения пользователей и улучшения вашего веб-сайта. В этой статье мы рассмотрели основные методы интеграции, отслеживание событий и решение распространенных проблем.

Дальнейшие шаги:

Изучите документацию Google Analytics 4.
Настройте собственные события и параметры.
Используйте GA4 для анализа данных и принятия решений.
Ознакомьтесь с примерами кода на GitHub (например, поищите запросы типа "nextjs google analytics github" на GitHub).
Рассмотрите использование Google Tag Manager для более сложной настройки отслеживания.

Надеемся, эта инструкция поможет вам успешно интегрировать Google Analytics 4 в ваш Next.js проект на русском языке!