Skip to main content

​
Quickstart

Human Behavior works seamlessly to record sessions on your Remix app.

​
Step 1: Installation

npm install humanbehavior-js
# or
yarn add humanbehavior-js

​
Step 2: Basic Setup

​
Add the Tracker to Your App

Use the Remix-specific setup for the best integration and automatic tracking: Step 1: Create a loader in your app/root.tsx: 
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react";
import { HumanBehaviorProvider} from 'humanbehavior-js';
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";

// Add loader
export const loader = async ({ request }: LoaderFunctionArgs) => {
  return {
    ENV: {
      HUMANBEHAVIOR_API_KEY: process.env.HUMANBEHAVIOR_API_KEY,
    },
  };
};

export function Layout({ children }: { children: React.ReactNode }) {
  ...
}

export default function App() {
  const data = useLoaderData<typeof loader>();
  
  return (
    <HumanBehaviorProvider apiKey={data.ENV.HUMANBEHAVIOR_API_KEY}>
      <Outlet />
    </HumanBehaviorProvider>
  );
}
That’s it! The SDK now automatically tracks user interactions, navigation, and console events. Everything past here is optional.

​
Optional: Advanced Features

​
Track Custom Events

import { useHumanBehavior } from 'humanbehavior-js/react';

export default function MyComponent() {
  const tracker = useHumanBehavior();

  const handleButtonClick = async () => {
    // Track custom event
    await tracker.customEvent('button_clicked', {
      buttonLocation: 'header'
    });
  };

  const handleLogin = async (user) => {
    // Identify user after successful authentication
    await tracker.identifyUser({
      userProperties: {
        email: user.email,
        name: user.name,
        userId: user.id
      }
    });
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Click Me</button>
    </div>
  );
}

​
Environment Variables

# .env
HUMANBEHAVIOR_API_KEY=your-api-key-here

// In your code
const tracker = HumanBehaviorTracker.init(process.env.HUMANBEHAVIOR_API_KEY);

​
Troubleshooting

  • Check browser console for any error messages
  • Verify your API key is correct
  • Ensure the tracker is initialized before any user interaction