Как добавить Google Tag Manager в Next.js: Полное руководство

  •   
  •   17407
  •   8 мин
  •   389

Что такое Google Tag Manager (GTM) и зачем он нужен?

Google Tag Manager (GTM) — это система управления тегами, позволяющая маркетологам и веб-аналитикам быстро и легко развертывать и управлять маркетинговыми тегами (фрагментами кода или пикселями отслеживания) на веб-сайте или в мобильном приложении без необходимости изменять код. GTM упрощает процесс добавления тегов Google Analytics, Google Ads, Facebook Pixel и множества других сторонних инструментов, централизуя управление ими в одном интерфейсе.

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

Основная цель GTM — отделить управление тегами от процесса разработки, предоставив гибкость и скорость для маркетинговых команд. Это позволяет быстрее реагировать на изменения рынка, запускать кампании и собирать необходимые данные без длительных циклов разработки и развертывания.

Преимущества использования GTM с Next.js

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

  • Централизованное управление тегами: Как и на любом другом сайте, GTM позволяет управлять всеми скриптами отслеживания из одного места.
  • Упрощенное отслеживание SPA: Next.js часто используется для создания одностраничных приложений (SPA). GTM предоставляет механизмы для отслеживания изменений маршрута и пользовательских взаимодействий в SPA без перезагрузки страницы.
  • Скорость развертывания: Маркетологи могут добавлять или изменять теги без привлечения разработчиков, что ускоряет запуск аналитических и маркетинговых инициатив.
  • Контроль версий и отладка: GTM имеет встроенные инструменты для предварительного просмотра, отладки и управления версиями контейнера, что снижает риск ошибок при развертывании тегов.

Предварительные требования: учетная запись Google и проект Next.js

Для начала работы вам понадобятся:

  1. Аккаунт Google Tag Manager: Создайте аккаунт на tagmanager.google.com и настройте контейнер для вашего веб-сайта.
  2. Проект Next.js: Существующий или новый проект Next.js, в который вы будете интегрировать GTM.
  3. Базовые знания Next.js и React: Понимание структуры проекта Next.js, компонентов и хуков React.

Установка Google Tag Manager в Next.js

Получение ID контейнера Google Tag Manager

После создания контейнера GTM для вашего сайта вы получите уникальный идентификатор (ID), который выглядит как GTM-XXXXXX. Этот ID необходим для интеграции GTM с вашим приложением Next.js. Его можно найти в интерфейсе GTM, обычно в правом верхнем углу или в разделе «Администрирование» > «Установить Google Менеджер тегов».

Добавление GTM в Next.js с помощью next/script

Компонент next/script является рекомендуемым способом добавления сторонних скриптов в Next.js, так как он оптимизирует их загрузку. Для интеграции GTM разместите компонент Script внутри pages/_app.tsx (или _app.js) или в специфическом лейауте, если GTM нужен не на всех страницах.

// pages/_app.tsx
import type { AppProps } from 'next/app';
import Script from 'next/script';
import '../styles/globals.css';

