Tracking test harness
Each section exercises one tracker feature. Open DevTools → Network and watch for POSTs to /api/session-start, /api/event-log, /api/interaction-log, /api/mark-engaged, and /api/convert-session. The right-hand panel mirrors what the tracker reports back; the in-page log records every action you take here.
Tracker status
- Loaded
- waiting…
- Project ID
- —
- Session ID
- —
Captured UTM / click IDs
None. Visit this page with ?utm_source=test&utm_campaign=launch&fbclid=abc123 to populate.
1. Click tracking via data-track
POSTs to /api/event-log with type=click. Verify each fires and the metadata in the request body matches the data-track-* attributes.
2. Custom events via window.tracker.trackEvent
POSTs to /api/event-log with whatever type you pass. Use this for funnel steps not represented by a clickable element.
3. Widget opens
POSTs to /api/event-log with type=chat_open / quiz_open / calculator_open. Use these when a non-form widget mounts.
4. Funnel events (level + progress + select_content)
GA4-style DataLayer events. Useful for quizzes, multi-step calculators, multi-step forms.
5. Structured interactions
POSTs to /api/interaction-log. Goes into the Interaction table — separate from Event. Use for quiz answers, calculator outputs, anything with structured payload to query later.
6. Form conversion → central Lead pool
The most important test. Submit handler validates client-side then calls window.tracker.convertSession(email, phone, consentText, consentVersion, name, note). Re-submitting the same session is idempotent: the second response carries already_converted: true and the same lead_id.
Or call window.tracker.convertSession(email, phone, consentText, consentVersion, name, note) imperatively:
7. Scroll depth (25 / 50 / 75 / 100%)
Auto-fired by the tracker. Scroll all the way down — you should see four scroll events appear in /api/event-log. The tracker debounces so move the scroll, then pause.
Filler paragraph 1. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 2. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 3. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 4. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 5. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 6. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 7. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 8. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 9. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 10. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 11. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 12. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 13. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 14. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 15. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 16. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 17. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 18. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 19. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 20. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 21. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 22. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 23. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 24. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 25. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 26. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 27. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 28. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 29. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Filler paragraph 30. Scroll depth events fire at 25%, 50%, 75% and 100% of the page height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Pricing anchor (target of nav-pricing)
Bottom of page. By the time you read this, scroll-depth 100% should have fired.