@probat/react 0.2.1 → 0.3.1

package/src/utils/heatmapTracker.ts

@@ -1,665 +0,0 @@
-/**
- * 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;
-	}
-}