Туториал о том, как добавить счётчик Google Analytics в приложение на Next.js. Это не требует установки сторонних библиотек.
Шаг 1
Добавьте в _app.tsx (или _app.jsx, если не используете TypeScript) два вызова компонента Script.
import React from "react"
import Head from "next/head"
import Script from "next/script"
function App() {
const counterId = 'G-1234567890'
return (
<>
<Script
strategy="lazyOnload"
src={`https://www.googletagmanager.com/gtag/js?id=${counterId}`}
/>
<Script strategy="lazyOnload">
{`
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '${counterId}', {
page_path: window.location.pathname,
});
`}
</Script>
<Head>
<title>Hello, World</title>
</Head>
</>
);
}
export default App;Шаг 2
Измените идентификатор счётчика в переменная counterId. Этот идентификатор можно получить при создании счётчика или в его настройках, он имеет формат G-XXXXXXXXXX.
Идентификатор гугл аналитики при желании можно вынести в переменные окружения, чтобы при изменении кода счётчика не нужно было пересобирать приложение.
