SURFTRACK LAB / PLAYER 001
INSERT EVENT.
FIND SIGNAL.
Paste the snippet. Browse. Open the console.
See what happens on your site in a live ASCII dashboard. No key needed. Add pilot credentials when you want to send events to Surftrack.
GET THE SNIPPET ↓01 / PASTE THE SNIPPET
Paste. Reload.
You’re in.
1. Add this before </body> on your page. It starts in local mode, with journey saved in your browser.
<script src="https://surftrack.io/surftrack-sdk-0.1.0-pilot.2.js"></script>
<script src="https://surftrack.io/ascii-graphs-1.3.0.js"></script>
<script>
window.surftrackDebug = SurftrackAscii.init({
preset: "website",
debug: true
});
</script>02 / DO YOUR THING
Browse.
Click something.
Page views, clicks, scroll milestones and outbound clicks appear automatically. For a blog, set preset: "blog" to add article events. Mark a button with data-surftrack="subscribe" to name its click.
Name your own events
// Use names that describe an action.
surftrackDebug.track({
eventType: "product.demo_started",
properties: { source: "hero" }
});
// Or mark a button for automatic click tracking:
<button data-surftrack="request-demo">Request demo</button>The Surftrack website records surftrack.page_view, surftrack.click, surftrack.navigation, surftrack.scroll_depth, surftrack.cta_click, surftrack.snippet_copied, and contact-form lifecycle events. Form contents are never included.
03 / OPEN DEVELOPER TOOLS → CONSOLE
Your website.
In the terminal.
3. Your journey prints automatically on each page load. Reload or navigate to another page to see the accumulated history. Or type surftrackDebug.summary() for a fresh snapshot.
+----------------------------------------------------------------------+ | SURFTRACK // JOURNEY MONITOR | | LOCAL DISK / YOUR BROWSER / LAST 7 DAYS | +----------------------------------------------------------------------+ | PAGEVIEWS CLICKS SCROLL MILESTONES VISIBLE TIME | | 3 8 4 2m 14s | +----------------------------------------------------------------------+ | PAGE TIME DEPTH EVENTS | | / 0m 42s 75% 8 | | /engineers.html 1m 18s 100% 12 | | /try.html 0m 14s 25% 6 | +----------------------------------------------------------------------+ | surftrackDebug.summary() refreshes this report | +----------------------------------------------------------------------+
surftrackDebug.clearJourney() resets the saved history. .events() inspects field names, types and warnings. .pause() quiets the console; .destroy() stops collection.
Connect your pilot
Add endpoint: "YOUR_COLLECTOR_URL" and writeKey: "YOUR_PILOT_WRITE_KEY" to the initialization options. The dashboard then shows collector receipts, attempts and failures. Accepted means received by the collector.
Event checks and privacy
Local mode keeps up to 100 visits and 500 events in localStorage for seven days. Property values are not printed. The blog preset respects Do Not Track and Global Privacy Control. Article-read is a heuristic: 30 seconds of visible time and 75% progress. Supply schemas: { "blog.demo": { count: "number" } } to check required fields and types locally.
NEXT / SEND EVENTS TO SURFTRACK
Request your
pilot key.
Tell us where you want to try it. We’ll email your write key, collector URL, and setup details.