Полное руководство: Интеграция Google Analytics 4 в веб-сайты на Next.js

  •   
  •   74717
  •   9 мин
  •   27

Современная веб-разработка стремительно развивается, и Next.js стал одним из ключевых фреймворков для создания высокопроизводительных, масштабируемых и SEO-оптимизированных приложений. Однако создание отличного продукта — это только половина дела; понимание того, как пользователи взаимодействуют с вашим сайтом, является критически важным для его успеха и дальнейшего развития. Здесь на помощь приходит Google Analytics 4 (GA4) — мощная платформа для сбора и анализа данных о поведении пользователей.

Саммари статьи
ChatGPT ChatGPT
Google AI Google AI
Grok Grok
Perplexity Perplexity

Интеграция GA4 в Next.js имеет свои особенности, обусловленные архитектурой фреймворка, включая серверный рендеринг (SSR), статическую генерацию (SSG) и клиентскую маршрутизацию. Это руководство призвано предоставить вам полное, пошаговое решение для бесшовной интеграции GA4 в ваш Next.js проект. Мы рассмотрим различные методы, от базового подключения до расширенного отслеживания событий, чтобы вы могли максимально эффективно использовать аналитические возможности для принятия обоснованных решений.

Введение в Google Analytics 4 и начальная настройка

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

Для начала работы с GA4 необходимо создать соответствующий ресурс. Перейдите в аккаунт Google Analytics, выберите "Администратор" и затем "Создать ресурс". Следуйте инструкциям, указав название ресурса, часовой пояс и валюту. После создания ресурса вам будет предложено настроить поток данных. Выберите "Веб" и введите URL вашего сайта и название потока. В результате вы получите Идентификатор измерения (Measurement ID), который имеет формат G-XXXXXXXXXX. Этот идентификатор является ключом для подключения вашего Next.js сайта к GA4 и будет использоваться во всех последующих шагах интеграции.

Что такое Google Analytics 4 и почему он важен для Next.js

Google Analytics 4 (GA4) представляет собой новое поколение аналитики от Google, основанное на событийно-ориентированной модели данных. В отличие от предыдущей версии Universal Analytics, которая фокусировалась на сессиях и просмотрах страниц, GA4 рассматривает каждое взаимодействие пользователя как событие. Это фундаментальное изменение делает его особенно ценным для современных веб-приложений, таких как те, что построены на Next.js.

Почему GA4 критически важен для Next.js-проектов?

  1. Оптимизация для SPA (Single Page Applications): Next.js-приложения часто функционируют как SPA после первоначальной загрузки, где переходы между страницами происходят без полной перезагрузки. Событийная модель GA4 идеально подходит для отслеживания таких переходов и взаимодействий, обеспечивая более точное понимание пользовательского пути.

  2. Гибкость в отслеживании: GA4 предлагает более гибкую структуру для сбора данных, позволяя легко настраивать пользовательские события и параметры. Это особенно полезно для Next.js, где компоненты и интерактивные элементы могут иметь уникальные взаимодействия, требующие детального анализа.

  3. Кросс-платформенное отслеживание: GA4 изначально разработан для объединения данных с веб-сайтов и мобильных приложений, предоставляя унифицированное представление о поведении пользователя на разных платформах, что актуально для компаний с комплексной цифровой стратегией.

  4. Машинное обучение и предиктивная аналитика: Встроенные возможности машинного обучения в GA4 помогают выявлять тенденции и прогнозировать поведение пользователей, что дает ценные инсайты для оптимизации Next.js-приложений.

Создание и настройка аккаунта GA4: получение идентификатора измерения

