Easy analytics · paste, refresh, done

Paste one line. Refresh. See your first page view.

The easy button for install: add LeetLytics, refresh your site once, and confirm traffic in the dashboard. No funnel mapping and no analytics-operator tax. First success is simply your first page view.

Safe by default: the public workspace key is fine in the browser. Keep conversion keys on your server only.

Layer 1 · Get the light on

Install the NPM SDK

Developer

Power-user path: install the SDK, create a client with your public workspace key, and send a simple trackEvent. Journeys, fetch-breakage tracking, and server conversions live under Layer 3.

pnpm add @leetlytics/sdk

import { createLeetLyticsClient } from "@leetlytics/sdk";

export const leetlytics = createLeetLyticsClient({
  workspaceKey: process.env.NEXT_PUBLIC_LEETLYTICS_WORKSPACE_KEY!,
  endpoint: "https://leet.fyi/api/ingest",
});

// Default page views fire when you use the browser snippet.
// Or track one important action after the first page view lands:
await leetlytics.trackEvent({ name: "signup_click" });

The public workspace key is browser-safe. Keep conversion API keys on your server only.

Layer 2 · Optional

Track one important click

Secondary

After the first page view lands, instrument a single high-value action such as signup, pricing CTA, or add-to-cart. Prefer data-leetlytics-event on buttons or a one-line trackEvent / window.leetlytics.trackEvent call. No ordered funnel design required.

<!-- Markup attribute (Website / WordPress) -->
<button data-leetlytics-event="signup_click">Start free trial</button>

// Browser API after the snippet loads
window.leetlytics.trackEvent({ name: "signup_click" });

// SDK
await leetlytics.trackEvent({ name: "signup_click" });

Layer 3 · Advanced

Journeys, frameworks, and conversions

Advanced

Open this only after day zero is live. NPM SDK deep usage, Next.js patterns, ordered journeys, fetch breakage tracking, and private conversion attribution live here—not on the cold Website path.

Product apps

Journeys, breakage tracking, and attribution

SDK

After the first page view, use trackJourneyStep for ordered funnels and installFetchBreakageTracking for 400/500 fetch signals. Both batch to /api/ingest with the same public workspace key.

pnpm add @leetlytics/sdk

import { createLeetLyticsClient, installFetchBreakageTracking } from "@leetlytics/sdk";

export const leetlytics = createLeetLyticsClient({
  workspaceKey: process.env.NEXT_PUBLIC_LEETLYTICS_WORKSPACE_KEY!,
  endpoint: "https://leet.fyi/api/ingest",
  maxQueuedEvents: 100,
});

if (typeof window !== "undefined") {
  installFetchBreakageTracking(leetlytics);
}

await leetlytics.trackEvent({
  name: "signup_click",
  attribution: { utmSource: "newsletter", utmCampaign: "alpha-launch" },
});

await leetlytics.trackJourneyStep({
  journey: "signup",
  step: "account_created",
  status: "completed",
  attribution: { utmSource: "newsletter", utmCampaign: "alpha-launch" },
});

Framework example

Next.js example

React

// app/signup/page.tsx or a small client component
"use client";

import { createLeetLyticsClient } from "@leetlytics/sdk";

const leetlytics = createLeetLyticsClient({
  workspaceKey: process.env.NEXT_PUBLIC_LEETLYTICS_WORKSPACE_KEY!,
});

export function SignupStartedTracker() {
  return <button onClick={() => leetlytics.trackJourneyStep({
    journey: "signup",
    step: "form_submitted",
    status: "completed",
  })}>Create account</button>;
}

No-code advanced

GTM / Webflow journey steps

After live

Day-zero for GTM/Webflow is still the Website snippet (paste into Custom HTML). Use journey steps only once the first page view is confirmed.

// Advanced only — after first page view is live
// Fire from a GTM Custom HTML tag or Webflow embed on form submit:

window.leetlytics.trackJourneyStep({
  journey: "signup",
  step: "form_submitted",
  status: "completed",
  attribution: {
    source: "landing-page",
    utmSource: new URLSearchParams(location.search).get("utm_source") || undefined,
    utmCampaign: new URLSearchParams(location.search).get("utm_campaign") || undefined
  }
});

Server revenue

Server-side conversion attribution

Private key

Conversion revenue belongs on your backend. The customer API key is hashed in LeetLytics and must only be used server-side. Never expose the conversion API key in browser code.

// Authorization: Bearer ***
await fetch("https://leet.fyi/api/conversions", {
  method: "POST",
  headers: {
    "content-type": "application/json",
    "Authorization": "Bearer " + process.env.LEETLYTICS_CONVERSION_API_KEY!
  },
  body: JSON.stringify({
    workspaceKey: process.env.LEETLYTICS_WORKSPACE_KEY,
    conversionId: checkout.session.id,
    amountCents: 120000,
    currency: "USD",
    journey: "checkout",
    anonymousId: customer.anonymousId,
    occurredAt: new Date().toISOString()
  })
});

Layer 1 · Get the light on

Copy-paste browser snippet

Website

Loading install path…

You're done installing when…

Refresh your site once. Open the dashboard for the first page view.

Success is visceral and simple: within a minute the dashboard First insight card shows a page view—no funnel mapping required. If it is empty, refresh the site, wait briefly, then hard-refresh the dashboard.

After the first page view is live, track one important click (Layer 2). Full journeys stay optional.