Next.js
Learn how to track your first visit & event using Next.js.
Pre-Requisites
Before proceeding, ensure you:
Have installed Next
Get started here
Get your project ID
Sign up on Litlyx Dashboard and create a new project.
1. Install
Choose your package manager & install the library.
2. Import
Now import litlyx in your entry-point
file. Normally in Next, you can add this in layout.tsx
.
import { Lit } from "litlyx-js"
use client
over the imports3. Initialize
Next, initialize Litlyx library with your project in your entry-point file as follow:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
Lit.init("your_project_id");
return (
<html lang="en" className="dark">
<body
className="antialiased overflow-x-hidden"
>
{children}
</body>
</html>
);
}
This line will already collect more than 10 KPIs for you such as Page Visits
, Referrers
, Countries
, Unique Sessions
and many more.
4. Collect Custom Events
To customize your experience, add the following line in each function you desire. There is no limit to the number of events.
Lit.event("your_event_name");
If you want to exercise more control over your events, you can use the metadata
field.
Lit.event("your_event_name", metadata: {
'type': 'MAIN_CTA',
'priority': 0.9
});
In your dashboard, you can group them in the Events
tab with the Event Metadata Analyzer
.