userpath-js 0.0.0

package/dist/pixel.js

@@ -0,0 +1 @@
+class n{namespace;constructor({namespace:r}){this.namespace=r}getItem(r){let t=localStorage.getItem(`${this.namespace}.${r}`)||"";try{return JSON.parse(t)}catch(e){return null}}setItem(r,t){localStorage.setItem(`${this.namespace}.${r}`,JSON.stringify(t))}removeItem(r){localStorage.removeItem(`${this.namespace}.${r}`)}}var u=new n({namespace:"userpath"});class c{baseUrl;siteId;queue=[];flushInterval=null;constructor(r){this.baseUrl=r.baseUrl||"",this.siteId=r.siteId,this.flushInterval=window.setInterval(()=>this.flush(),5000)}track(r){if(this.queue.push(r),this.queue.length>=10)this.flush()}flush(){if(this.queue.length===0)return;let r=[...this.queue];this.queue=[],fetch(`${this.baseUrl}/events`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({siteId:this.siteId,sessionId:this.getSessionId(),timestamp:new Date().toISOString(),userAgent:navigator.userAgent,screenWidth:window.screen.width,screenHeight:window.screen.height,language:navigator.language,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone,events:r}),keepalive:!0}).catch((t)=>{this.queue=[...r,...this.queue].slice(0,100),console.error("Error sending analytics data:",t)})}getSessionId(){let r=u.getItem("session_id");if(!r)r=this.generateId(),u.setItem("session_id",r);return r}generateId(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(r){let t=Math.random()*16|0;return(r==="x"?t:t&3|8).toString(16)})}}class o{api;constructor(r){this.api=r}trackPageView(){let r={type:"pageview",url:window.location.href,referrer:document.referrer,title:document.title};this.api.track(r)}trackCustomEvent(r,t={}){let e={type:"event",name:r,properties:t};this.api.track(e)}trackPurchase(r){let t={type:"purchase",...r};this.api.track(t)}}class g{api;anonymousId=null;currentUser=null;constructor(r){this.api=r;this.anonymousId=this.getStoredAnonymousId()}getAnonymousId(){if(!this.anonymousId)this.anonymousId=this.api.generateId(),localStorage.setItem("up_anonymous_id",this.anonymousId);return this.anonymousId}getUserId(){return this.currentUser?.userId||null}identify(r){this.currentUser=r,this.api.track({type:"identify",anonymousId:this.getAnonymousId(),...r})}getStoredAnonymousId(){return localStorage.getItem("up_anonymous_id")}}class p{api;events;constructor(r){this.api=r;this.events=new o(r),this.initialize()}initialize(){this.events.trackPageView(),this.setupHistoryChange()}setupHistoryChange(){let{pushState:r,replaceState:t}=history;history.pushState=(...e)=>{r.apply(history,e),this.events.trackPageView()},history.replaceState=(...e)=>{t.apply(history,e),this.events.trackPageView()},window.addEventListener("popstate",()=>{this.events.trackPageView()})}}class m{events;session;identity;constructor(r){let t=new c(r);this.events=new o(t),this.session=new p(t),this.identity=new g(t)}getAnonymousId(){return this.identity.getAnonymousId()}getUserId(){return this.identity.getUserId()}identify(r){this.identity.identify(r)}trackPageView(){this.events.trackPageView()}trackEvent(r,t={}){this.events.trackCustomEvent(r,t)}trackPurchase(r){this.events.trackPurchase(r)}}var w=typeof window!=="undefined";document.addEventListener("DOMContentLoaded",()=>{if(!w)return;try{let r=document.querySelector("[data-up]").getAttribute("data-up")||"",t=document.querySelector("[data-up]").getAttribute("src")||"",a=new URL(t).origin+"/v1",d=new m({siteId:r,baseUrl:a});window.userpath=d,setTimeout(()=>{console.log(r,a,d)},1000)}catch(r){console.error(r)}});

package/examples/usage.ts