После понимания важности GA4 для Next.js, следующим шагом является создание аккаунта и получение уникального идентификатора измерения, который будет использоваться для сбора данных с вашего сайта. Этот процесс достаточно прост и включает несколько ключевых шагов:

  1. Перейдите в Google Analytics: Откройте Google Analytics и войдите в свой аккаунт Google. Если у вас нет аккаунта GA4, система предложит его создать.

  2. Создайте аккаунт и ресурс: В разделе "Администратор" (шестеренка в левом нижнем углу) выберите "Создать аккаунт", затем "Создать ресурс". Следуйте инструкциям, указывая название аккаунта, страну, часовой пояс и валюту.

  3. Настройте поток данных: После создания ресурса вам будет предложено настроить поток данных. Выберите "Веб" в качестве платформы. Введите URL вашего сайта (например, https://www.example.com) и дайте название потоку (например, "Мой Next.js сайт").

  4. Получите идентификатор измерения: После создания веб-потока вы увидите страницу с его деталями. Здесь будет отображен ваш Идентификатор измерения (Measurement ID), который начинается с G- (например, G-XXXXXXXXX). Это ключевой идентификатор, который вы будете использовать для подключения GA4 к вашему Next.js приложению. Скопируйте его, так как он понадобится на следующих этапах интеграции.

Пошаговая интеграция GA4 в Next.js

Получив идентификатор измерения GA4, мы готовы приступить к его интеграции в ваш проект Next.js. Существует два основных подхода, каждый из которых имеет свои преимущества в зависимости от используемого роутера и предпочтений.

Интеграция с использованием next/script (для pages и app роутеров)

Компонент next/script позволяет эффективно загружать сторонние скрипты, такие как gtag.js, оптимизируя производительность. Для глобальной интеграции разместите его в корневом макете:

  • Для pages роутера (в pages/_document.js):

    import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html lang="ru">
      <Head>
        <Script
          strategy="afterInteractive"
          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
          `}
        </Script>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

  • Для app роутера (в app/layout.tsx):

    import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <body>
        {children}
        <Script
          strategy="afterInteractive"
          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
          `}
        </Script>
      </body>
    </html>
  );
}

Обратите внимание на использование strategy="afterInteractive", что позволяет скрипту загружаться после того, как страница станет интерактивной, не блокируя первоначальный рендеринг.

Оптимальный метод: использование @next/third-parties/google (для app роутера)

Для проектов, использующих app роутер (Next.js 13+), Next.js предлагает специализированную библиотеку @next/third-parties, которая упрощает интеграцию сторонних скриптов, включая Google Analytics. Это рекомендуемый подход.

  1. Установка библиотеки:

    npm install @next/third-parties
# или
yarn add @next/third-parties

  2. Интеграция в app/layout.tsx:

    import { GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <body>
        {children}
        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
      </body>
    </html>
  );
}

Этот метод значительно чище и проще, так как компонент GoogleAnalytics автоматически управляет загрузкой gtag.js и инициализацией GA4, следуя лучшим практикам Next.js.

Интеграция с использованием next/script (для pages и app роутеров)

Компонент next/script — это встроенный инструмент Next.js, предназначенный для оптимизированной загрузки сторонних скриптов, включая gtag.js для Google Analytics. Он предлагает различные стратегии загрузки, что критически важно для поддержания высокой производительности веб-сайта. Для интеграции GA4 с помощью next/script необходимо добавить два скрипта: один для загрузки самой библиотеки gtag.js, а второй — для инициализации GA4 с вашим уникальным идентификатором измерения.

Для pages роутера: Разместите следующие скрипты в файле pages/_app.js внутри корневого компонента. Это обеспечит загрузку аналитики на каждой странице вашего приложения.

// pages/_app.js
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID; // Подробнее о переменных окружения далее

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
      />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_MEASUREMENT_ID}');
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;
Реклама

