Frameworks

Hono

Hono 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

#Add the script

This example runs on Cloudflare Workers, where environment variables arrive as bindings on c.env. It needs "jsx": "react-jsx" and "jsxImportSource": "hono/jsx" in tsconfig.json, as Hono's starters set up. The Workers starter's entry is src/index.ts: rename it to src/index.tsx so it can use JSX, and change "main" in wrangler.jsonc to "src/index.tsx".

import { Hono } from "hono";
import type { FC, PropsWithChildren } from "hono/jsx";

type Bindings = { STICKYBEAK_SITE_ID?: string };

const Layout: FC<PropsWithChildren<{ siteId?: string }>> = ({ siteId, children }) => (
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>My site</title>
      {siteId && (
        <script
          defer
          data-site={siteId}
          data-domain="example.com"
          src="https://app.usestickybeak.com/_cfw/s.js"
        ></script>
      )}
    </head>
    <body>{children}</body>
  </html>
);

const app = new Hono<{ Bindings: Bindings }>();

app.get("/", (c) =>
  c.html(
    <Layout siteId={c.env.STICKYBEAK_SITE_ID}>
      <h1>Hello</h1>
    </Layout>,
  ),
);

export default app;

Set the binding only in production. Node uses process.env, Bun Bun.env, and Deno Deno.env.get().

#HonoX

In HonoX, put the plain tag in app/routes/_renderer.tsx beside <Script /> and <Link />.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal to rendered JSX. For a server-decided success, render the browser call on the redirected page. See Custom goals.

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

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

#If it isn't working

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