Next.js - Litlyx Docs

Pre-Requisites

Before proceeding, ensure you:

Have installed Next

Get started here

Get your workspace ID

1. Install

Choose your package manager & install the library.

npm install litlyx-js

yarn add litlyx-js

pnpm add litlyx-js

bun install litlyx-js

2. Import

Now import litlyx in your entry-point file. Normally in Next, you can add this in layout.tsx.

javascript

import { Lit } from "litlyx-js"

Don’t forget to add use client over the imports

3. Initialize

Next, initialize Litlyx library with your workspace in your entry-point file as follow:

javascript

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  Lit.init("workspace_id");
  return (
    <html lang="en" className="dark">
      <body
        className="antialiased overflow-x-hidden"
      >
        {children}
      </body>
    </html>
  );
}

This line of code will immediately start collecting web analytics such as: Page Visits, Real-Time Users, Referrers, Bounce Rate, Countries, Unique Visitor Sessions, OS & Devices.

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.

javascript

Lit.event("your_event_name");

If you want to exercise more control over your events, you can use the metadata field.

javascript

Lit.event("your_event_name", metadata: { 
  'type': 'MAIN_CTA', 
  'priority': 0.9
});

In practice, let’s try to trigger an event:

javascript

<div onClick={() => Lit.event("click-button")}>
  button name
</div>

In your dashboard, you can group them in the Events tab with the Event Metadata Analyzer.

​Pre-Requisites

​1. Install

​2. Import

​3. Initialize

​4. Collect Custom Events

Pre-Requisites

1. Install

2. Import

3. Initialize

4. Collect Custom Events