SvelteKit · firstrun

Install the package

Terminal

npm i @firstrun/analytics

Add the component

src/routes/+layout.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import { initFirstrun } from "@firstrun/analytics/svelte";

  onMount(() =>
    initFirstrun({ sourceKey: "fr_xxxxxxxxxxxxxxxx", host: "https://app.firstrun.app" })
  );
</script>

<slot />

Inside onMount, because the tag reads the document and localStorage and neither exists during SvelteKit's server render. initFirstrun returns its own teardown, which is why it can be returned straight out of onMount. There is a use:firstrun action taking the same config if you would rather write it in markup.

Send your own events

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

TypeScript

import { consent, event, error, log, identify } from "@firstrun/analytics";

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

event writes at INFO and error at ERROR, both filling in the conventional attributes. log takes any event you like. Attribute values are JSON, so a number stays a number.

With consent granted the tag also writes page_view on every client-side navigation (SvelteKit routes through history.pushState, which the tag watches), plus session_start, page_leave, outbound_click, file_download, form_submit and web_vital. The config fields autoPage, autoOutbound, autoVitals, autoForms and trackLeave each turn one group off.