@@ -0,0 +1,83 @@
+// Example code showing how the client SDK should handle user identity resolution
+
+import { UserPath } from '../src';
+
+// Initialize the tracking SDK
+const userpath = new UserPath({
+	siteId: 'site_123', // Required
+	baseUrl: 'https://api.userpath.to/v1', // Optional
+});
+
+// When a user first visits the site, they get an anonymous ID
+// This is stored in local storage
+const anonymousId = userpath.getAnonymousId();
+console.log('Anonymous visitor ID:', anonymousId);
+
+// Example: Track a page view (this is done automatically on initialization)
+// But you can also track it manually if needed
+userpath.trackPageView();
+
+// Example: Track a custom event (like clicking the purchase button)
+function onPurchaseButtonClick() {
+	userpath.trackEvent('click_purchase', {
+		buttonId: 'purchase-btn',
+		plan: 'premium',
+	});
+}
+
+// Example: When user identifies themselves (e.g., signs up or logs in)
+function onUserIdentified(user: { id: string; email: string; name: string }) {
+	// Identify the user and connect them to their anonymous activity
+	userpath.identify({
+		userId: user.id,
+		email: user.email,
+		name: user.name,
+	});
+
+	console.log('User identified:', userpath.getUserId());
+}
+
+// Example: Track a purchase event
+function trackPurchase(purchaseDetails: {
+	productId: string;
+	price: number;
+	currency: string;
+	plan: string;
+	couponApplied?: string;
+}) {
+	userpath.trackPurchase({
+		productId: purchaseDetails.productId,
+		price: purchaseDetails.price,
+		currency: purchaseDetails.currency,
+		properties: {
+			plan: purchaseDetails.plan,
+			couponApplied: purchaseDetails.couponApplied,
+			// Include user identification if available
+			userId: userpath.getUserId(),
+			anonymousId: userpath.getAnonymousId(),
+		},
+	});
+}
+
+// Example usage flow:
+
+// 1. SDK is initialized and first pageview is tracked automatically
+
+// 2. User clicks purchase button while still anonymous
+onPurchaseButtonClick();
+
+// 3. User signs up or logs in
+onUserIdentified({
+	id: 'user_123',
+	email: 'john@example.com',
+	name: 'John Doe',
+});
+
+// 4. User completes a purchase (now as an identified user)
+trackPurchase({
+	productId: 'plan_premium',
+	price: 1337,
+	currency: 'USD',
+	plan: 'Premium Annual',
+	couponApplied: 'WELCOME20',
+});

package/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "userpath-js",
+	"version": "0.0.0",
+	"private": false,
+	"main": "dist/pixel.js",
+	"scripts": {
+		"dev": "bun build src/index.ts --outdir ./dist --watch",
+		"build": "bun build src/index.ts --outdir ./dist --minify",
+		"build.pixel": "bun build src/pixel.ts --outdir ./dist",
+		"build.pixel.prod": "bun build src/pixel.ts --outdir ./dist --minify",
+		"prepublish": "bun run build.pixel.prod"
+	},
+	"devDependencies": {
+		"bun-types": "latest",
+		"typescript": "^5.0.0"
+	}
+}

package/src/clients/api.ts

@@ -0,0 +1,92 @@
+import { memory } from '@userpath/core/browser';
+
+import { Config } from '../schemas/config';
+
+/**
+ * Base API client for UserPath SDK
+ */
+export class ApiClient {
+	protected baseUrl: string;
+	protected siteId: string;
+	protected queue: any[] = [];
+	protected flushInterval: number | null = null;
+
+	constructor(config: Config) {
+		this.baseUrl = config.baseUrl || '';
+		this.siteId = config.siteId;
+
+		// Set up automatic flushing
+		this.flushInterval = window.setInterval(() => this.flush(), 5000);
+	}
+
+	/**
+	 * Add an event to the queue and flush if needed
+	 */
+	public track(event: any): void {
+		this.queue.push(event);
+
+		if (this.queue.length >= 10) {
+			this.flush();
+		}
+	}
+
+	/**
+	 * Flush queued events to the server
+	 */
+	protected flush(): void {
+		if (this.queue.length === 0) return;
+
+		const eventsToSend = [...this.queue];
+		this.queue = [];
+
+		fetch(`${this.baseUrl}/events`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				siteId: this.siteId,
+				sessionId: this.getSessionId(),
+				timestamp: new Date().toISOString(),
+				userAgent: navigator.userAgent,
+				screenWidth: window.screen.width,
+				screenHeight: window.screen.height,
+				language: navigator.language,
+				timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+				events: eventsToSend,
+			}),
+			// Use beacon API for more reliable delivery
+			keepalive: true,
+		}).catch((error) => {
+			// If sending fails, add back to queue for retry
+			this.queue = [...eventsToSend, ...this.queue].slice(0, 100);
+			console.error('Error sending analytics data:', error);
+		});
+	}
+
+	/**
+	 * Get or generate a session ID
+	 */
+	protected getSessionId(): string {
+		let sessionId = memory.getItem<string>('session_id');
+		if (!sessionId) {
+			sessionId = this.generateId();
+			memory.setItem('session_id', sessionId);
+		}
+		return sessionId;
+	}
+
+	/**
+	 * Generate a UUID v4
+	 */
+	public generateId(): string {
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+			/[xy]/g,
+			function (c) {
+				const r = (Math.random() * 16) | 0;
+				const v = c === 'x' ? r : (r & 0x3) | 0x8;
+				return v.toString(16);
+			}
+		);
+	}
+}

