Vite + React

This guide covers Vite-based React apps. The same approach works for Vite + Vue or Vite + Svelte if you initialize the SDK in your equivalent root entry file.

1. Install the package

npm install @vektis-io/tracker

pnpm add @vektis-io/tracker

yarn add @vektis-io/tracker

2. Add your API key

Generate a key at Settings → API Keys in the VEKTIS dashboard, then create or update .env.local:

VITE_VEKTIS_KEY=vk_pub_prd_...

Use a publishable key (vk_pub_*) — it’s scoped to event ingest only and safe to ship in your browser bundle.

3. Initialize the SDK

Initialize once in src/main.tsx (or src/main.ts for non-React Vite apps), before your app renders:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import * as vektis from "@vektis-io/tracker";
import App from "./App";
import "./index.css";

vektis.init({ apiKey: import.meta.env.VITE_VEKTIS_KEY });

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

user_id is what produces the Seats number on a dev item’s Customer Breakdown — how many people at an account used the feature, out of everyone there VEKTIS has seen. Send a stable id from your own system, never an email address (hashed or otherwise); VEKTIS only ever counts distinct people within a feature, and never displays the identifier or any individual’s activity across features.

import * as vektis from "@vektis-io/tracker";

vektis.identify({
  customer_id: "acct_A1",
  user_id: "user_123",
  name: "Acme Corp",
});

The optional name is the account’s display name. It is what the Customer Breakdown shows instead of the raw customer_id — omit it and every row there is an opaque id.

Call this from wherever your app learns who the user is — a session-loaded hook, an auth provider callback, or directly after a successful login response.

5. Send an event

import * as vektis from "@vektis-io/tracker";

vektis.track("feature.used", { feature_id: "reports-dashboard" });

6. Verify the install

In the browser dev console:

vektis.getStatus();
// { state: "READY", queueLength: 0, identityCustomerId: "acct_A1", identityUserId: "user_123" }