@jitsu/nextjs

Official Jitsu SDK for NextJS

Questions?

Join Jitsu Slack

Links

• Official SDK Docs

General

This package is a wrapper around @jitsu/sdk-js, with added functionality related to NextJS.

Installation

With NextJS there're several ways on how to add Jitsu tracking

Client Side Tracking

First, create or update your _app.js following this code

import { createClient, JitsuProvider } from "@jitsu/nextjs";

// 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
function MyApp({Component, pageProps}) {
  return <JitsuProvider client={jitsuClient}>
    <Component {...pageProps} />
  </JitsuProvider>
}

export default MyApp

See parameters list for createClient() call.

After jitsu client and provider are configured you will be able to use useJitsu hook in your components

import { useJitsu } from "@jitsu/nextjs";

const Main = () => {
  const {id, trackPageView, track} = useJitsu(); // import methods from useJitsu hook

  useEffect(() => {
    id({id: '__USER_ID__', email: '__USER_EMAIL__'}); // identify current user for all events
    trackPageView() // send pageview event
  }, [])

  const onClick = (btnName) => {
    track('btn_click', {btn: btnName}); // send btn_click event with button name payload on click
  }

  return (
    <button onClick="() => onClick('test_btn')">Test button</button>
  )
}

Please note, that useJitsu uses useEffect() with related side effects.

To enable automatic pageview tracking, add usePageView() hook to your _app.js. This hook will send pageview each time user loads a new page. This hook relies on NextJS Router

import { createClient, JitsuProvider } from "@jitsu/nextjs";

// initialize Jitsu client
const jitsuClient = createClient({
  tracking_host: "__JITSU_HOST__",
  key: "__API_KET__",
  // See Jitsu SDK parameters section for more options
});

function MyApp({Component, pageProps}) {
  usePageView(jitsuClient); // this hook will send pageview track event on router change

  // wrap our app with Jitsu provider
  return <JitsuProvider client={jitsuClient}>
    <Component {...pageProps} />
  </JitsuProvider>
}

export default MyApp

If you need to pre-configure jitsu event - for example, identify a user, it's possible to do via before callback:

usePageView(jitsuClient, {before: (jitsu) => jitsu.id({id: '__USER_ID__', email: '__USER_EMAIL__'})})

Server Side Tracking

Jitsu can track events on server-side:

• Pros: this method is 100% reliable and ad-block resistant
• Cons: static rendering will not be possible; next export will not work; fewer data points will be collected - attributes such as screen-size, device

Manual tracking

For manual tracking you need to initialize Jitsu client

import { createClient } from "@jitsu/nextjs";

// initialize Jitsu client
const jitsuClient = createClient({
  tracking_host: "__JITSU_HOST__",
  key: "__API_KET__",
  // See Jitsu SDK parameters section for more options
});

after that, you will be able to user Jitsu client, for example, in getServerSideProps

export async function getServerSideProps() {
  jitsu.track("page_view", {page: req.page})

  return { props: {} }
}

Automated page view tracking

Jitsu could track page views automatically via use of _middleware.js which has been introduced in NextJS 12

export function middleware(req, ev) {
  const {page} = req
  if ( !page?.name ) {
    return;
  }
  jitsu.track("page_view", {page: req.page})
}

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.