Astro

In Astro, add the script to the base layout that every page uses. Mark it is:inline so Astro leaves the tag exactly as written instead of bundling it. Sites that use Astro's client router (view transitions) are recorded through the history API.

Add the script#

Replace SITE_ID with the id from Settings → Sites in the ProductLense dashboard.

---
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <script is:inline>window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}</script>
    <script is:inline defer data-site="SITE_ID" src="https://api.productlense.app/a.js"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

With the client router, the script loads once and stays loaded across navigations, recording one pageview per route change. No data-astro-rerun attribute is needed.

Identify users#

On pages rendered with a signed-in user (server output or hybrid rendering), pass the user id to a small component:

---
const { userId } = Astro.props;
---
<script is:inline define:vars={{ userId }}>
  if (userId) window.productlense('identify', String(userId));
</script>

<ProductLenseIdentify userId={Astro.locals.user?.id} />

The queue stub in the layout makes window.productlense callable before the deferred script has loaded. Use the same id you store on the customer in your billing provider; see how payments are attributed.

Custom events#

<script>
  document.querySelector('#upgrade')?.addEventListener('click', () => {
    window.productlense('event', 'Upgrade clicked', { plan: 'growth' });
  });
</script>

See custom events for naming rules.

Verify your installation#

1. Build and deploy, then open your site in a normal browser window.
2. Open the Live page in the ProductLense dashboard. Your visit appears within a few seconds.
3. In the browser's developer tools, the Network tab shows a POST to https://api.productlense.app/api/e with status 204.

astro dev runs on localhost, where nothing is sent unless you add data-dev="true" to the tag. Ad blockers in your own browser may block the request. If the visit does not appear, follow Verify your installation.