Frameworks

SvelteKit

SvelteKit analytics with Stickybeak starts by adding its script to your rendered pages; this guide shows you where it belongs and how to track page views, goals and purchase revenue. It is a lighter alternative to Google Analytics for SvelteKit, with live visitors, goals and revenue attribution in one script.

#Add the script

1. #Copy your snippet

   In Stickybeak, open Settings, pick your site and copy the HTML snippet.

2. #Paste it into src/app.html

   Put it in the <head>, next to %sveltekit.head%.

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <link rel="icon" href="%sveltekit.assets%/favicon.png" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <script
         defer
         data-site="YOUR_SITE_ID"
         data-domain="example.com"
         src="https://app.usestickybeak.com/_cfw/s.js"
       ></script>
       %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
       <div style="display: contents">%sveltekit.body%</div>
     </body>
   </html>

3. #Deploy

   This works with every adapter, including adapter-static.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal to rendered links or buttons. For other events, use the typed queued helper below. See Custom goals.

<a href="/signup" data-goal="start_signup" data-goal-plan="pro">Start free trial</a>

type GoalProps = Record<string, string | number | boolean>;
type Stickybeak = ((goal: string, props?: GoalProps) => void) & { q?: unknown[][] };

declare global {
  interface Window {
    stickybeak?: Stickybeak;
  }
}

export function track(goal: string, props?: GoalProps): void {
  if (typeof window === "undefined") return; // on the server: nothing to do
  if (!window.stickybeak) {
    // Hold calls made before the script loads; it sends them when it arrives.
    const queue: Stickybeak = (...args) => {
      (queue.q ??= []).push(args);
    };
    window.stickybeak = queue;
  }
  window.stickybeak(goal, props);
}

<script lang="ts">
  import { goto } from "$app/navigation";
  import { track } from "../stickybeak";

  async function upgrade() {
    track("upgrade_click", { plan: "pro" });
    await goto("/checkout?plan=pro");
  }
</script>

<button type="button" onclick={upgrade}>Upgrade to Pro</button>

#Track purchases

After confirming an order in the browser, send:

window.stickybeak?.("purchase", { revenue: 49, currency: "USD", order_id: "ORDER_ID" });

Use real values; see Revenue.

#Page changes

Links, goto(), back, forward and path-changing pushState() count. Replace, query-only and hash-only changes do not. See Single-page apps.

#If it isn't working

Local development isn't counted because the script switches itself off on localhost. A staging site on a different domain is rejected because it does not match data-domain. A staging subdomain does match, so remove the snippet from that build if you do not want its visits included.

Check the production site ID and domain, then see Troubleshooting.