React, Vue (Client)
Install the browser SDK in a React, Vue, or other bundled app.
For client apps with a build step (React, Vue, Svelte, plain bundlers), install the SDK from npm and initialise it once at startup. This is the same browser SDK as the script snippet, just imported as a module.
Install
npm install trodoInitialise
import Trodo from 'trodo';
await Trodo.init({
siteId: 'YOUR_SITE_ID',
autoEvents: true,
disabledPaths: ['/admin'],
disabledEvents: ['js_error'],
});
Trodo.track('signup_completed', { plan: 'pro' });
Trodo.identify('user_123');
Trodo.people.set({ plan: 'pro' });| Option | Description |
|---|---|
siteId | Required. Your site identifier. |
autoEvents | true to auto-capture page views, clicks, forms, and more. |
disabledPaths | Array of paths to exclude, e.g. ['/admin']. Prefix match. |
disabledEvents | Array of auto-event names to disable. See Auto-capture. |
All runtime config (Trodo.disableAutoEvent, Trodo.setTrackingConsent, and the rest) works the same way once init resolves.
React
Init once, and identify when your user loads:
// lib/trodo.js
import Trodo from 'trodo';
let started = false;
export async function initTrodo() {
if (started) return;
await Trodo.init({ siteId: process.env.REACT_APP_TRODO_SITE_ID, autoEvents: true });
started = true;
}
// App.jsx
import { useEffect } from 'react';
import Trodo from 'trodo';
import { initTrodo } from './lib/trodo';
function App({ user }) {
useEffect(() => { initTrodo(); }, []);
useEffect(() => {
if (user) {
Trodo.identify(user.id);
Trodo.people.set({ email: user.email, plan: user.plan });
}
}, [user]);
return <YourApp />;
}For Next.js, guard init with if (typeof window === 'undefined') return; and call it from a 'use client' component. For Vue, register a plugin that awaits Trodo.init in install().