React

Setup

Start with adding dependency to your project: npm install @jitsu/jitsu-react. Then add <JitsuProvider/> component close to the root level of your app:

tip

In all examples below, replace your-jitsu-domain.com with your Jitsu installation domain.

Jitsu Cloud users may find domain in the top-right corner of Site's Setup Instruction page or attach custom domain for a specific Site and use it instead.

import React, {Component} from 'react'
import {JitsuProvider} from "@jitsu/jitsu-react";

function App() {
    return (
        <JitsuProvider options={{host: "https://your-jitsu-domain.com"}}>
            <ChildComponent/>
        </JitsuProvider>
    );
}

Options

Name	Description
host	Host Jitsu installation domain. Jitsu Cloud use instruction in UI to obtain domain.
writeKey	Browser Write Key configured on Jitsu Site entity. If no Browser Write Key is added for Site entity, Site ID value can be used a Write Key. On Jitsu.Cloud can be omitted if Site has explicitly mapped domain name.

Manual event tracking

Call useJitsu hook whenever you need manually trigger events object:

import { useJitsu } from "@jitsu/jitsu-react";

function ChildComponent() {
  const { analytics } = useJitsu();
  return <button onClick={() => analytics.track("click")}>Click Me!</button>;
}

analytics implements standard Analytics.js interface. See a full list of methods in JavaScript Reference section

Automatic page event tracking

Jitsu can automatically track page events when user navigates to a new page:

With react-router:

import {useJitsu} from "@jitsu/jitsu-react"
import {useLocation} from "react-router-dom"

function ChildComponent() {
    const {analytics} = useJitsu()
    const location = useLocation()
    useEffect(() => {
        analytics.page()
    }, [location])
    return <></>

}

With Next.js:

import {useJitsu} from "@jitsu/jitsu-react"
import {useRouter} from "next/router"

function ChildComponent() {
    const {analytics} = useJitsu()
    const router = useRouter()
    useEffect(() => {
        analytics.page()
    }, [router.asPath])
    return <></>
}