// Ваш GTM ID
const GTM_ID: string = 'GTM-XXXXXX'; // Замените на ваш реальный ID

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      {/* Google Tag Manager - Global site tag (gtag.js) */}
      <Script
        id="gtm-script"
        strategy="afterInteractive" // Загрузка после интерактивности страницы
        dangerouslySetInnerHTML={{
          __html: `
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','${GTM_ID}');
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Важно также добавить <noscript> часть кода GTM. Это лучше сделать в файле pages/_document.tsx (или _document.js), так как он отвечает за структуру HTML-документа.

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

const GTM_ID: string = 'GTM-XXXXXX'; // Замените на ваш реальный ID

export default function Document() {
  return (
    <Html lang="ru">
      <Head />
      <body>
        {/* Google Tag Manager (noscript) */}
        <noscript>
          <iframe
            src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
            height="0"
            width="0"
            style={{ display: 'none', visibility: 'hidden' }}
          ></iframe>
        </noscript>
        {/* End Google Tag Manager (noscript) */}
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Реализация GTM на стороне клиента (Client-Side)

Представленный выше метод с next/script является клиентской реализацией. Скрипт GTM загружается и выполняется в браузере пользователя. Это стандартный и наиболее распространенный способ использования GTM.

Альтернативные методы: использование хуков useEffect

Хотя next/script является предпочтительным, в некоторых случаях, особенно при необходимости более сложной логики инициализации или при работе со старыми версиями Next.js, можно использовать хук useEffect внутри _app.tsx для добавления скрипта GTM. Однако этот метод менее оптимизирован по сравнению с next/script.

// Пример с useEffect (менее предпочтительный)
import { useEffect } from 'react';

// ... внутри компонента _app

useEffect(() => {
  const script = document.createElement('script');
  script.innerHTML = `(function(w,d,s,l,i){ /* GTM Snippet */ })(window,document,'script','dataLayer','${GTM_ID}');`;
  document.head.appendChild(script);

  // Очистка при размонтировании компонента (хотя для _app это редко нужно)
  return () => {
    // Потенциальная логика очистки, если требуется
  };
}, []); // Пустой массив зависимостей для выполнения один раз

Настройка Google Tag Manager в Next.js

Создание тегов, триггеров и переменных в GTM

После установки GTM в Next.js основная работа перемещается в интерфейс Google Tag Manager:

  • Переменные (Variables): Это значения, которые могут изменяться, например, URL страницы, ID клика или пользовательские данные. Вы можете использовать встроенные переменные (Page URL, Click ID) или создавать собственные (например, для извлечения данных из dataLayer).
  • Триггеры (Triggers): Определяют, когда должен срабатывать тег. Примеры триггеров: просмотр страницы (Page View), клик по ссылке (Click), отправка формы (Form Submission), пользовательское событие (Custom Event).
  • Теги (Tags): Это фрагменты кода, которые выполняются при срабатывании триггера. Примеры: тег Google Analytics для отслеживания просмотров страниц, тег Google Ads для ремаркетинга, тег Facebook Pixel.

Отправка данных о просмотрах страниц (Page Views) в Google Analytics

В Next.js приложениях навигация между страницами часто происходит без полной перезагрузки страницы. Стандартный триггер GTM «Просмотр страницы» (All Pages) сработает только при первой загрузке. Для отслеживания переходов между страницами внутри SPA необходимо использовать триггер «Изменение истории браузера» (History Change) или отправлять пользовательские события.

  1. Настройте триггер «History Change»: В GTM создайте новый триггер типа «Изменение истории браузера».
  2. Настройте тег Google Analytics: Создайте или измените тег Universal Analytics или GA4 Configuration. В качестве триггера укажите созданный «History Change» и, возможно, стандартный «All Pages» для первой загрузки.

Альтернативно, можно прослушивать события изменения маршрута в Next.js (next/router) и отправлять пользовательское событие в dataLayer.

Реклама
// pages/_app.tsx
import { useRouter } from 'next/router';
import { useEffect } from 'react';

// Функция для отправки события в dataLayer
const pageview = (url: string): void => {
  (window as any).dataLayer = (window as any).dataLayer || [];
  (window as any).dataLayer.push({
    event: 'pageview',
    page: url,
  });
};

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

  useEffect(() => {
    // Отслеживание изменений маршрута
    const handleRouteChange = (url: string) => {
      pageview(url);
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    // Отписка от события при размонтировании
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  // ... остальной код _app, включая Script GTM
  return (
    <>
      {/* GTM Script */}
      <Component {...pageProps} />
    </>
  );
}

В этом случае в GTM нужно будет создать:

  1. Пользовательскую переменную Data Layer Variable для page.
  2. Пользовательский триггер Custom Event с именем события pageview.
  3. Настроить тег Google Analytics, чтобы он использовал этот триггер и переменную page для передачи URL.

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

Для отслеживания взаимодействий, таких как клики по кнопкам, отправка форм или другие пользовательские действия, используется dataLayer.push().

// Пример компонента кнопки с отслеживанием клика
import React from 'react';

interface TrackedButtonProps {
  buttonText: string;
  eventName: string;
  eventData?: Record<string, any>; // Дополнительные данные для события
}

const TrackedButton: React.FC<TrackedButtonProps> = ({ buttonText, eventName, eventData = {} }) => {

  const handleClick = (): void => {
    console.log(`Button clicked: ${eventName}`, eventData);
    (window as any).dataLayer = (window as any).dataLayer || [];
    (window as any).dataLayer.push({
      event: eventName, // Например, 'button_click' или 'add_to_cart'
      ...eventData, // Передача дополнительных параметров
    });
  };

  return (
    <button onClick={handleClick}>
      {buttonText}
    </button>
  );
};

export default TrackedButton;

// Использование:
// <TrackedButton 
//   buttonText="Добавить в корзину"
//   eventName="add_to_cart"
//   eventData={{ productId: '123', price: 99.99 }}
// />

В GTM необходимо:

  1. Создать триггер типа «Пользовательское событие» (Custom Event), указав имя события (например, add_to_cart).
  2. Создать переменные типа Data Layer Variable для получения productId и price (если они нужны).
  3. Создать тег (например, тег события GA4), который будет срабатывать по этому триггеру и передавать нужные данные.

Предварительный просмотр и отладка GTM

Перед публикацией изменений в контейнере GTM всегда используйте режим предварительного просмотра (Preview Mode). Он позволяет увидеть, какие теги срабатывают на вашем сайте в реальном времени, какие данные передаются в dataLayer и какие ошибки возникают. Активируйте режим Preview в интерфейсе GTM, откройте ваш сайт Next.js (обычно в новой вкладке), и панель отладки GTM появится внизу окна браузера.

Расширенные возможности и лучшие практики

Интеграция GTM с другими инструментами (например, Facebook Pixel)

Процесс добавления других тегов, таких как Facebook Pixel, Hotjar, LinkedIn Insight Tag и т.д., аналогичен настройке Google Analytics. В GTM выберите соответствующий шаблон тега (если доступен) или используйте тип тега «Пользовательский HTML» (Custom HTML) для вставки кода, предоставленного сервисом. Настройте триггеры для определения моментов срабатывания этих тегов (например, просмотры страниц, пользовательские события).

Управление сложными сценариями отслеживания

GTM позволяет реализовывать сложные сценарии, такие как:

  • Отслеживание электронной коммерции: Отправка данных о товарах, добавлениях в корзину, покупках через dataLayer в соответствии со схемой Enhanced Ecommerce (UA) или Ecommerce (GA4).
  • Отслеживание между доменами: Настройка GTM и Google Analytics для корректного отслеживания сеансов пользователей, переходящих между вашими разными доменами.
  • Динамический ремаркетинг: Передача ID продуктов или категорий для показа персонализированной рекламы.

Оптимизация производительности и безопасности GTM

  • Асинхронная загрузка: Убедитесь, что GTM и его теги загружаются асинхронно (async в скрипте), чтобы не блокировать рендеринг страницы.
  • Условная загрузка тегов: Используйте триггеры, чтобы теги срабатывали только на релевантных страницах или при определенных условиях.
  • Очистка неиспользуемых тегов: Регулярно проводите аудит контейнера GTM и удаляйте старые или ненужные теги, триггеры и переменные.
  • Content Security Policy (CSP): Настройте заголовки CSP на вашем Next.js сервере, чтобы разрешить загрузку скриптов только из доверенных источников (*.googletagmanager.com, *.google-analytics.com и т.д.).

Обработка согласия пользователя (Cookie Consent) и GDPR

Соблюдение правил GDPR и других законов о конфиденциальности требует получения согласия пользователя перед активацией тегов отслеживания, устанавливающих cookie.

  1. Интегрируйте платформу управления согласием (CMP): Используйте CMP (например, CookieYes, OneTrust, Cookiebot) или собственное решение для получения согласия.
  2. Настройте Consent Mode в GTM: Google Consent Mode позволяет управлять поведением тегов Google (Analytics, Ads) на основе статуса согласия пользователя. Настройте значения по умолчанию и обновления статуса согласия через dataLayer.
  3. Используйте условия согласия в триггерах: Для тегов, не поддерживающих Consent Mode напрямую, добавляйте в триггеры условия, проверяющие статус согласия (через переменные, считывающие cookie или dataLayer). Теги должны срабатывать только после получения необходимого согласия.

Заключение

Краткое повторение основных шагов

  1. Получите GTM ID из вашего контейнера Google Tag Manager.
  2. Интегрируйте основной скрипт GTM и <noscript> в ваше приложение Next.js, предпочтительно используя next/script в _app.tsx и _document.tsx.
  3. Настройте отслеживание просмотров страниц в SPA, используя триггер «History Change» или пользовательские события pageview при смене маршрута.
  4. Используйте dataLayer.push() для отправки пользовательских событий (клики, формы и т.д.) из компонентов React.
  5. Настраивайте теги, триггеры и переменные в интерфейсе GTM для сбора необходимых данных.
  6. Тестируйте конфигурацию с помощью режима предварительного просмотра GTM.
  7. Учитывайте производительность, безопасность и требования к согласию пользователя (GDPR).

Ресурсы для дальнейшего изучения

  • Официальная документация Google Tag Manager.
  • Документация Next.js по компоненту Script.
  • Блоги и форумы веб-аналитиков (например, Simo Ahava’s blog).
  • Документация Google по Consent Mode.

Часто задаваемые вопросы (FAQ)

  • Нужно ли добавлять GTM на каждой странице Next.js?
    Нет, достаточно добавить код GTM один раз в _app.tsx (скрипт) и _document.tsx (noscript), чтобы он присутствовал на всех страницах приложения.
  • Как отслеживать события в Server Components?
    GTM работает на стороне клиента. Для отслеживания событий, инициированных на сервере, вам потребуется передать информацию на клиент и вызвать dataLayer.push() оттуда, либо использовать Measurement Protocol для прямой отправки данных в Google Analytics с сервера.
  • Работает ли GTM со статически экспортированными сайтами Next.js (next export)?
    Да, интеграция GTM полностью совместима со статическими сайтами, сгенерированными Next.js. Принципы установки и настройки остаются теми же.
Метки:

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

Реклама
Все, что нужно знать: Комплексный обзор фильтрации значений столбца не равных null в Python Pandas
В мире анализа данных столкновение с пропущенными значениями — это не редкость, а скорее данность.
  •  2
  •   2026
Руководство: Как добавить и сохранить данные в CSV-файл с помощью Python Pandas
В мире анализа данных и работы с информацией, данные редко существуют в одном, идеально структурированном виде.
  •  3
  •   2026
Как проверить Google Analytics 4 на сайте и убедиться в корректности сбора данных?
В эпоху цифрового маркетинга понимание того, как пользователи взаимодействуют с вашим сайтом, является не просто преимуществом, а критической необходимостью.
  •  3
  •   2026