package/src/clients/events.ts

@@ -0,0 +1,55 @@
+import { ApiClient } from './api';
+
+/**
+ * Events client for handling different types of tracking events
+ */
+export class EventsClient {
+	constructor(private api: ApiClient) {}
+
+	/**
+	 * Track a page view event
+	 */
+	public trackPageView(): void {
+		const event = {
+			type: 'pageview',
+			url: window.location.href,
+			referrer: document.referrer,
+			title: document.title,
+		};
+
+		this.api.track(event);
+	}
+
+	/**
+	 * Track a custom event
+	 */
+	public trackCustomEvent(
+		name: string,
+		properties: Record<string, any> = {}
+	): void {
+		const event = {
+			type: 'event',
+			name,
+			properties,
+		};
+
+		this.api.track(event);
+	}
+
+	/**
+	 * Track a purchase event
+	 */
+	public trackPurchase(params: {
+		productId: string;
+		price: number;
+		currency: string;
+		properties?: Record<string, any>;
+	}): void {
+		const event = {
+			type: 'purchase',
+			...params,
+		};
+
+		this.api.track(event);
+	}
+}

package/src/clients/identity.ts

@@ -0,0 +1,54 @@
+import { UserIdentity } from '../schemas/identity';
+import { ApiClient } from './api';
+
+/**
+ * Identity client for managing user identification
+ */
+export class IdentityClient {
+	private anonymousId: string | null = null;
+	private currentUser: UserIdentity | null = null;
+
+	constructor(private api: ApiClient) {
+		this.anonymousId = this.getStoredAnonymousId();
+	}
+
+	/**
+	 * Get the anonymous ID for the current visitor
+	 */
+	public getAnonymousId(): string {
+		if (!this.anonymousId) {
+			this.anonymousId = this.api.generateId();
+			localStorage.setItem('up_anonymous_id', this.anonymousId);
+		}
+		return this.anonymousId;
+	}
+
+	/**
+	 * Get the current identified user's ID if available
+	 */
+	public getUserId(): string | null {
+		return this.currentUser?.userId || null;
+	}
+
+	/**
+	 * Identify a user and associate them with their anonymous ID
+	 */
+	public identify(identity: UserIdentity): void {
+		// Store the current user
+		this.currentUser = identity;
+
+		// Track the identity mapping
+		this.api.track({
+			type: 'identify',
+			anonymousId: this.getAnonymousId(),
+			...identity,
+		});
+	}
+
+	/**
+	 * Get the stored anonymous ID if it exists
+	 */
+	private getStoredAnonymousId(): string | null {
+		return localStorage.getItem('up_anonymous_id');
+	}
+}

package/src/clients/session.ts

@@ -0,0 +1,47 @@
+import { ApiClient } from './api';
+import { EventsClient } from './events';
+
+/**
+ * Session client for managing user sessions and automatic tracking
+ */
+export class SessionClient {
+	private events: EventsClient;
+
+	constructor(private api: ApiClient) {
+		this.events = new EventsClient(api);
+		this.initialize();
+	}
+
+	/**
+	 * Initialize session tracking
+	 */
+	private initialize(): void {
+		// Track initial pageview
+		this.events.trackPageView();
+
+		// Set up history change tracking
+		this.setupHistoryChange();
+	}
+
+	/**
+	 * Set up tracking for history/navigation changes
+	 */
+	private setupHistoryChange(): void {
+		const originalPushState = history.pushState;
+		const originalReplaceState = history.replaceState;
+
+		history.pushState = (...args) => {
+			originalPushState.apply(history, args);
+			this.events.trackPageView();
+		};
+
+		history.replaceState = (...args) => {
+			originalReplaceState.apply(history, args);
+			this.events.trackPageView();
+		};
+
+		window.addEventListener('popstate', () => {
+			this.events.trackPageView();
+		});
+	}
+}

