Frameworks

Plain HTML

Plain HTML 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 an HTML site, with live visitors, goals and revenue attribution in one script.

#Add the script

#Add the script

1. #Copy your snippet

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

2. #Paste it into every page

   Put it before </head> on each page you want counted. If your pages share a header include or template, put it there once.

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <title>My site</title>
       <script
         defer
         data-site="YOUR_SITE_ID"
         data-domain="example.com"
         src="https://app.usestickybeak.com/_cfw/s.js"
       ></script>
     </head>
     <body>
       …
     </body>
   </html>

3. #Upload

   Publish the pages to your web host. Pages opened straight from disk (file://) or from localhost aren't counted.

#Alpine.js

Alpine can call the queued stickybeak() function:

<div x-data="{ open: false }">
  <button @click="open = true; stickybeak('opened_pricing_faq')">Show FAQ</button>
  <div x-show="open">…</div>
</div>

#htmx

hx-push-url counts new paths; hx-replace-url does not. Swapped-in data-goal attributes work.

#Turbo and other page-swapping libraries

Turbo, Swup and Barba count new paths. Keep the tag in every page's <head>.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal to links or buttons; use the queued JavaScript below for other events. See Custom goals.

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

<script>window.stickybeak = window.stickybeak || function () { (window.stickybeak.q = window.stickybeak.q || []).push(arguments); };</script>

<script>
  document.querySelector("#contact").addEventListener("submit", function () {
    window.stickybeak("contact_form_sent");
  });
</script>

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