Frameworks

VitePress

VitePress 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. #Add it to head

   Each entry is a tag name and its attributes. An empty string makes a boolean attribute like defer.

   import { defineConfig } from "vitepress";
   
   export default defineConfig({
     title: "My docs",
     head: [
       [
         "script",
         {
           defer: "",
           "data-site": "YOUR_SITE_ID",
           "data-domain": "example.com",
           src: "https://app.usestickybeak.com/_cfw/s.js",
         },
       ],
     ],
   });

2. #Build and deploy

   vitepress dev runs on localhost, which isn't counted.

Docs on a subdomain like docs.example.com can use your main domain in data-domain, since subdomains count towards it, or be added as their own site.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal in Markdown HTML. For component events, use the Vue helper. See Custom goals.

<a href="https://app.example.com/signup" data-goal="docs_signup_click">Create your account</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.

#Page changes

New paths, back and forward count; same-page headings do not. See Single-page apps.

#If it isn't working

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