Добавляем Google Analytics в Next.js приложение

24.05.24

2 мин.

Решил добавить Google Analytics на страницы блога для базового отслеживания переходов по страницам.

Если коротко, то есть очень много способов сделать это, я же расскажу о двух из них:

Старый способ, который я использовал раньше;
Новый способ, появившийся не так давно;

Старый способ

Когда я запускал unasprazdnik, то я добавлял аналитику от гугла следующим образом:

import Script from "next/script";
import React from "react";

const GA_MEASUREMENT_ID = "G-1234567890"; //Не настоящий

type Props = {
  enabled: boolean;
};

const GtagContainer: React.FC<Props> = ({ enabled }) => {
  if (!enabled) return null;

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

          gtag('config', '${GA_MEASUREMENT_ID}');
        `}
      </Script>
    </>
  );
};

export default GtagContainer;

Новый способ

Теперь же Vercel выпустили пока ещё экспериментальный пакет @next/third-parties, с которым добавить аналитику становится чуть удобнее.

Установим его.

npm i @next/third-parties@latest

Далее добавим компонент GoogleAnalytics в RootLayout

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

const GA_MEASUREMENT_ID = "G-1234567890"; //Не настоящий

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId={GA_MEASUREMENT_ID} />
    </html>
  )
}

Теперь всё должно работать.

На этом всё! 🎉

Подписывайтесь на мой Youtube канал, Telegram и на сообщество Вконтакте 🙂

Старый способ

Новый способ

Поделиться

Поддержать автора

Вам может быть интересно:

Основал свой стартап - unasprazdnik.ru

Подключение счётчика Яндекс Метрики к Next.js приложению