Quickstart

Pick your stack, copy the snippet. Two minutes, tops.

Grab a publishable key (vk_pub_*) at Settings → API Keys — you’ll paste it into the snippets below.

Install

npm install @vektis-io/tracker

Initialize once at your app entry — vektis is then importable anywhere:

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

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

Call identify({ customer_id, user_id }) once you know who the user is — wherever your auth state resolves.

npm install @vektis-io/tracker

Create a client Providers component that initializes once:

"use client";
import { useEffect } from "react";
import * as vektis from "@vektis-io/tracker";

export function Providers({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    vektis.init({ apiKey: process.env.NEXT_PUBLIC_VEKTIS_KEY! });
  }, []);
  return <>{children}</>;
}

Wrap your root layout with it (layout stays a server component):

import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body><Providers>{children}</Providers></body>
    </html>
  );
}

Call identify({ customer_id, user_id }) once your auth provider resolves the user.

npm install @vektis-io/tracker

Initialize once in your app entry:

import { createApp } from "vue";
import * as vektis from "@vektis-io/tracker";
import App from "./App.vue";

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

createApp(App).mount("#app");

Call identify({ customer_id, user_id }) once your auth state resolves.

No install. Drop one tag in your <head>:

<script
  src="https://unpkg.com/@vektis-io/tracker/dist/vektis-tracker.iife.js"
  data-vektis-key="vk_pub_prd_..."
  data-vektis-customer-id="acct_A1"
  data-vektis-user-id="user_123"
  async
></script>

The SDK reads its own data-vektis-* attributes and calls init() + identify() for you. The global vektis is ready as soon as the script runs.

Paste this prompt into Claude Code, Cursor, Copilot Chat, or your AI of choice from your project root. It will detect your stack, install the package, wire up init(), and add a sample track() call.

Install the @vektis-io/tracker SDK in this project. Reference: https://docs.vektis.io/getting-started/00-quickstart/

1. Detect the framework (look at package.json, file structure, and config files).
2. Install the package:
   - npm: `npm install @vektis-io/tracker`
   - pnpm: `pnpm add @vektis-io/tracker`
   - yarn: `yarn add @vektis-io/tracker`
   - HTML-only (no package.json): skip — use the script-tag pattern instead.
3. Add the env var to the project's env file using the framework's public-env naming:
   - Next.js: `NEXT_PUBLIC_VEKTIS_KEY` in `.env.local`
   - Vite (React/Vue/Svelte): `VITE_VEKTIS_KEY` in `.env`
   - Nuxt: `NUXT_PUBLIC_VEKTIS_KEY` in `.env` and expose via runtimeConfig
   - CRA: `REACT_APP_VEKTIS_KEY` in `.env`
   Leave the value as `vk_pub_prd_REPLACE_ME` and tell me to paste my real publishable key from https://app.vektis.io/settings/api-keys.
4. Initialize the SDK using the idiomatic pattern for the detected framework:
   - **Next.js App Router**: create `app/providers.tsx` as a `"use client"` component that calls `vektis.init()` in `useEffect`, and wrap `{children}` with `<Providers>` in `app/layout.tsx`. Do NOT make the root layout itself a client component.
   - **Next.js Pages Router**: call `vektis.init()` in a `useEffect` in `pages/_app.tsx`.
   - **Vite + React**: call `vektis.init()` once in `src/main.tsx` before `ReactDOM.createRoot(...).render(...)`.
   - **Vue / Nuxt**: call `vektis.init()` in `src/main.ts` (Vue) or a Nuxt plugin (`plugins/vektis.client.ts`).
   - **SvelteKit**: call `vektis.init()` in `src/routes/+layout.svelte` inside `onMount`.
   - **Plain HTML (no bundler)**: add the script tag with `data-vektis-key`, `data-vektis-customer-id`, and `data-vektis-user-id` attributes to `<head>`. Do NOT also npm-install the package.
5. Add a sample `vektis.track("feature.used", { feature_id: "...", action: "..." })` call on a real button or form submit in the app so I can verify events flow. Pick a stable, hyphen-separated `feature_id` based on what the button does.
6. Add a TODO comment near the init call reminding me to call `vektis.identify({ customer_id, user_id })` once my auth provider resolves the user — this is required before any `track()` call will send.
7. Print a one-line summary of what changed and what I need to do next (paste the real key, call `identify()` after auth).

Track an event

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

<button
  onClick={() =>
    vektis.track("feature.used", {
      feature_id: "checkout-button",
      action: "clicked",
    })
  }
>
  Checkout
</button>

Track from any client component:

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

export function CheckoutButton() {
  return (
    <button
      onClick={() =>
        vektis.track("feature.used", {
          feature_id: "checkout-button",
          action: "clicked",
        })
      }
    >
      Checkout
    </button>
  );
}

<script setup>
import * as vektis from "@vektis-io/tracker";

function checkout() {
  vektis.track("feature.used", {
    feature_id: "checkout-button",
    action: "clicked",
  });
}
</script>

<template>
  <button @click="checkout">Checkout</button>
</template>

<button
  onclick="vektis.track('feature.used', {
    feature_id: 'checkout-button',
    action: 'clicked'
  })"
>
  Checkout
</button>

Your assistant added a sample vektis.track() call as part of the install. Trigger it in your app and check Events in your VEKTIS dashboard to confirm it arrived.

To add more calls, ask: “Add a vektis.track('feature.used', { feature_id, action }) call to [component/handler]. Pick a stable feature_id.”

Done. Events are flowing.

What’s next

More frameworks — Vite, Nuxt, SvelteKit, CRA, vanilla CDN: tracker integrations
Reset on logout — clear identity when users sign out: reset guide
CSP — allowlist the events endpoint: CSP guide
Not seeing events? — troubleshooting