React Client

Integrate with your React application in minutes

Installation

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

npm install @userlog/react

Usage

Wrap your whole application with the UserLogProvider, and set your project and API key:

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

function App() {
  return (
    <UserLogProvider
      api_key={"<YOUR_API_KEY>"}
      project={"<YOUR_PROJECT_NAME>"}
    >
    {/* Your application code */}
    </UserLogProvider>
  );
}

Now you can use the UserLog client like this:

import { useUserLog } from '@userlog/react';

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

  // Set the user id once, right after a user logs in
  setUserId('user@example.com');

  // Track an event
  track({
    channel: "registrations",
    event: "New Registration",
    user_id: "user@example.com",  // This is optional, you can set it once with setUserId
    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>

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.