Integrations
Drop leatmap into your stack.
A 5 kB SDK on npm that installs in a couple of minutes. Any framework, first-party by default, consent enforced at the collector.
JavaScript
ES module, works in any bundler.
React
Initialize once in a client component.
Next.js
Client init, plus SSR page_key and proxy.
Your proxy
Route ingest through your own origin.
Install and initialize
Install the package, then initialize it once with the API key and site id from your workspace settings.
pnpm add @syntarie/tracking
# or: npm install @syntarie/trackingimport { init } from '@syntarie/tracking';
init({
apiKey: process.env.NEXT_PUBLIC_LEATMAP_API_KEY!,
siteId: process.env.NEXT_PUBLIC_LEATMAP_SITE_ID!,
host: 'https://collect.leatmap.com',
});import { track } from '@syntarie/tracking';
track('signup_completed', { plan: 'pro' });
track('checkout_completed', { value: 4900, currency: 'EUR' });React and Next.js
The SDK runs in the browser, so initialize it from a client component and mount it once in your root layout. For the SSR page_key helper, see the coverage tracking guide in the docs.
'use client';
import { useEffect } from 'react';
import { init } from '@syntarie/tracking';
export function Analytics() {
useEffect(() => {
init({
apiKey: process.env.NEXT_PUBLIC_LEATMAP_API_KEY!,
siteId: process.env.NEXT_PUBLIC_LEATMAP_SITE_ID!,
host: 'https://collect.leatmap.com',
});
}, []);
return null;
}Route it first-party
Point the SDK at a path on your own origin so adblockers and domain filters cannot silently drop events. Copy-paste proxy templates for Next.js, Cloudflare Workers, Caddy, and Nginx live in the docs.
init({
apiKey: process.env.NEXT_PUBLIC_LEATMAP_API_KEY!,
siteId: process.env.NEXT_PUBLIC_LEATMAP_SITE_ID!,
host: 'https://collect.leatmap.com',
// Route events through your own origin so adblockers can't drop them.
collectorPath: '/_lm',
});Stop measuring with crossed fingers.
Get a tracking plan you can trust, a collector that enforces it, and a dashboard you actually want to open.