Туториал о том, как добавить счётчик Google Analytics в приложение на Next.js. Это не требует установки сторонних библиотек.
Исходный код работающего проекта можно посмотреть здесь: https://github.com/mishantrop/elenapisarenko/blob/main/pages/_document.tsx
С помощью классического тега script
Шаг 1
Создайте файл _document.tsx внутри каталога pages. Этот файл используется для изменения общей структуры страницы (теги html, head, body и пр).Откройте файл pages/_document.tsx и добавьте туда следующий код:
const googleAnalyticsId = 'G-1234567890'
return (
// ...
<script
src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${googleAnalyticsId}');
`,
}}
/>
// ...
)Я назвал файл этот файл _document.tsx, так как в своих проектах предпочитаю использовать TypeScript. Подробнее: https://nextjs.org/docs/advanced-features/custom-document
Шаг 2
Измените идентификатор счётчика в переменной googleAnalyticsId. Этот идентификатор можно получить при создании счётчика или в его настройках, он имеет формат G-XXXXXXXXXX.
Идентификатор гугл аналитики при желании можно вынести в переменные окружения, чтобы при изменении кода счётчика не нужно было пересобирать приложение.
С помощью компонента Script
Почему-то этот вариант у меня не сработал: код счётчика просто не появлялся на странице. С этой проблемой столкнулся не только я: github.com/vercel/next.js/issues/37957. Но я всё равно опишу этот способ.
Шаг 1
Добавьте в _app.tsx (или _app.jsx, если не используете TypeScript) два вызова компонента Script.
import React from "react"
import Head from "next/head"
import Script from "next/script"
function App() {
const googleAnalyticsId = 'G-1234567890'
return (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}
/>
<Script strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '${googleAnalyticsId}');
`}
</Script>
<Head>
<title>Hello, World</title>
</Head>
</>
);
}
export default App;Готово, можно проверять.
