} The tracker instance or null on server
+ *
+ * @example
+ * // React
+ * useEffect(() => {
+ * initGlimpse({ projectId: 'my-project' });
+ * }, []);
+ *
+ * // Vue
+ * onMounted(() => {
+ * initGlimpse({ projectId: 'my-project' });
+ * });
+ */
+export async function initGlimpse(options = {}) {
+ if (!isBrowser) {
+ return null;
+ }
+
+ // Wait for SDK to be ready if not yet initialized
+ if (!window.GlimpseTracker) {
+ await new Promise((resolve, reject) => {
+ if (window.GlimpseTracker) {
+ resolve();
+ } else {
+ const timeout = setTimeout(() => {
+ reject(new Error('GlimpseTracker initialization timeout'));
+ }, 5000);
+ window.addEventListener('glimpse:ready', () => {
+ clearTimeout(timeout);
+ resolve();
+ }, { once: true });
+ }
+ });
+ }
+
+ return window.GlimpseTracker?.init?.(options) || null;
+}
+
+/**
+ * Get the tracker instance (SSR-safe)
+ */
+export { getTracker };
+
+/**
+ * Check if running in browser
+ */
+export { isBrowser };
+
+// Default export
+export default {
track,
+ trackNow,
+ trackPageView,
trackOnView,
+ identify,
+ setTraits,
+ reset,
+ alias,
+ flush,
+ getAnonymousId,
+ getUserId,
+ getSessionId,
+ getSessionDuration,
+ initGlimpse,
+ getTracker,
+ isBrowser
};
-
-if (projectId) {
- import('./events/auto.js')
- .then(() => console.info('GlimpseTracker: auto-tracking enabled'))
- .catch((err) => {
- console.warn('GlimpseTracker: auto-tracking failed to load', err);
- });
-} else {
- console.warn('GlimpseTracker: missing data-project-id on script tag. Auto-tracking disabled.');
-}
\ No newline at end of file
diff --git a/packages/analytics-web/transport/sender.js b/packages/analytics-web/transport/sender.js
index fa96b65..ad6d993 100644
--- a/packages/analytics-web/transport/sender.js
+++ b/packages/analytics-web/transport/sender.js
@@ -1,55 +1,82 @@
-const ENDPOINT = `http://localhost:3000/event`;
+/**
+ * Event transport layer - batches and sends events to the server
+ */
+const DEFAULT_ENDPOINT = 'http://localhost:3000/event';
const BUFFER_SIZE = 10;
-const FLUSH_INTERVAL = 5000;
+const FLUSH_INTERVAL = 5000;
const MAX_RETRIES = 3;
-
+const RETRY_DELAY = 1000;
let eventBuffer = [];
-let flushTimer = null
+let flushTimer = null;
let isFlushing = false;
-function send(events) {
- events.map(event => {
- const payload = JSON.stringify(event);
- let attempts = 0;
+/**
+ * Get the configured endpoint
+ */
+function getEndpoint() {
+ return window.GlimpseTracker?.endpoint || DEFAULT_ENDPOINT;
+}
+
+/**
+ * Send events to the server
+ */
+async function send(events) {
+ const endpoint = getEndpoint();
- function attemptSend() {
- attempts++;
- // Use fetch with no credentials for cross-origin requests
- fetch(ENDPOINT, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: payload,
- keepalive: true,
- credentials: 'omit',
- mode: 'cors'
- }).catch((err) => {
- if (attempts < MAX_RETRIES) {
- setTimeout(attemptSend, 1000 * attempts);
+ await Promise.allSettled(events.map(event => {
+ const payload = JSON.stringify(event);
+
+ const attemptSend = async (attempts = 0) => {
+ try {
+ const response = await fetch(endpoint, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: payload,
+ keepalive: true,
+ credentials: 'omit',
+ mode: 'cors'
+ });
+
+ if (!response.ok && attempts < MAX_RETRIES - 1) {
+ await new Promise(resolve => setTimeout(resolve, RETRY_DELAY * (attempts + 1)));
+ return attemptSend(attempts + 1);
+ }
+ } catch (err) {
+ if (attempts < MAX_RETRIES - 1) {
+ await new Promise(resolve => setTimeout(resolve, RETRY_DELAY * (attempts + 1)));
+ return attemptSend(attempts + 1);
} else {
- console.error('Failed to send analytics events:', err);
+ console.error('GlimpseTracker: Failed to send event', err);
}
- });
- }
- attemptSend();
- })
+ }
+ };
+
+ return attemptSend();
+ }));
}
+/**
+ * Flush the event buffer
+ */
function flushBuffer() {
- if (isFlushing || eventBuffer.length === 0) return;
-
+ if (isFlushing || eventBuffer.length === 0) return;
+
isFlushing = true;
- const eventsToSend = [...eventBuffer]
+ const eventsToSend = [...eventBuffer];
eventBuffer = [];
-
+
send(eventsToSend);
isFlushing = false;
}
+/**
+ * Enqueue an event for sending
+ */
function enqueueEvent(event) {
eventBuffer.push(event);
-
+
if (eventBuffer.length >= BUFFER_SIZE) {
flushBuffer();
if (flushTimer) {
@@ -65,5 +92,37 @@ function enqueueEvent(event) {
}
}
+/**
+ * Force flush all pending events (use before page unload)
+ */
+function flush() {
+ if (flushTimer) {
+ clearTimeout(flushTimer);
+ flushTimer = null;
+ }
+
+ if (eventBuffer.length > 0) {
+ // Use sendBeacon for reliable delivery
+ const endpoint = getEndpoint();
+ const events = [...eventBuffer];
+ eventBuffer = [];
+
+ for (const event of events) {
+ if (navigator.sendBeacon) {
+ navigator.sendBeacon(endpoint, JSON.stringify(event));
+ }
+ }
+ }
+}
+
+// Flush on page hide
+document.addEventListener('visibilitychange', () => {
+ if (document.visibilityState === 'hidden') {
+ flush();
+ }
+});
+
+window.addEventListener('pagehide', flush);
-export default enqueueEvent
\ No newline at end of file
+export default enqueueEvent;
+export { flush, flushBuffer };
diff --git a/test/demo.html b/test/demo.html
index 06ca761..ff818b1 100644
--- a/test/demo.html
+++ b/test/demo.html
@@ -5,139 +5,213 @@
Glimpse Tracker Demo
- 🔍 Glimpse Tracker Demo
+ 🔍 Glimpse Analytics Demo
- Loads the client script with data-project-id and sends sample events to
- http://localhost:3000/event.
+ SDK v2.0 with identity tracking, Web Vitals, engagement metrics, and more.
+ Events are sent to http://localhost:3000/event.
📊 Status
- Waiting for tracker...
+ Initializing tracker...
+
-
+
+
+ 👤 Identity Tracking
+ Track users across sessions with persistent IDs:
+
+
+ Add Traits
+ Reset Identity
+
+ → identify(userId, traits) links anonymous activity to a user
+
+
- 🖱️ Custom Events (Manual Tracking)
- These use tracker.track(eventName, properties) directly:
+ 🖱️ Custom Events
+ Track custom events with track(name, properties):
Track CTA Click
Track Purchase
Track Sign Up
- Track Custom Event
+ Track Custom
→ Fires custom events with your own properties
+
- 🔘 Button Click Tracking (data-track attribute)
- Buttons with data-track attribute are auto-tracked:
+ 🔘 Auto Button Tracking
+ Buttons with data-track are auto-tracked:
Primary Action
Secondary Action
- Unnamed Tracked Button
- → Auto-tracks via data-track attribute
+ Unnamed Button
+ → Add data-track attribute to any button
+
- 📝 Form Submission Tracking
- Form submissions are auto-tracked:
+ 📝 Form Tracking
+ Form submissions and field focus are auto-tracked:
- → Auto-tracks form submissions with action URL
+ → Tracks form submissions, field focus (without PII)
+
+
- 📥 File Download Tracking
- Downloads of common file types are auto-tracked:
- Download PDF |
- Download Excel |
- Download ZIP
- → Auto-tracks: pdf, doc, docx, xls, xlsx, ppt, pptx, zip, rar, 7z, exe, dmg
+ ⚠️ Error Tracking
+ JavaScript errors and promise rejections:
+ Trigger JS Error
+ Trigger Promise Rejection
+ → Auto-captures errors with stack traces
+
- ⚠️ Error Tracking
- JavaScript errors and unhandled promises are auto-tracked:
- Trigger JS Error
- Trigger Promise Rejection
- → Auto-tracks window errors and unhandled promise rejections
+ ⚡ Performance & Web Vitals
+ Automatically tracks page load performance:
+
+ Page Load - DNS, TTFB, DOM ready, load completeLCP - Largest Contentful PaintFCP - First Contentful PaintFID - First Input DelayCLS - Cumulative Layout ShiftTTFB - Time to First Byte
+ → Web Vitals tracked automatically with good/needs-improvement/poor ratings
+
+
+
+
+ 📈 Engagement Tracking
+ Measures user engagement and interaction quality:
+
+ Active Time - Time user is actually engagedScroll Depth - Maximum scroll position reachedInteractions - Clicks, keypresses, touchesBounce Detection - Left without engagingRage Clicks - Frustration indicatorPage Exit - Comprehensive exit data
+ → Tracks 30-second heartbeats for long sessions
+
- 👁️ Visibility Tracking
- Page visibility changes are auto-tracked. Try switching tabs!
- → Auto-tracks "Page Hidden" and "Page Visible" events
+ 🎬 Media Tracking
+ Track video/audio engagement with data-track:
+
+
+
+ → Tracks play, pause, progress milestones (25/50/75%), complete
+
- 📜 Scroll Depth Tracking
- Scroll down to see depth tracking in action:
- → Auto-tracks at milestones: 10%, 25%, 50%, 75%, 90%, 100%
+ 📜 Scroll & Visibility Tracking
+ Scroll down to see element visibility tracking:
+ → Tracks scroll milestones: 25%, 50%, 75%, 90%, 100%