Решили добавить Google Analytics на страницы блога для базового отслеживания переходов по страницам.
Если коротко, то есть очень много способов сделать это, в этой статье мы остановимся на двух из них:
- Старый способ, который мы использовали раньше;
- Новый способ, появившийся не так давно;
Старый способ
Ранее мы добавляли аналитику от гугла следующим образом:
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>
)
}Теперь всё должно работать.
На этом всё! 🎉
