@jitsu/jitsu-react

jitsu-react

Install

npm install --save @jitsu/jitsu-react

Usage

To setup Jitsu-React library you need to add JitsuProvider component close to the root level of your app:

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

class Example extends Component {
  render() {
    return  <JitsuProvider options={{ host: "https://mysiteid.d.jitsu.com" }} >
              <App />
            </JitsuProvider>
  }
}

Then use useJitsu hook in components where you want to track events.

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

export default function App() {
  const { analytics } = useJitsu();
  // manually track page view
  analytics.page();
  
  return (
    <div>
     ...
    </div>
  );
}

Auto Page Tracking

For react-router:

To enable auto page tracking with react-router, pass useLocation hook from react-router-dom to autoPageTracking option:

import * as React from "react";
import { useLocation } from "react-router-dom";
import { useJitsu } from "@jitsu/jitsu-react";

export default function App() {
  useJitsu({
      // Enable auto page tracking with react-router
      autoPageTracking: {
          reactRouter: useLocation
      },
  });

  return (
    <div>
     ...
    </div>
  );
}

For Next.JS router:

To enable auto page tracking with Next.JS router, pass useRouter hook from next/router to autoPageTracking option:

import * as React from "react";
import { useRouter } from "next/router";
import { useJitsu } from "@jitsu/jitsu-react";

export default function App() {
  useJitsu({
      // Enable auto page tracking with Next.JS router
      autoPageTracking: {
          nextjsRouter: useRouter
      },
  });

  return (
    <div>
     ...
    </div>
  );
}

User 'identify' events

Please check ../../examples/react-app for a full example of how to automatically send identify event when user logins on your site.

Partial snippet:

export default function App() {
  const user = useUser();

  useJitsu({
    autoPageTracking: {
      reactRouter: useLocation,
      before: function (analytics) {
        if (user && user.id) {
          analytics.identify(user.id, { name: user.name, email: user.email });
        }
      },
      beforeDeps: [user],
    },
  });

  return (
    <div>
     ...
    </div>
  );
}