This is a Jitsu.Classic documentation. For the lastest version, please visit docs.jitsu.com. Read about differences here.

šŸ“œ Configuration

Configuration UI

šŸ‘©ā€šŸ”¬ Extending Jitsu

Overview
Destination Extensions
Source Extensions
API Specs

Jitsu Internals

Jitsu Server

NextJS Guide

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

import { createClient, middlewareEnv } from "@jitsu/nextjs";
import { NextResponse } from "next/server";

const jitsu = createClient({
  tracking_host: "__JITSU_HOST__",
  key: "__API_KET__"
})

export function middleware(req, ev) {
  let res = NextResponse.next()
  if (!req?.page?.name) {
    return;
  }
  jitsu.track("pageview", { env: middlewareEnv(req, res) })
  return res
}

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.