Для app роутера: В app роутере аналогичные скрипты следует разместить в корневом файле app/layout.tsx или в другом компоненте, который оборачивает все страницы вашего приложения.

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID; // Подробнее о переменных окружения далее

  return (
    <html lang="ru">
      <body>
        <Script
          strategy="afterInteractive"
          src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
        />
        <Script
          id="google-analytics"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${GA_MEASUREMENT_ID}');
            `,
          }}
        />
        {children}
      </body>
    </html>
  );
}

Использование strategy="afterInteractive" гарантирует, что скрипты будут загружены после того, как страница станет интерактивной, что минимизирует влияние на показатели Core Web Vitals. Идентификатор измерения GA4 (GA_MEASUREMENT_ID) рекомендуется хранить в переменных окружения для безопасности и удобства управления.

Оптимальный метод: использование @next/third-parties/google (для app роутера)

Для проектов, использующих app роутер в Next.js 13+ (и особенно Next.js 14+), наиболее оптимальным и рекомендуемым методом интеграции Google Analytics 4 является использование библиотеки @next/third-parties/google. Этот подход разработан командой Vercel для упрощения работы со сторонними скриптами и повышения производительности.

  1. Установка библиотеки:

    Сначала установите пакет:

    npm install @next/third-parties
# или
yarn add @next/third-parties
# или
pnpm add @next/third-parties

  2. Использование компонента GoogleAnalytics:

    После установки вы можете импортировать и использовать компонент GoogleAnalytics в вашем корневом layout.tsx или page.tsx файле. Это гарантирует, что скрипт GA4 будет загружен на всех страницах.

    // app/layout.tsx или app/page.tsx
import { GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XXXXXXXXXX" />
    </html>
  );
}

    Замените G-XXXXXXXXXX на ваш реальный идентификатор измерения GA4. Этот компонент автоматически управляет загрузкой скрипта gtag.js и инициализацией GA4, предлагая более чистый и производительный способ интеграции по сравнению с ручным добавлением next/script.

Конфигурация и расширенное отслеживание

Для обеспечения гибкости и безопасности, особенно при работе с различными средами (разработка, тестирование, продакшн), рекомендуется управлять идентификатором измерения GA4 через переменные окружения. Next.js поддерживает переменные окружения, которые начинаются с NEXT_PUBLIC_, делая их доступными как на стороне сервера, так и на стороне клиента.

Управление идентификатором GA4 через переменные окружения (.env.local)

  1. Создайте файл .env.local в корне вашего проекта Next.js (если его еще нет).

  2. Добавьте ваш идентификатор измерения GA4 в этот файл:

    NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

    Замените G-XXXXXXXXXX на ваш реальный идентификатор.

  3. Используйте переменную в вашем коде, например, при инициализации компонента GoogleAnalytics:

    <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID} />

    Это позволяет легко менять идентификатор без изменения кода приложения.

Отслеживание просмотров страниц и пользовательских событий

Компонент @next/third-parties/google автоматически обрабатывает отслеживание просмотров страниц при навигации по вашему Next.js приложению. Однако для более глубокого анализа поведения пользователей вам потребуется отслеживать пользовательские события.

Для отправки пользовательских событий используйте глобальную функцию gtag, которая становится доступной после загрузки скрипта GA4:

// Пример отслеживания клика по кнопке
const trackButtonClick = () => {
  if (window.gtag) {
    window.gtag('event', 'button_click', {
      event_category: 'engagement',
      event_label: 'Название кнопки',
      value: 1
    });
  }
};

// Пример отслеживания отправки формы
const trackFormSubmission = () => {
  if (window.gtag) {
    window.gtag('event', 'form_submit', {
      event_category: 'leads',
      event_label: 'Контактная форма',
      form_id: 'contact_form_1'
    });
  }
};

Вы можете вызывать эти функции в обработчиках событий React-компонентов, чтобы фиксировать взаимодействия пользователей, которые не являются стандартными просмотрами страниц.

Управление идентификатором GA4 через переменные окружения (.env.local)

Для безопасного и гибкого управления идентификатором измерения Google Analytics 4 (GA4 ID) в Next.js рекомендуется использовать переменные окружения. Это позволяет легко переключаться между различными идентификаторами для разных сред (разработка, тестирование, продакшн) и предотвращает жесткое кодирование конфиденциальных данных в исходном коде.

Создайте файл .env.local в корне вашего проекта Next.js. В этом файле определите переменную, используя префикс NEXT_PUBLIC_, чтобы она была доступна на стороне клиента:

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXX

Замените G-XXXXXXXXX на ваш фактический идентификатор измерения GA4. Префикс NEXT_PUBLIC_ критически важен, так как Next.js автоматически делает такие переменные доступными в браузере. Теперь вы можете безопасно получить доступ к этому идентификатору в вашем коде, например, process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID, при инициализации GA4 или передаче его компоненту @next/third-parties/google.

Отслеживание просмотров страниц и пользовательских событий

После того как идентификатор GA4 доступен, можно настроить отслеживание. Для Next.js, как для SPA (Single Page Application), важно вручную отправлять события просмотра страниц при навигации, поскольку стандартный скрипт GA4 отслеживает только первую загрузку страницы. Это можно сделать, используя хук useEffect и события роутера Next.js:

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const usePageView = (measurementId) => {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      window.gtag('config', measurementId, {
        page_path: url,
      });
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events, measurementId]);
};

export default usePageView;

Для отслеживания пользовательских событий, таких как клики по кнопкам или отправка форм, используйте функцию gtag('event', ...):

window.gtag('event', 'button_click', {
  event_category: 'engagement',
  event_label: 'Download Brochure',
  value: 1,
});

Это позволяет собирать детальные данные о взаимодействии пользователей с вашим сайтом.

Лучшие практики, Google Tag Manager и верификация

Для обеспечения гибкости и масштабируемости отслеживания, особенно в крупных проектах, рассмотрите использование Google Tag Manager (GTM). GTM позволяет маркетологам управлять тегами и событиями без прямого изменения кода, что значительно упрощает внедрение новых отслеживаний и A/B-тестирование. Вы можете интегрировать GTM через next/script или @next/third-parties/google, разместив его контейнерный код.

После интеграции крайне важно убедиться в корректности сбора данных. Используйте DebugView в интерфейсе GA4 для просмотра событий в реальном времени. Также проверяйте отчеты в реальном времени и сетевые запросы в инструментах разработчика браузера, чтобы подтвердить отправку данных на конечные точки GA4.

Google Tag Manager (GTM) и выбор метода интеграции

Google Tag Manager (GTM) предоставляет централизованную платформу для управления всеми тегами отслеживания, включая GA4, без необходимости изменения кода сайта при каждом обновлении. Это особенно полезно для крупных проектов или команд, где маркетологи и аналитики часто вносят изменения в отслеживание.

Выбор метода интеграции:

  • Прямая интеграция GA4 (через next/script или @next/third-parties/google) оптимальна для простых сайтов с минимальными требованиями к отслеживанию, где достаточно базовых событий и просмотров страниц.

  • Интеграция через GTM предпочтительна, если вы планируете использовать множество различных тегов (например, для рекламных платформ, тепловых карт), нуждаетесь в гибком управлении событиями, или если разные команды отвечают за разработку и аналитику. GTM упрощает масштабирование и тестирование отслеживания.

Проверка работы Google Analytics 4 и устранение неполадок

После интеграции GA4, независимо от выбранного метода (прямая интеграция или GTM), критически важно убедиться в корректности сбора данных. Это гарантирует, что ваша аналитика будет надежной и полезной.

  1. Отчеты в реальном времени (Realtime Reports): В интерфейсе Google Analytics 4 перейдите в раздел "Отчеты" -> "В реальном времени". Посетите ваш сайт в новой вкладке, и вы должны увидеть свою активность, включая просмотры страниц и события.

  2. DebugView: Для глубокой отладки используйте DebugView. Активируйте его, отправив параметр debug_mode=true с событием или используя расширение Google Analytics Debugger для Chrome. Это позволит просматривать все события и их параметры в режиме реального времени, что крайне полезно для проверки пользовательских событий.

  3. Устранение неполадок: Если данные не поступают, проверьте:

    • Правильность идентификатора измерения GA4.

    • Отсутствие блокировщиков рекламы в браузере.

    • Ошибки в консоли разработчика браузера (F12).

    • Корректность инициализации скрипта GA4 или контейнера GTM.

Заключение

Мы успешно прошли путь от понимания основ Google Analytics 4 до его полноценной интеграции в Next.js. Вы освоили различные методы, включая next/script и @next/third-parties/google, научились настраивать переменные окружения и отслеживать ключевые события. Теперь ваш сайт готов собирать ценные данные, которые станут основой для оптимизации пользовательского опыта и достижения бизнес-целей.

Метки:

Добавить комментарий

Реклама
Обзор BigQuery Legacy SQL против Standard SQL: Подробное сравнение синтаксиса, функций и миграции
В мире больших данных и аналитики Google BigQuery зарекомендовал себя как одно из самых мощных и масштабируемых хранилищ данных.
  •  2
  •   2026
Standard SQL в BigQuery: какой диалект используется и его особенности
В мире больших данных и аналитики выбор правильного языка запросов — это критически важный этап проектирования ETL/ELT-процессов.
  •  2
  •   2026
Полное руководство: Как удалить NaN из Pandas DataFrame на Python с помощью dropna()
NaN (Not a Number) — это не просто «пустое место» в таблице; это стандартизированный маркер, который Pandas и NumPy используют для обозначения отсутствующих, неизвестных или некорректных числовых данных.
  •  2
  •   2026