Add Togo to a React app (Vite)

This page installs Togo by hand. To have your coding agent do it instead, see Install Togo with your AI agent. Using Next.js? See Next.js.

Install the SDK

npm install @togohq/sdk-browser

Put the write key in an environment variable: the test key (togo_pkt_…) in .env.local, the live key (togo_pkl_…) in your production build. Write keys are public, so the VITE_ prefix, which ships the value in the bundle, is correct.

# .env.local
VITE_TOGO_WRITE_KEY=togo_pkt_your_test_key

Create one client, at start-up

// src/analytics.ts
import { init } from '@togohq/sdk-browser';

export const analytics = init({ writeKey: import.meta.env.VITE_TOGO_WRITE_KEY });

Import it from your entry point (src/main.tsx) so it runs before anything else. The first event carries the referrer and the campaign parameters, which are gone once the visitor navigates. init() returns at once and never throws.

Record page views

With React Router, send a page view whenever the location changes:

// src/page-views.tsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { analytics } from './analytics';

export function PageViews() {
  const { pathname } = useLocation();
  useEffect(() => {
    analytics.track('page_viewed');
  }, [pathname]);
  return null;
}

Render <PageViews /> once inside your router. Every event already carries the URL, path, referrer and campaign, so page_viewed needs no properties.

Track, identify and reset

analytics.track('project_created', { template: 'blank' });
analytics.identify(user.id); // after sign-in
analytics.reset(); // on sign-out

Use event names you already have, or lowercase snake_case for new ones. Never put an email address or user-typed text in a property (What never goes in an event).

Check it works

Run npm run dev, click around, and confirm the events arrived: Check that events arrive.