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.
The SDK trims labels, automatically attaches the current query-free page path, batches sends to /api/ingest, can auto-report 400/500 fetch responses through that same durable endpoint, shows simple Important events, and bounds in-memory retries. Prefer the Developer platform tab for day-zero SDK install.
pnpm add @leetlytics/sdk
import { createLeetLyticsClient, installFetchBreakageTracking } from "@leetlytics/sdk";
export const leetlytics = createLeetLyticsClient({
workspaceKey: process.env.NEXT_PUBLIC_LEETLYTICS_WORKSPACE_KEY!,
endpoint: "https://leetlytics.com/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" },
});
// 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!,
endpoint: "https://leetlytics.com/api/ingest",
});
export function SignupStartedTracker() {
return <button onClick={() => leetlytics.trackJourneyStep({
journey: "signup",
step: "form_submitted",
status: "completed",
})}>Create account</button>;
}
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
}
});
Conversion revenue belongs on your backend. Mint a private key from dashboard Advanced / Conversions (full secret once; lists show prefix only). The 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://leetlytics.com/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()
})
});