package/src/index.ts

@@ -0,0 +1,72 @@
+import { ApiClient } from './clients/api';
+import { EventsClient } from './clients/events';
+import { IdentityClient } from './clients/identity';
+import { SessionClient } from './clients/session';
+import { Config } from './schemas/config';
+import { UserIdentity } from './schemas/identity';
+
+export class UserPath {
+	private events: EventsClient;
+	private session: SessionClient;
+	private identity: IdentityClient;
+
+	constructor(config: Config) {
+		// Initialize clients
+		const baseClient = new ApiClient(config);
+		this.events = new EventsClient(baseClient);
+		this.session = new SessionClient(baseClient);
+		this.identity = new IdentityClient(baseClient);
+	}
+
+	/**
+	 * Get the anonymous ID for the current visitor
+	 */
+	public getAnonymousId(): string {
+		return this.identity.getAnonymousId();
+	}
+
+	/**
+	 * Get the current identified user's ID if available
+	 */
+	public getUserId(): string | null {
+		return this.identity.getUserId();
+	}
+
+	/**
+	 * Identify a user
+	 */
+	public identify(identity: UserIdentity): void {
+		this.identity.identify(identity);
+	}
+
+	/**
+	 * Track a page view event
+	 */
+	public trackPageView(): void {
+		this.events.trackPageView();
+	}
+
+	/**
+	 * Track a custom event
+	 */
+	public trackEvent(name: string, properties: Record<string, any> = {}): void {
+		this.events.trackCustomEvent(name, properties);
+	}
+
+	/**
+	 * Track a purchase event
+	 */
+	public trackPurchase(params: {
+		productId: string;
+		price: number;
+		currency: string;
+		properties?: Record<string, any>;
+	}): void {
+		this.events.trackPurchase(params);
+	}
+}
+
+// Export types
+export * from './schemas/events';
+export * from './schemas/config';
+export * from './schemas/identity';

package/src/pixel.ts

@@ -0,0 +1,28 @@
+import { UserPath } from './index';
+
+const isBrowser = typeof window !== 'undefined';
+
+document.addEventListener('DOMContentLoaded', () => {
+	if (!isBrowser) return;
+	try {
+		const siteId =
+			document!.querySelector('[data-up]')!.getAttribute('data-up') || '';
+		const src = document!.querySelector('[data-up]')!.getAttribute('src') || '';
+		const url = new URL(src);
+		const baseUrl = url.origin + '/v1';
+
+		const userpath = new UserPath({
+			siteId,
+			baseUrl,
+		});
+
+		// @ts-ignore
+		window.userpath = userpath;
+
+		setTimeout(() => {
+			console.log(siteId, baseUrl, userpath);
+		}, 1000);
+	} catch (err) {
+		console.error(err);
+	}
+});

package/src/schemas/config.ts

@@ -0,0 +1,4 @@
+export interface Config {
+	siteId: string;
+	baseUrl?: string;
+}

package/src/schemas/events.ts

@@ -0,0 +1,31 @@
+export interface PageViewEvent {
+	type: 'pageview';
+	url: string;
+	referrer: string;
+	title: string;
+}
+
+export interface CustomEvent {
+	type: 'event';
+	name: string;
+	properties: Record<string, any>;
+}
+
+export interface PurchaseEvent {
+	type: 'purchase';
+	productId: string;
+	price: number;
+	currency: string;
+	properties?: Record<string, any>;
+}
+
+export interface IdentifyEvent {
+	type: 'identify';
+	anonymousId: string;
+	userId: string;
+	email?: string;
+	name?: string;
+	properties?: Record<string, any>;
+}
+
+export type Event = PageViewEvent | CustomEvent | PurchaseEvent | IdentifyEvent;

package/src/schemas/identity.ts

@@ -0,0 +1,6 @@
+export interface UserIdentity {
+	userId: string;
+	email?: string;
+	name?: string;
+	properties?: Record<string, any>;
+}