​
Overview

User tracking allows you to identify users in your application, personalize their experience, and track their progress through onboarding flows and feature usage. This powerful feature enables you to:

  • User identity: Maintain user identity across sessions for consistent experiences
  • Personalization: Create personalized content and flows based on user data
  • Flow tracking: Track completion of guided tours and onboarding steps
  • Event analytics: Record custom events for detailed usage analytics

This feature is only available for users on Pro and Growth plans. To upgrade, please visit the billing page in our dashboard.

​
Setup

Follow the steps below to quickly get started with user tracking:

1

Configure the PointerProvider with user data.

Pass user information to the PointerProvider or PointerFlowProvider when initializing:

import { PointerProvider } from 'pointer-sdk';

function App() {
  return (
    <PointerProvider 
      apiKey={process.env.POINTER_API_KEY!}
      userData={{
        userId: "user_123",           // Required
        name: "Jane Smith",           // Optional
        email: "jane@example.com",    // Optional
        avatarUrl: "/avatar.png",     // Optional
        customData: {                 // Optional
          plan: "premium",
          companyId: "company_456"
        }
      }}
    >
      {children}
    </PointerProvider>
  );
}

At minimum, you must provide a userId to identify the user. Additional fields are optional but recommended for better personalization.

2

Manage user data dynamically with the useUser hook.

For dynamic user management in your components, use the useUser hook:

import { useUser } from 'pointer-sdk';

function ProfilePage() {
  const { userData, setUserData, clearUserData } = useUser();
  
  // Display user information
  return (
    <div>
      <h1>Welcome, {userData?.name}</h1>
      <button onClick={() => clearUserData()}>Logout</button>
    </div>
  );
}

This hook provides reactive access to user data across your application.

​
Managing user data

Pointer provides multiple ways to manage user data depending on your application’s architecture.

The useUser hook provides a simple interface for components to interact with user data:

import { useUser } from 'pointer-sdk';
import { useEffect } from 'react';

function AuthenticatedApp() {
  const { userData, setUserData, clearUserData } = useUser();
  
  // Set user data after login
  useEffect(() => {
    if (authState.isAuthenticated) {
      setUserData({
        userId: authState.user.id,
        name: authState.user.name,
        email: authState.user.email
      });
    }
  }, [authState.isAuthenticated]);
  
  // Clear user data on logout
  const handleLogout = () => {
    clearUserData();
    // Additional logout logic
  };
  
  return (
    <div>
      {/* Your app content */}
    </div>
  );
}

​
User data persistence

User data is automatically persisted in the browser’s localStorage. This ensures that users remain identified across page refreshes and new sessions until explicitly logged out.

Be careful not to store sensitive information in the user’s customData field as it will be persisted to localStorage.

The SDK automatically manages the storage and retrieval of user data, so you don’t need to handle persistence yourself.

​
Next steps