Next.js Client

Integrate with your Next.js application in minutes

Installation

Using Next.js you can easily add UserLog to your project by installing the package from npm:

npm install @userlog/next

Implement with App Router

You need to import the UserLogProvider as a head element in your root layout component. Don't forget to set your API key and project name!

import { UserLogProvider } from '@userlog/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <UserLogProvider api_key='<YOUR_API_KEY>' project='<YOUR_PROJECT_NAME>' />
        {/* Your existing head elements */}
      </head>
      <body>
        {/* Your existing page */}
        <main>{children}</main>
      </body>
    </html>
  );
}

Implement with Page Router

You can set the user id in server components. This is useful when you have a server-rendered page and want to set the user id before the page is rendered.

import { UserLogProvider } from '@userlog/next';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <UserLogProvider api_key='<YOUR_API_KEY>' project='<YOUR_PROJECT_NAME>'>
      {/* Your existing app content */}
      <Component {...pageProps} />
    </UserLogProvider>
  );
}

Implement on Server-Side

Set the user id in server components:

import { SetUserIdServerComponent } from '@userlog/next';

export default function YourPage() {
  const userId: string | null = 'user@example.com';
  return (
    <>
      {/* Your existing page content */}
      <SetUserIdServerComponent userId={userId} />
    </>
  );
}

Usage on Client-Side

Now you can use the UserLog client like this:

"use client";
import { useUserLog } from '@userlog/next';

export function Component() {
  // Get the hooks
  const { setUserId, track } = useUserLog();

  // Set the user id when user logs in
  setUserId('user@example.com');

  // Track an event
  track({
    channel: "registrations",
    event: "New Registration",
    icon: "💰",
    notify: false,
    tags: {
      referrer: "example.com",
      utm_source: "google",
      utm_medium: "cpc",
    },
  });
}

You can also track events directly from HTML using data attributes:

<button
    data-event="New Registration"
    data-user-id="user@example.com"
    data-channel="registrations"
    data-icon="💰"
    data-tag-referrer="example.com"
    data-tag-utm_source="google"
    data-tag-utm_medium="cpc"
>
    Register now
</button>

Usage on Server-Side

You can set the user id in server components. This is useful when you have a server-rendered page and want to set the user id before the page is rendered.

import { UserLog } from '@userlog/next/server';

// Initialize with your API key and project name
const userLog = new UserLog({
  api_key: '<YOUR_API_KEY>',
  project: '<YOUR_PROJECT_NAME>',
});

// Use it in your server-side code
// Track an event
await userLog.track({
  channel: "registrations",
  event: "New Registration",
  user_id: "user@example.com",
  icon: "💰",
  notify: false,
  tags: {
    referrer: "example.com",
    utm_source: "google",
    utm_medium: "cpc",
  }
});

Tipps

Getting startet with UserLog API is simple. Just add user_id after a user loggs in, and start tracking your events! All logged events will link to the user who set off the event. This will help you understand user behavior. You can track events such as order made, item added to cart, new subscription created, or feedback submitted.