**Track everything. Decide what matters later.**
npm install userlens-analytics-sdkTrack everything. Decide what matters later.
The Userlens SDK automatically captures every user interaction in your web app. Define events later in the Userlens platform—no code changes required.
| Traditional Analytics | Userlens |
|-----------------------|----------|
| Add track() calls for each event | Install once, capture everything |
| Deploy code to track new events | Create events in the UI instantly |
| Forgot to track something? Start over | Backfill historical data automatically |
``bash`
npm install userlens-analytics-sdk
`tsx
import UserlensProvider from 'userlens-analytics-sdk/react';
function App() {
const config = useMemo(() => ({
userId: currentUser.id,
userTraits: { email: currentUser.email, plan: currentUser.plan },
WRITE_CODE: 'your-write-code', // From app.userlens.io/settings
}), [currentUser.id]);
return (
);
}
`
That's it. Every click and page view is now captured.
| Guide | Description |
|-------|-------------|
| Introduction | Overview and how it works |
| React Setup | Complete React integration guide |
| Next.js Setup | Next.js with SSR considerations |
| Custom Events | Track specific actions manually |
| API Reference | HTTP API documentation |
| Troubleshooting | Common issues and solutions |
For production apps, we recommend the proxy setup (keeps your API key secure, avoids ad blockers):
| Backend | Guide |
|---------|-------|
| Node.js/Express | Setup Guide |
| Python (Flask/Django) | Setup Guide |
| Ruby on Rails | Setup Guide |
Events go directly to Userlens API.
`tsx`
userId: user.id,
userTraits: {
email: user.email,
name: user.name,
plan: user.plan,
// Add as many traits as possible for better insights
},
}}>
Events flow through your backend → Userlens API. Useful if you want to avoid ad blockers.
`tsx`
userTraits: {
email: user.email,
name: user.name,
plan: user.plan,
},
eventCollector: {
callback: (events) => {
fetch('/api/userlens/events', {
method: 'POST',
body: JSON.stringify(events),
});
},
},
}}>
`tsx
import { useUserlens } from 'userlens-analytics-sdk/react';
function UpgradeButton() {
const { collector } = useUserlens();
const handleUpgrade = () => {
collector?.pushEvent({
event: 'Plan Upgraded',
properties: { plan: 'pro' },
});
};
return ;
}
``
- React: 16.8+ (hooks support)
- Browser: Chrome, Firefox, Safari, Edge (modern versions)
ISC