Sign in to fill them in

Astro

A component in the head that emits the script, not an island.

Install the package

Terminal
npm i @firstrun/analytics

Add the component

src/layouts/Layout.astro
---
import Analytics from "@firstrun/analytics/astro";
---

<html lang="en">
  <head>
    <Analytics sourceKey="fr_xxxxxxxxxxxxxxxx" host="https://app.firstrun.app" />
  </head>
  <body><slot /></body>
</html>

A default import: the component has no named export. It emits the script tag rather than importing a module, so a site that ships no client JavaScript still ships none of ours beyond the tag itself.

Send your own events

Nothing is stored and nothing is sent until consent is granted.

JavaScript
fr("consent", true);
fr("event", "download_clicked", { platform: "windows" });
fr("error", err);
fr("log", { name: "checkout_stalled", severity: 13, attributes: { step: 3 } });
fr("identify", "u_42");

The Astro component installs the fr() command queue, so these are called through it from any inline script. event writes at INFO and error at ERROR; log takes any event you like. Any element carrying data-fr-event="name" fires that event when it is clicked.

With consent granted the tag also writes page_view (view transitions included), session_start, page_leave, outbound_click, file_download, form_submit and web_vital. The props autoPage, autoOutbound, autoVitals, autoForms and trackLeave each turn one group off.