Использование Google Analytics с Next.js (через `next/script`)

Предпочитайте компонент next/script при использовании встроенного скрипта для Google Analytics.

Почему возникла эта ошибка

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

Возможные способы исправления

Использование @next/third-parties для добавления Google Analytics

@next/third-parties — это библиотека, которая предоставляет набор компонентов и утилит, улучшающих производительность и опыт разработчика при загрузке популярных сторонних библиотек в ваше приложение Next.js. Она доступна с Next.js 14 (установите next@latest).

Компонент GoogleAnalytics можно использовать для включения Google Analytics 4 на вашу страницу через тег Google (gtag.js). По умолчанию он запрашивает исходные скрипты после гидрации страницы.

Рекомендация: если Google Tag Manager уже включен в ваше приложение, вы можете настроить Google Analytics напрямую с его помощью, вместо включения Google Analytics как отдельного компонента. Обратитесь к документации, чтобы узнать больше о различиях между Tag Manager и gtag.js.

Для загрузки Google Analytics для всех маршрутов включите компонент непосредственно в ваш корневой макет и передайте свой идентификатор измерения:

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

Для загрузки Google Analytics для отдельного маршрута включите компонент в ваш файл страницы:

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

Важно знать:

Если вы используете маршрутизатор страниц, обратитесь к pages/ документации.

@next/third-parties также поддерживает Google Tag Manager и другие сторонние сервисы.

Использование @next/third-parties не является обязательным. Вы также можете использовать компонент next/script напрямую. Обратитесь к next/script документации, чтобы узнать больше.

Использование Google Analytics с Next.js (через `next/script`)

Почему возникла эта ошибка

Возможные способы исправления

Использование @next/third-parties для добавления Google Analytics

Полезные ссылки