Frameworks

Preact

Preact 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.

#Add the script

1. #Copy your snippet

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

2. #Paste it into index.html

   It's at the project root. Paste the snippet before </head>, as a plain <script> (not type="module").

   <script
     defer
     data-site="YOUR_SITE_ID"
     data-domain="example.com"
     src="https://app.usestickybeak.com/_cfw/s.js"
   ></script>

3. #Build and deploy

   Vite copies the tag into the built HTML. If your Preact setup also prerenders routes, keep the tag in the shared HTML shell. Local development on localhost isn't counted.

To keep the ID in an environment variable, put VITE_STICKYBEAK_SITE_ID=YOUR_SITE_ID in .env.production and write data-site="%VITE_STICKYBEAK_SITE_ID%".

#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="/pricing" data-goal="view_pricing">See pricing</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);
}

import { useState } from "preact/hooks";
import { track } from "../lib/stickybeak";

export function ThemeToggle() {
  const [dark, setDark] = useState(false);

  function toggle() {
    setDark(!dark);
    track("theme_toggled", { dark: !dark });
  }

  return (
    <button type="button" onClick={toggle}>
      {dark ? "Light mode" : "Dark mode"}
    </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

History routers count new paths, including back and forward; query-only and hash-only changes do not. See Single-page apps.

#If it isn't working

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