Websites and builders

Lovable

Lovable analytics with Stickybeak tracks every React route in a deployed app from one root script. Add it through the shared root file in about five minutes.

#Add the script

1. #Open the root

   New TanStack Start projects use src/routes/__root.tsx; older Vite projects use index.html. Direct code editing requires a paid plan, but Lovable chat can edit either.

2. #Add the script

   Ask Lovable to add this tag to every page's root head, exactly once and not inside useEffect:

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

3. #Publish

   Click Publish or Update.

#Check it's working

Lovable preview uses another address and is not counted. On the live app, view source and confirm _cfw/s.js appears once, then follow Check it's working.

#Track goals

Add data-goal to the React element:

<button data-goal="signup" data-goal-plan="pro">Sign up</button>

For code events, put the queue above the tracker in the root head, then call it after success:

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

(window as any).stickybeak("waitlist_join", { source: "hero" });

See Custom goals.

#Track purchases

In the payment-success handler, call (window as any).stickybeak("purchase", { revenue, currency, order_id }). See Revenue.

#Page changes

Lovable routes client-side. Stickybeak records each path automatically.

#If it isn't working

• Test the published domain, not preview.
• Keep the tag in the root head, outside components and useEffect.

See general troubleshooting.