Install
The npm package, in the framework you are already using.
npm i @vibiz/analyticsYour org id looks like org_…, and it is the only value you need. Copy it from
Intelligence rather than looking it up: a workspace also has a uuid of its own,
and passing that instead is accepted and then matches nothing, which reads back
as a site with no visitors. There
is no key to generate: anything that ships in the page source of every tracked
site is an identifier rather than a secret, exactly like a Meta pixel id, so a
separate one would have been a second public value doing the same job.
API name
Use init({ orgId }). Older 0.2.0 builds called the same value
workspaceId; current releases (0.4.1+) use orgId only.
What binds traffic to your workspace is the list of domains you allow, not the id. Until your domain is on that list nothing sent from a browser is kept, so add it as soon as you have pasted the tag. You do not have to guess which to add: load a page and Intelligence names the domain it is hearing from, with a button to allow it.
Create a client component
init needs a real window, so it runs in an effect rather than during
render.
'use client';
import { useEffect } from 'react';
import { init } from '@vibiz/analytics';
export function Analytics() {
useEffect(() => {
init({ orgId: process.env.NEXT_PUBLIC_VIBIZ_ID as string });
}, []);
return null;
}Mount it once in the root layout
import { Analytics } from '@/components/analytics';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Analytics />
</body>
</html>
);
}NEXT_PUBLIC_VIBIZ_ID=org_xxxTrack a conversion
Route changes need no handling: they are captured for you.
'use client';
import { track } from '@vibiz/analytics';
// after the server confirms the payment, not on submit
track('purchase', { value: 49.9, currency: 'EUR', order_id: order.id });Options
Prop
Type
One implementation, two entry points
The server entry point captures nothing of its own: it sends events you already know about, over the same wire format the browser uses. Two capture implementations would drift, and the drift would show up as two behaviours under one name.