React Guide
Installation#
To use Jitsu SDK, install npm package
npm install @jitsu/react
Import and configure Jitsu SDK Provider
//...
import { createClient, JitsuProvider } from "@jitsu/react";
// initialize Jitsu client
const jitsuClient = createClient({
tracking_host: "__JITSU_HOST__",
key: "__API_KET__",
// See Jitsu SDK parameters section for more options
});
// wrap our app with Jitsu provider
ReactDOM.render(
<React.StrictMode>
<JitsuProvider client={jitsuClient}>
<App />
</JitsuProvider>
</React.StrictMode>,
document.getElementById('root')
);See parameters list for createClient() call.
Usage#
import { useJitsu } from "@jitsu/react";
const App = () => {
const {id, track, trackPageView} = useJitsu(); // import methods from useJitsu hook
useEffect(() => {
id({id: '__USER_ID__', email: '__USER_EMAIL__'}); // identify current user for all track events
trackPageView() // send page_view event
}, [])
const onClick = (btnName: string) => {
track('btn_click', {btn: btnName}); // send btn_click event with button name payload on click
}
return (
<button onClick="() => onClick('test_btn')">Test button</button>
)
}
To enable automatic pageview tracking, add usePageView() hook. This hook will send pageview each time
user loads a new page (including internal SPA pages). This hook relies on React Router and
requires react-router (>=5.x) package to be present
const App = () => {
usePageView() //this hook will send pageview track event on router change
return (
<Routes>
<Route path="/" element={<Main />} />
<Route path="page" element={<Page />} />
</Routes>
);
}
If you need to pre-configure jitsu event - for example, identify a user, it's possible to do via before callback:
usePageView({before: (jitsu) => jitsu.id({id: '__USER_ID__', email: '__USER_EMAIL__'})})Hooks#
useJitsu#
Returns object with id, trackEvent, trackPageView, rawTrack, set, unset and interceptAnalytics methods of Jitsu SDK.
usePageView#
Can be used only with react-router. Sends pageview event on every route change.
Jitsu SDK parameters and methods#
Read about all SDK parameters and methods in our documentation:
- Parameters - parameters reference for
createClient()call - Methods - all these methods can be called on a return value of
useJitsu()
Example app#
You can find example app here.