Vercel

Serve the ProductLense script from your Vercel domain with vercel.json, and forward events through a Vercel Function on the Scale plan.

On Vercel, a rewrite in vercel.json serves the script from your domain for any framework. For a Next.js app, the Next.js guide keeps everything in next.config.js instead.

Serve the script

vercel.json

{
  "rewrites": [{ "source": "/js/a.js", "destination": "https://api.productlense.app/a.js" }]
}

HTML

<script defer data-site="SITE_ID" data-api="https://api.productlense.app" src="/js/a.js"></script>

Forward events (Scale plan)

Add a function and route /m/api/e to it. Store an API key with the events scope as the PL_API_KEY environment variable in the project settings.

api/productlense-events.ts

export const config = { runtime: 'edge' };

type Event = Record<string, unknown>;

export default async function handler(req: Request): Promise<Response> {
  if (req.method !== 'POST') return new Response(null, { status: 405 });
  const text = await req.text();
  if (text.length > 8192) return new Response(null, { status: 413 });
  let body: { b?: Event[] } & Event;
  try {
    body = JSON.parse(text);
  } catch {
    return new Response(null, { status: 400 });
  }
  // Vercel puts the visitor's address first in x-forwarded-for.
  const ip = req.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ?? '';
  const extra = { ip, ua: req.headers.get('user-agent') ?? '' };
  const out = body.b ? { ...body, b: body.b.map((e) => ({ ...e, ...extra })) } : { ...body, ...extra };
  const r = await fetch('https://api.productlense.app/api/v1/events', {
    method: 'POST',
    headers: { Authorization: `Bearer ${process.env.PL_API_KEY}`, 'Content-Type': 'application/json' },
    body: JSON.stringify(out),
  });
  return new Response(null, { status: r.status });
}

vercel.json

{
  "rewrites": [
    { "source": "/js/a.js", "destination": "https://api.productlense.app/a.js" },
    { "source": "/m/api/e", "destination": "/api/productlense-events" }
  ]
}

Then set data-api="https://example.com/m" on the tag.

Check it works

Open https://example.com/js/a.js: it returns JavaScript.
Load a page with the developer tools open. The Network tab shows a.js from your domain and a POST to api/e with status 204.
Open the Live page in the ProductLense dashboard. Your visit appears within a few seconds.

Serve the script#

Forward events (Scale plan)#

Check it works#

Serve the script

Forward events (Scale plan)

Check it works