NotAShelf/watchdog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: Javascript beacon for client-side tracking; custom event API

Browse source 
Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I8e1f329ad3dfe7ba3f34ce450b1e1a0f6a6a6964
This commit is contained in:
raf 2026-03-01 05:10:04 +03:00
commit b6f2380a20
Signed by: NotAShelf
GPG key ID: 29D95B64378DB4BF
2 changed files with 153 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

84
web/beacon.js Normal file
View file

@ -0,0 +1,84 @@
// Watchdog Analytics Beacon
(function () {
"use strict";
var endpoint = "/api/event";
var tracked = false;
// Send analytics payload to server
function sendBeacon(payload) {
var data = JSON.stringify(payload);
// Try navigator.sendBeacon first (best for page unload)
if (navigator.sendBeacon) {
var blob = new Blob([data], { type: "application/json" });
navigator.sendBeacon(endpoint, blob);
return;
}
// Fallback to fetch for browsers without sendBeacon
if (window.fetch) {
fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: data,
keepalive: true,
}).catch(function () {
// Silently fail, analytics shouldn't break the page
});
return;
}
// Final fallback to XMLHttpRequest
try {
var xhr = new XMLHttpRequest();
xhr.open("POST", endpoint, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(data);
} catch (e) {
// Silently fail
}
}
// Build payload
function buildPayload() {
return {
d: window.location.hostname,
p: window.location.pathname,
r: document.referrer || "",
w: window.screen.width || 0,
};
}
// Track a pageview
function trackPageview() {
if (tracked) return; // Only track once per page load
tracked = true;
sendBeacon(buildPayload());
}
// Track a custom event
function trackEvent(eventName) {
if (!eventName || typeof eventName !== "string") {
console.warn("Watchdog: event name must be a non-empty string");
return;
}
var payload = buildPayload();
payload.e = eventName;
sendBeacon(payload);
}
// Expose public API
window.watchdog = {
track: trackEvent,
trackPageview: trackPageview,
};
// Auto-track pageview on load
if (document.readyState === "complete") {
trackPageview();
} else {
window.addEventListener("load", trackPageview);
}
})();

69
web/beacon.test.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watchdog Beacon Test</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
line-height: 1.6;
}
button {
background: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 8px 4px;
}
button:hover {
background: #45a049;
}
.info {
background: #f0f0f0;
padding: 12px;
border-radius: 4px;
margin: 16px 0;
}
code {
background: #e8e8e8;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<h1>Watchdog Analytics Beacon Test</h1>
<div class="info">
<p><strong>Instructions:</strong>
This page automatically tracks a pageview on load.
Click the buttons below to test custom event tracking.</p>
</div>
<h2>Custom Events</h2>
<button onclick="watchdog.track('signup')">Track Signup</button>
<button onclick="watchdog.track('purchase')">Track Purchase</button>
<button onclick="watchdog.track('download')">Track Download</button>
<button onclick="watchdog.track('newsletter_subscribe')">Track Newsletter</button>
<div class="info">
<p><strong>API Usage:</strong></p>
<p>Track custom events: <code>watchdog.track('event_name')</code></p>
<p>Manual pageview: <code>watchdog.trackPageview()</code></p>
</div>
<h2>Console</h2>
<p>Open your browser's developer console (F12) and network tab to see beacon requests.</p>
<!-- Load the beacon script -->
<script src="/web/beacon.js"></script>
</body>
</html>