React Quick Start

Install @journium/react

The Journium React SDK gives you access to pre-built hooks and components to help you generate events in your React application and get insights from your data.

Run the following command to install the SDK:

npm i @journium/react

Set your Journium Publishable Key

1. Sign up for a Journium account for free at journium.app/signup

2. Create an application in your Journium dashboard

3. Copy your Publishable Key from the Developers | API Keys section

   Dashboard URLs automatically navigate to your app - just click!

4. Create a .env file in your project root:

   touch .env

5. Add your key to the .env file:

   Vite projectsReact/(CRA) projects

   VITE_JOURNIUM_PUBLISHABLE_KEY=your_publishable_key_here

   REACT_APP_JOURNIUM_PUBLISHABLE_KEY=your_publishable_key_here

6. Verify your setup - check that the key is correctly saved:

   cat .env
   # Should show: VITE_JOURNIUM_PUBLISHABLE_KEY=pk_test_...

   Development instances use pk_test_ keys. Production keys start with pk_live_.

Add <JourniumProvider> to your app

The <JourniumProvider> component provides session and user context to Journium's hooks. It's recommended to wrap your entire app at the entry point with <JourniumProvider> to make analytics globally accessible throughout your application.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { JourniumProvider } from '@journium/react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <JourniumProvider
      config={{
        publishableKey: import.meta.env.VITE_JOURNIUM_PUBLISHABLE_KEY!
      }}
    >
      <App />
    </JourniumProvider>
  </StrictMode>
);

import React from 'react';
import { JourniumProvider } from '@journium/react';
import App from './App';

function Root() {
  return (
    <JourniumProvider
      config={{
        publishableKey: process.env.REACT_APP_JOURNIUM_PUBLISHABLE_KEY!
      }}
    >
      <App />
    </JourniumProvider>
  );
}

export default Root;

Run the Development Server

Start your application:

npm run dev

Verify Your Setup

Open http://localhost:5173 (or your custom port) in your browser to see the application running.

Send Events to Journium

Navigate around your app to automatically send events to Journium.

Then view your collected events at Developers | Events.

Success indicator: You should see events appearing in your dashboard within a few seconds.

Generate Your First Insight

1. Go to your Developers | Insight Trackers page
2. Click the Analyze now button for the tracker titled "User Engagement"
3. Monitor the job status in Developers | Jobs
4. Wait for the job to complete (usually takes 1-2 minutes)
5. View your generated insights at Dashboard | Insights

Done

Congratulations! You've successfully created your first insight with Journium!