Подключение Google Analytics (GA4) в Next.js

8 нояб. 2024 г.

2 минуты260 слов

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

Настройте учетную запись Google Analytics

Перейдите на официальный сайт Google Analytics и создайте учетную запись, если еще нет. После создания учетной записи, вам нужно будет найти идентификатор потока данных, он будет выглядеть так: G-XXXXXXXXX. Найти его можно в разделе Потоки данных.

Добавим переменную окружения

Чтобы скрыть от глаз идентификатор потока данных, вынесем его в .env файл. Для этого в корневом каталоге создадим файл .env.local и вставим туда переменную с идентификатором.

NEXT_PUBLIC_GOOGLE_ANALYTICS='G-XXXXXXXXX'

Создадим компонент Google Analytics

Код компонента Google Analytics

import Script from "next/script";
 
const GoogleAnalytics = ({ ga_id }: { ga_id: string }) => (
  <>
    <Script
      async
      src={`https://www.googletagmanager.com/gtag/js? 
      id=${ga_id}`}
    ></Script>
    <Script
      id="google-analytics"
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
 
          gtag('config', '${ga_id}');
        `,
      }}
    ></Script>
  </>
);
export default GoogleAnalytics;

Добавим компонент в шаблон

Добавим компонент в файл layout.tsx, он находится в каталоге app.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
      <html lang="ru">
        <body>
          {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS && (
            <GoogleAnalytics ga_id= 
            {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
          )}
          // ... тут остальной код
        </body>
      </html>
  );
}

Проверяем

Запускаем приложение и в браузере в консоли набираем dataLayer. Если вы видите такой же результат как на картинке, значит все хорошо)

Деплоем проект

При деплое не забудьте добавить такую же переменную окружения как мы добавляли выше.