Next.js is a popular React framework for building web applications. One of its core features is Server Side Rendering (SSR). However, in some cases, SSR can create duplicated traffic data from your website on Abtz Analytics.
Preventing duplicated traffic data
Although the Abtz Analytics tracking script already implements a technique to prevent server-side rendered pages from calling the tracking API while not loaded on the client-side, the following Next.js/React component will make it work even smoother! 🤗
The component
Create a new component called abtztracker.tsx at your preferred component location. In this brand new component, paste the code below and save.
// abtztracker.tsx
'use client'
import { useEffect } from 'react';
interface AbtzProps {
token?: string;
}
const Abtz: React.FC<AbtzProps> = ({ token }) => {
useEffect(() => {
if (typeof window !== 'undefined') {
const script: any = document.createElement('script');
script.src = 'https://analytics.abtz.co/cs.js';
script.async = true;
if (token) {
script.setAttribute('data-token', token);
}
document.head.appendChild(script);
}
}, []);
return <div></div>;
};
export default Abtz;Next, import the newly created component into the layout.tsx or any other file that fits better. The file you're gonna import Abtz into depends on how your project is organized.
E.g. 👇
// layout.tsx
import Abtz from './path/to/components/Abtz';
// ...
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<Abtz token="..." />
</body>
</html>
)
}☝ Passing the token is optional in production, when calling Abtz Analytics from the same domain registered to your project. But, it will help you see if it's working while in development.
Your token can be retrieved in the settings page.
Done! 👏