@probat/react 0.1.5 → 0.2.1

package/src/utils/heatmapTracker.ts

@@ -0,0 +1,665 @@
+/**
+ * Universal Heatmap Tracker for User Websites
+ * 
+ * Tracks all clicks across the entire user website for heatmap visualization.
+ * This is injected into user websites via the probat-react package.
+ */
+
+interface ClickEvent {
+	page_url: string;
+	site_url: string;
+	x_coordinate: number;
+	y_coordinate: number;
+	viewport_width: number;
+	viewport_height: number;
+	element_tag: string | null;
+	element_class: string | null;
+	element_id: string | null;
+	session_id: string;
+	proposal_id?: string | null;
+	variant_label?: string | null;
+}
+
+interface CursorMovementEvent {
+	page_url: string;
+	site_url: string;
+	x_coordinate: number;
+	y_coordinate: number;
+	viewport_width: number;
+	viewport_height: number;
+	session_id: string;
+	proposal_id?: string | null;
+	variant_label?: string | null;
+}
+
+interface HeatmapConfig {
+	apiBaseUrl: string;
+	batchSize?: number;
+	batchInterval?: number;
+	enabled?: boolean;
+	excludeSelectors?: string[];
+	trackCursor?: boolean; // Enable cursor movement tracking
+	cursorThrottle?: number; // Milliseconds between cursor movement captures (default: 100ms)
+	cursorBatchSize?: number; // Number of cursor movements to batch before sending
+	proposalId?: string; // Optional proposal/experiment id
+	variantLabel?: string; // Optional variant label
+}
+
+function getStoredExperimentInfo(): { proposalId?: string; variantLabel?: string } {
+	if (typeof window === 'undefined') return {};
+	try {
+		const proposalId = window.localStorage.getItem('probat_active_proposal_id') || undefined;
+		const variantLabel = window.localStorage.getItem('probat_active_variant_label') || undefined;
+		return { proposalId, variantLabel };
+	} catch {
+		return {};
+	}
+}
+
+class HeatmapTracker {
+	private clicks: ClickEvent[] = [];
+	private movements: CursorMovementEvent[] = [];
+	private sessionId: string;
+	private config: HeatmapConfig;
+	private batchTimer: ReturnType<typeof setTimeout> | null = null;
+	private cursorBatchTimer: ReturnType<typeof setTimeout> | null = null;
+	private lastCursorTime = 0;
+	private isInitialized = false;
+
+	constructor(config: HeatmapConfig) {
+		this.sessionId = this.getOrCreateSessionId();
+		const stored = getStoredExperimentInfo();
+
+		this.config = {
+			apiBaseUrl: config.apiBaseUrl,
+			batchSize: config.batchSize || 10,
+			batchInterval: config.batchInterval || 5000,
+			enabled: config.enabled !== false,
+			excludeSelectors: config.excludeSelectors || [
+				'[data-heatmap-exclude]',
+				'input[type="password"]',
+				'input[type="email"]',
+				'textarea',
+			],
+			trackCursor: config.trackCursor !== false, // Enable cursor tracking by default
+			cursorThrottle: config.cursorThrottle || 100, // Capture cursor position every 100ms
+			cursorBatchSize: config.cursorBatchSize || 50, // Send every 50 movements
+			proposalId: config.proposalId || stored.proposalId,
+			variantLabel: config.variantLabel || stored.variantLabel,
+		};
+	}
+
+	private getOrCreateSessionId(): string {
+		if (typeof window === 'undefined') return '';
+
+		const storageKey = 'probat_heatmap_session_id';
+		let sessionId = localStorage.getItem(storageKey);
+
+		if (!sessionId) {
+			sessionId = `heatmap_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+			localStorage.setItem(storageKey, sessionId);
+		}
+
+		return sessionId;
+	}
+
+	private shouldExcludeElement(element: HTMLElement): boolean {
+		if (!this.config.excludeSelectors) return false;
+
+		for (const selector of this.config.excludeSelectors) {
+			if (element.matches(selector) || element.closest(selector)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	private extractElementInfo(element: HTMLElement): {
+		tag: string | null;
+		class: string | null;
+		id: string | null;
+	} {
+		return {
+			tag: element.tagName || null,
+			class: element.className && typeof element.className === 'string' ? element.className : null,
+			id: element.id || null,
+		};
+	}
+
+	private handleMouseMove = (event: MouseEvent): void => {
+		if (!this.config.enabled || !this.config.trackCursor) return;
+		if (typeof window === 'undefined') return;
+
+		// Refresh proposal/variant from localStorage at runtime
+		const stored = getStoredExperimentInfo();
+
+		// If stored info matches current proposal, or we don't have a proposal yet, use stored variant
+		const activeProposalId = this.config.proposalId || stored.proposalId;
+		const activeVariantLabel = (stored.proposalId === activeProposalId)
+			? (stored.variantLabel || this.config.variantLabel)
+			: (this.config.variantLabel || stored.variantLabel);
+
+		// Throttle cursor tracking
+		const now = Date.now();
+		const cursorThrottle = this.config.cursorThrottle ?? 100;
+		if (now - this.lastCursorTime < cursorThrottle) {
+			return;
+		}
+		this.lastCursorTime = now;
+
+		// Debug: Log first few movements to verify it's working
+		console.log('[PROBAT Heatmap] Cursor movement captured:', {
+			x: event.pageX,
+			y: event.pageY,
+			movementsInBatch: this.movements.length + 1
+		});
+
+		// Get page information
+		const pageUrl = window.location.href;
+		const siteUrl = window.location.origin;
+
+		// Get cursor coordinates relative to document (including scroll)
+		const x = event.pageX;
+		const y = event.pageY;
+
+		// Get viewport dimensions
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+
+		// Create cursor movement event
+		const movementEvent: CursorMovementEvent = {
+			page_url: pageUrl,
+			site_url: siteUrl,
+			x_coordinate: x,
+			y_coordinate: y,
+			viewport_width: viewportWidth,
+			viewport_height: viewportHeight,
+			session_id: this.sessionId,
+			proposal_id: activeProposalId,
+			variant_label: activeVariantLabel,
+		};
+
+		// Add to batch
+		this.movements.push(movementEvent);
+
+		// Send batch if it reaches the size limit
+		const cursorBatchSize = this.config.cursorBatchSize ?? 50;
+		if (this.movements.length >= cursorBatchSize) {
+			this.sendCursorBatch();
+		} else {
+			// Otherwise, schedule a send after the interval
+			this.scheduleCursorBatchSend();
+		}
+	};
+
+	private scheduleCursorBatchSend(): void {
+		// Clear existing timer
+		if (this.cursorBatchTimer) {
+			clearTimeout(this.cursorBatchTimer);
+		}
+
+		// Schedule new send
+		this.cursorBatchTimer = setTimeout(() => {
+			if (this.movements.length > 0) {
+				this.sendCursorBatch();
+			}
+		}, this.config.batchInterval ?? 5000);
+	}
+
+	private async sendCursorBatch(): Promise<void> {
+		if (this.movements.length === 0) return;
+
+		// Get site URL from first movement
+		const siteUrl = this.movements[0]?.site_url || window.location.origin;
+
+		// Create batch
+		const batch = {
+			movements: this.movements,
+			site_url: siteUrl,
+			proposal_id: this.config.proposalId,
+			variant_label: this.config.variantLabel,
+		};
+
+		// Clear movements array
+		this.movements = [];
+
+		// Clear timer
+		if (this.cursorBatchTimer) {
+			clearTimeout(this.cursorBatchTimer);
+			this.cursorBatchTimer = null;
+		}
+
+		try {
+			console.log('[PROBAT Heatmap] Sending cursor movements batch:', {
+				count: batch.movements.length,
+				site_url: batch.site_url
+			});
+
+			// Send to backend
+			const response = await fetch(`${this.config.apiBaseUrl}/api/heatmap/cursor-movements`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify(batch),
+				// Don't wait for response - fire and forget for performance
+			});
+
+			if (!response.ok) {
+				console.warn('[PROBAT Heatmap] Failed to send cursor movements:', response.status);
+			} else {
+				console.log('[PROBAT Heatmap] Successfully sent cursor movements batch');
+			}
+		} catch (error) {
+			// Silently fail - don't interrupt user experience
+			console.warn('[PROBAT Heatmap] Error sending cursor movements:', error);
+		}
+	}
+
+	private handleClick = (event: MouseEvent): void => {
+		if (!this.config.enabled) return;
+		if (typeof window === 'undefined') return;
+
+		// Refresh proposal/variant from localStorage at runtime
+		const stored = getStoredExperimentInfo();
+
+		// Priority: use localStorage variant if it matches the current proposal
+		const activeProposalId = this.config.proposalId || stored.proposalId;
+		const activeVariantLabel = (stored.proposalId === activeProposalId)
+			? (stored.variantLabel || this.config.variantLabel)
+			: (this.config.variantLabel || stored.variantLabel);
+
+		const target = event.target as HTMLElement | null;
+		if (!target) return;
+
+		if (this.shouldExcludeElement(target)) {
+			return;
+		}
+
+		const pageUrl = window.location.href;
+		const siteUrl = window.location.origin;
+
+		// Get click coordinates relative to document (including scroll)
+		const x = event.pageX;
+		const y = event.pageY;
+
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+
+		const elementInfo = this.extractElementInfo(target);
+
+		const clickEvent: ClickEvent = {
+			page_url: pageUrl,
+			site_url: siteUrl,
+			x_coordinate: x,
+			y_coordinate: y,
+			viewport_width: viewportWidth,
+			viewport_height: viewportHeight,
+			element_tag: elementInfo.tag,
+			element_class: elementInfo.class,
+			element_id: elementInfo.id,
+			session_id: this.sessionId,
+			proposal_id: activeProposalId,
+			variant_label: activeVariantLabel,
+		};
+
+		this.clicks.push(clickEvent);
+
+		const batchSize = this.config.batchSize ?? 10;
+		if (this.clicks.length >= batchSize) {
+			this.sendBatch();
+		} else {
+			this.scheduleBatchSend();
+		}
+	};
+
+	private scheduleBatchSend(): void {
+		if (this.batchTimer) {
+			clearTimeout(this.batchTimer);
+		}
+
+		this.batchTimer = setTimeout(() => {
+			if (this.clicks.length > 0) {
+				this.sendBatch();
+			}
+		}, this.config.batchInterval ?? 5000);
+	}
+
+	private async sendBatch(): Promise<void> {
+		if (this.clicks.length === 0) return;
+
+		if (this.batchTimer) {
+			clearTimeout(this.batchTimer);
+			this.batchTimer = null;
+		}
+
+		const siteUrl = this.clicks[0]?.site_url || window.location.origin;
+
+		const batch = {
+			clicks: [...this.clicks],
+			site_url: siteUrl,
+		};
+
+		this.clicks = [];
+
+		try {
+			const response = await fetch(`${this.config.apiBaseUrl}/api/heatmap/clicks`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify(batch),
+			});
+
+			if (!response.ok) {
+				console.warn('[PROBAT Heatmap] Failed to send clicks:', response.status);
+			}
+		} catch (error) {
+			console.warn('[PROBAT Heatmap] Error sending clicks:', error);
+		}
+	}
+
+	public init(): void {
+		if (this.isInitialized) {
+			console.warn('[PROBAT Heatmap] Tracker already initialized');
+			return;
+		}
+
+		if (typeof window === 'undefined') {
+			return;
+		}
+
+		// Check for heatmap visualization mode FIRST
+		const params = new URLSearchParams(window.location.search);
+		if (params.get('heatmap') === 'true') {
+			console.log('[PROBAT Heatmap] Heatmap visualization mode detected');
+			const pageUrl = params.get('page_url');
+			if (pageUrl) {
+				this.config.enabled = false;
+				this.isInitialized = true;
+				this.enableVisualization(pageUrl);
+				return;
+			}
+		}
+
+		document.addEventListener('click', this.handleClick, true);
+
+		// Attach cursor movement listener if enabled
+		if (this.config.trackCursor) {
+			document.addEventListener('mousemove', this.handleMouseMove, { passive: true });
+			console.log('[PROBAT Heatmap] Cursor tracking enabled');
+		} else {
+			console.log('[PROBAT Heatmap] Cursor tracking disabled');
+		}
+
+		this.isInitialized = true;
+		console.log('[PROBAT Heatmap] Tracker initialized');
+
+		window.addEventListener('beforeunload', () => {
+			if (this.clicks.length > 0) {
+				const siteUrl = this.clicks[0]?.site_url || window.location.origin;
+				const batch = {
+					clicks: this.clicks,
+					site_url: siteUrl,
+				};
+
+				const blob = new Blob([JSON.stringify(batch)], {
+					type: 'application/json',
+				});
+				navigator.sendBeacon(
+					`${this.config.apiBaseUrl}/api/heatmap/clicks`,
+					blob
+				);
+			}
+
+			if (this.movements.length > 0) {
+				const siteUrl = this.movements[0]?.site_url || window.location.origin;
+				const batch = {
+					movements: this.movements,
+					site_url: siteUrl,
+				};
+
+				const blob = new Blob([JSON.stringify(batch)], {
+					type: 'application/json',
+				});
+				navigator.sendBeacon(
+					`${this.config.apiBaseUrl}/api/heatmap/cursor-movements`,
+					blob
+				);
+			}
+		});
+	}
+
+	public stop(): void {
+		if (!this.isInitialized) return;
+
+		// Send any pending clicks
+		if (this.clicks.length > 0) {
+			this.sendBatch();
+		}
+
+		// Send any pending cursor movements
+		if (this.movements.length > 0) {
+			this.sendCursorBatch();
+		}
+
+		// Remove event listeners
+		document.removeEventListener('click', this.handleClick, true);
+		if (this.config.trackCursor) {
+			document.removeEventListener('mousemove', this.handleMouseMove);
+		}
+
+		// Clear timers
+		if (this.batchTimer) {
+			clearTimeout(this.batchTimer);
+			this.batchTimer = null;
+		}
+		if (this.cursorBatchTimer) {
+			clearTimeout(this.cursorBatchTimer);
+			this.cursorBatchTimer = null;
+		}
+
+		this.isInitialized = false;
+	}
+
+	/**
+	 * Enable visualization mode
+	 */
+	/**
+	 * Enable visualization mode
+	 */
+	private async enableVisualization(pageUrl: string): Promise<void> {
+		console.log('[PROBAT Heatmap] Enabling visualization mode for:', pageUrl);
+
+		// Stop tracking just in case
+		this.stop();
+		this.config.enabled = false;
+
+		try {
+			// Fetch heatmap data
+			const url = new URL(`${this.config.apiBaseUrl}/api/heatmap/aggregate`);
+			url.searchParams.append('site_url', window.location.origin);
+			url.searchParams.append('page_url', pageUrl);
+			url.searchParams.append('days', '30'); // Default to 30 days
+
+			// Add variant filtering if present in URL
+			const params = new URLSearchParams(window.location.search);
+			const proposalId = params.get('proposal_id');
+			const variantLabel = params.get('variant_label');
+
+			if (proposalId) url.searchParams.append('proposal_id', proposalId);
+			if (variantLabel) url.searchParams.append('variant_label', variantLabel);
+
+			const response = await fetch(url.toString());
+			if (!response.ok) throw new Error('Failed to fetch heatmap data');
+
+			const data = await response.json();
+			if (data && data.points) {
+				console.log(`[PROBAT Heatmap] Found ${data.points.length} points. Rendering...`);
+				this.renderHeatmapOverlay(data);
+			}
+		} catch (error) {
+			console.error('[PROBAT Heatmap] Visualization error:', error);
+		}
+	}
+
+	/**
+	 * Render heatmap overlay on valid points
+	 */
+	private renderHeatmapOverlay(data: any): void {
+		const points = data.points;
+		const trackedWidth = data.viewport_width || 0;
+
+		// Remove existing heatmap if any
+		const existing = document.getElementById('probat-heatmap-overlay');
+		if (existing) existing.remove();
+
+		const canvas = document.createElement('canvas');
+		canvas.id = 'probat-heatmap-overlay';
+		canvas.style.position = 'absolute';
+		canvas.style.top = '0';
+		canvas.style.left = '0';
+		canvas.style.zIndex = '999999';
+		canvas.style.pointerEvents = 'none';
+		canvas.style.display = 'block';
+		canvas.style.margin = '0';
+		canvas.style.padding = '0';
+
+		// Append to html to ensure it's relative to the absolute document top-left (0,0)
+		document.documentElement.appendChild(canvas);
+
+		const resize = () => {
+			const dpr = window.devicePixelRatio || 1;
+			const width = document.documentElement.scrollWidth;
+			const height = document.documentElement.scrollHeight;
+			const currentWidth = window.innerWidth;
+
+			// Horizontal centering adjustment
+			// Formula: current_x = tracked_x + (current_viewport_width - tracked_viewport_width) / 2
+			let offsetX = 0;
+			if (trackedWidth > 0 && trackedWidth !== currentWidth) {
+				offsetX = (currentWidth - trackedWidth) / 2;
+				console.log(`[PROBAT Heatmap] Horizontal adjustment: offset=${offsetX}px (Tracked: ${trackedWidth}px, Current: ${currentWidth}px)`);
+			}
+
+			// Set display size
+			canvas.style.width = width + 'px';
+			canvas.style.height = height + 'px';
+
+			// Set internal resolution scaled by pixel ratio
+			canvas.width = width * dpr;
+			canvas.height = height * dpr;
+
+			const ctx = canvas.getContext('2d');
+			if (ctx) {
+				ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // Clear and set scale in one go
+				this.renderPoints(ctx, points, offsetX);
+			}
+		};
+
+		window.addEventListener('resize', resize);
+		// Call multiple times to catch delayed layout shifts
+		setTimeout(resize, 300);
+		setTimeout(resize, 1000);
+		setTimeout(resize, 3000);
+	}
+
+	/**
+	 * Draw points on canvas
+	 */
+	private renderPoints(ctx: CanvasRenderingContext2D, points: any[], offsetX: number): void {
+		points.forEach(point => {
+			// Apply horizontal offset for centered layouts
+			const x = point.x + offsetX;
+			const y = point.y;
+			const intensity = point.intensity;
+
+			// Scale radius based on intensity
+			const radius = 20 + (intensity * 12);
+			const color = this.getHeatmapColor(intensity);
+
+			// Use radial gradient for a "heat" look
+			const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
+			gradient.addColorStop(0, this.rgbToRgba(color, 0.8));
+			gradient.addColorStop(1, this.rgbToRgba(color, 0));
+
+			ctx.beginPath();
+			ctx.arc(x, y, radius, 0, 2 * Math.PI);
+			ctx.fillStyle = gradient;
+			ctx.fill();
+		});
+	}
+
+	/**
+	 * Get heatmap color based on intensity
+	 */
+	private getHeatmapColor(intensity: number): string {
+		const clamped = Math.max(0, Math.min(1, intensity));
+
+		if (clamped < 0.25) {
+			const t = clamped / 0.25;
+			const r = Math.floor(0 + t * 0);
+			const g = Math.floor(0 + t * 255);
+			const b = Math.floor(255 + t * (255 - 255));
+			return `rgb(${r}, ${g}, ${b})`;
+		} else if (clamped < 0.5) {
+			const t = (clamped - 0.25) / 0.25;
+			const r = Math.floor(0 + t * 0);
+			const g = 255;
+			const b = Math.floor(255 + t * (0 - 255));
+			return `rgb(${r}, ${g}, ${b})`;
+		} else if (clamped < 0.75) {
+			const t = (clamped - 0.5) / 0.25;
+			const r = Math.floor(0 + t * 255);
+			const g = 255;
+			const b = 0;
+			return `rgb(${r}, ${g}, ${b})`;
+		} else {
+			const t = (clamped - 0.75) / 0.25;
+			const r = 255;
+			const g = Math.floor(255 + t * (0 - 255));
+			const b = 0;
+			return `rgb(${r}, ${g}, ${b})`;
+		}
+	}
+
+	/**
+	 * Convert RGB to RGBA
+	 */
+	private rgbToRgba(rgb: string, opacity: number): string {
+		const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+		if (match) {
+			return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${opacity})`;
+		}
+		return rgb;
+	}
+}
+
+let trackerInstance: HeatmapTracker | null = null;
+
+/**
+ * Initialize heatmap tracking for user websites
+ * Called automatically by ProbatProvider
+ */
+export function initHeatmapTracking(config: HeatmapConfig): HeatmapTracker {
+	if (trackerInstance) {
+		trackerInstance.stop();
+	}
+
+	trackerInstance = new HeatmapTracker(config);
+	trackerInstance.init();
+
+	return trackerInstance;
+}
+
+export function getHeatmapTracker(): HeatmapTracker | null {
+	return trackerInstance;
+}
+
+export function stopHeatmapTracking(): void {
+	if (trackerInstance) {
+		trackerInstance.stop();
+		trackerInstance = null;
+	}
+}