how to implement analytics in next.js kawai
Unanswered
Berylline Hummingbird posted this in #help-forum
Berylline HummingbirdOP
Hello everyone, do you think it's good to make analytics, for example umami like this :
make a component like this :
import Script from "next/script";
export const UmamiAnalytics = () => {
const websiteId = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID;
if (!websiteId) {
return #Unknown Channel</>;
}
return <Script async src="https://umami.website.com/script.js" data-website-id={websiteId} />;
};
and add it in root layout :
export default async function RootLayout(props: { children: React.ReactNode; params: Promise<{ lang: Locale }> }) {
const params = await props.params;
return (
<html lang={params.lang}>
<body className={
<SlugProvider>{props.children}</SlugProvider>
</body>
<UmamiAnalytics />
</html>
);
}
what do you think ?
make a component like this :
import Script from "next/script";
export const UmamiAnalytics = () => {
const websiteId = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID;
if (!websiteId) {
return #Unknown Channel</>;
}
return <Script async src="https://umami.website.com/script.js" data-website-id={websiteId} />;
};
and add it in root layout :
export default async function RootLayout(props: { children: React.ReactNode; params: Promise<{ lang: Locale }> }) {
const params = await props.params;
return (
<html lang={params.lang}>
<body className={
${inter.className} bg-black text-white}><SlugProvider>{props.children}</SlugProvider>
</body>
<UmamiAnalytics />
</html>
);
}
what do you think ?
3 Replies
Berylline HummingbirdOP
❤️
Chub mackerel
yup that's a good pattern
Berylline HummingbirdOP
thanks ❤️