@v-tilt/browser 1.0.6 → 1.0.7

package/lib/tracking.js

@@ -4,7 +4,7 @@ exports.TrackingManager = void 0;
 const session_1 = require("./session");
 const user_manager_1 = require("./user-manager");
 const utils_1 = require("./utils");
-const geolocation_1 = require("./geolocation");
+const event_utils_1 = require("./utils/event-utils");
 const globals_1 = require("./utils/globals");
 class TrackingManager {
     constructor(config) {
@@ -53,6 +53,9 @@ class TrackingManager {
     }
     /**
      * Send event to endpoint
+     * PostHog-style: Automatically adds common properties to all events
+     * ($current_url, $host, $pathname, $referrer, $referring_domain, $browser_language, etc.)
+     * Also adds title property for $pageview events only
      */
     async sendEvent(name, payload) {
         this.sessionManager.setSessionId();
@@ -64,9 +67,26 @@ class TrackingManager {
             return;
         }
         const url = this.buildUrl();
+        // Add properties to all events (PostHog-style)
+        // This includes: $current_url, $host, $pathname, $referrer, $referring_domain, $browser_language, etc.
+        const eventProperties = (0, event_utils_1.getEventProperties)();
+        // Get session and window IDs (PostHog-style)
+        // Both methods ensure IDs always exist (generate if needed)
+        const session_id = this.sessionManager.getSessionId();
+        const window_id = this.sessionManager.getWindowId();
+        const enrichedPayload = {
+            ...eventProperties, // Base properties for all events
+            $session_id: session_id, // PostHog-style: session ID in properties
+            $window_id: window_id, // PostHog-style: window ID in properties
+            ...payload, // User-provided payload (can override base properties)
+        };
+        // Add title only to $pageview events (PostHog-style)
+        if (name === "$pageview" && globals_1.document) {
+            enrichedPayload.title = globals_1.document.title;
+        }
         let processedPayload;
         if (this.config.stringifyPayload !== false) {
-            processedPayload = (0, utils_1.maskSuspiciousAttributes)(payload);
+            processedPayload = (0, utils_1.maskSuspiciousAttributes)(enrichedPayload);
             processedPayload = Object.assign({}, JSON.parse(processedPayload), this.config.globalAttributes);
             processedPayload = JSON.stringify(processedPayload);
             if (!(0, utils_1.isValidPayload)(processedPayload)) {
@@ -74,20 +94,19 @@ class TrackingManager {
             }
         }
         else {
-            processedPayload = Object.assign({}, payload, this.config.globalAttributes);
+            processedPayload = Object.assign({}, enrichedPayload, this.config.globalAttributes);
             const maskedStr = (0, utils_1.maskSuspiciousAttributes)(processedPayload);
             if (!(0, utils_1.isValidPayload)(maskedStr)) {
                 return;
             }
             processedPayload = JSON.parse(maskedStr);
         }
-        const session_id = this.sessionManager.getSessionId() || (0, utils_1.uuidv4)();
+        // session_id is already in payload as $session_id (PostHog-style)
         const distinct_id = this.userManager.getDistinctId();
         const anonymous_id = this.userManager.getAnonymousId();
         const trackingEvent = {
             timestamp: new Date().toISOString(),
             event: name,
-            session_id,
             tenant_id: this.config.projectId || "",
             domain: this.config.domain || this.getCurrentDomain(), // Use config domain or current domain
             payload: processedPayload,
@@ -148,44 +167,6 @@ class TrackingManager {
     _send_retriable_request(item) {
         this.sendRequest(item.url, item.event, false);
     }
-    /**
-     * Track page hit
-     * Based on PostHog's pageview tracking
-     *
-     * @param navigationType - Type of navigation that triggered the pageview
-     */
-    trackPageHit(navigationType) {
-        // If test environment
-        if ((0, utils_1.isTestEnvironment)()) {
-            return;
-        }
-        // Only track page hits in browser environment (not SSR)
-        if (!globals_1.window || !globals_1.document || !globals_1.navigator || !globals_1.location) {
-            return;
-        }
-        const { country, locale } = (0, geolocation_1.getCountryAndLocale)();
-        // Wait a bit for SPA routers
-        setTimeout(() => {
-            // Double-check we're still in browser environment (defensive check)
-            if (!globals_1.window || !globals_1.document || !globals_1.navigator || !globals_1.location) {
-                return;
-            }
-            const payload = {
-                "user-agent": globals_1.navigator.userAgent,
-                locale,
-                location: country,
-                referrer: globals_1.document.referrer,
-                pathname: globals_1.location.pathname,
-                href: globals_1.location.href,
-                title: globals_1.document.title, // Include title like PostHog
-            };
-            // Include navigation_type if provided (PostHog-style)
-            if (navigationType) {
-                payload.navigation_type = navigationType;
-            }
-            this.sendEvent("page_hit", payload);
-        }, 300);
-    }
     /**
      * Get current session ID
      */
@@ -279,74 +260,79 @@ class TrackingManager {
             this.sendAliasEvent(aliasEvent);
         });
     }
+    /**
+     * Get session and window IDs (PostHog-style)
+     * Both methods ensure IDs always exist (generate if needed)
+     */
+    _getSessionAndWindowIds() {
+        return {
+            session_id: this.sessionManager.getSessionId(),
+            window_id: this.sessionManager.getWindowId(),
+        };
+    }
+    /**
+     * Create base tracking event structure
+     */
+    _createTrackingEvent(event, payload, distinct_id) {
+        return {
+            timestamp: new Date().toISOString(),
+            event,
+            tenant_id: this.config.projectId || "",
+            domain: this.config.domain || this.getCurrentDomain(),
+            payload,
+            distinct_id,
+        };
+    }
     /**
      * Send identify event for session merging
      */
     sendIdentifyEvent(distinctId, anonymousId, deviceId, properties) {
-        const url = this.buildUrl();
-        const session_id = this.sessionManager.getSessionId() || (0, utils_1.uuidv4)();
+        const { session_id, window_id } = this._getSessionAndWindowIds();
         // Payload contains only properties, not event or distinct_id (those are in trackingEvent)
+        // Add $session_id and $window_id to payload (PostHog-style)
         const identifyPayload = {
+            $session_id: session_id,
+            $window_id: window_id,
             $anon_distinct_id: anonymousId,
             $device_id: deviceId,
             ...properties,
         };
-        const trackingEvent = {
-            timestamp: new Date().toISOString(),
-            event: "$identify",
-            session_id,
-            tenant_id: this.config.projectId || "",
-            domain: this.config.domain || this.getCurrentDomain(),
-            payload: identifyPayload,
-            distinct_id: distinctId,
-        };
-        this.sendRequest(url, trackingEvent, true);
+        const trackingEvent = this._createTrackingEvent("$identify", identifyPayload, distinctId);
+        this.sendRequest(this.buildUrl(), trackingEvent, true);
     }
     /**
      * Send $set event for property updates (PostHog behavior)
      * This notifies Tinybird when user properties are updated
      */
     sendSetEvent(userPropertiesToSet, userPropertiesToSetOnce) {
-        const url = this.buildUrl();
-        const session_id = this.sessionManager.getSessionId() || (0, utils_1.uuidv4)();
+        const { session_id, window_id } = this._getSessionAndWindowIds();
         const distinct_id = this.userManager.getDistinctId();
         const anonymous_id = this.userManager.getAnonymousId();
+        // Add $session_id and $window_id to payload (PostHog-style)
         const setEventPayload = {
+            $session_id: session_id,
+            $window_id: window_id,
             $set: userPropertiesToSet || {},
             $set_once: userPropertiesToSetOnce || {},
         };
-        const trackingEvent = {
-            timestamp: new Date().toISOString(),
-            event: "$set",
-            session_id,
-            tenant_id: this.config.projectId || "",
-            domain: this.config.domain || this.getCurrentDomain(),
-            payload: setEventPayload,
-            distinct_id: distinct_id || anonymous_id,
-        };
-        this.sendRequest(url, trackingEvent, true);
+        const trackingEvent = this._createTrackingEvent("$set", setEventPayload, distinct_id || anonymous_id);
+        this.sendRequest(this.buildUrl(), trackingEvent, true);
     }
     /**
      * Send alias event for identity linking
      * PostHog format: { alias: alias, distinct_id: original }
      */
     sendAliasEvent(aliasEvent) {
-        const url = this.buildUrl();
-        const session_id = this.sessionManager.getSessionId() || (0, utils_1.uuidv4)();
+        const { session_id, window_id } = this._getSessionAndWindowIds();
+        // Add $session_id and $window_id to payload (PostHog-style)
         const aliasPayload = {
+            $session_id: session_id,
+            $window_id: window_id,
             $original_id: aliasEvent.original,
             $alias_id: aliasEvent.distinct_id,
         };
-        const trackingEvent = {
-            timestamp: new Date().toISOString(),
-            event: "$alias",
-            session_id,
-            tenant_id: this.config.projectId || "",
-            domain: this.config.domain || this.getCurrentDomain(),
-            payload: aliasPayload,
-            distinct_id: aliasEvent.distinct_id,
-        };
-        this.sendRequest(url, trackingEvent, true);
+        const trackingEvent = this._createTrackingEvent("$alias", aliasPayload, aliasEvent.distinct_id);
+        this.sendRequest(this.buildUrl(), trackingEvent, true);
     }
 }
 exports.TrackingManager = TrackingManager;

package/lib/types.d.ts

@@ -1,6 +1,7 @@
 export interface VTiltConfig {
     projectId: string;
     token: string;
+    name?: string;
     host?: string;
     scriptHost?: string;
     proxy?: string;
@@ -35,7 +36,6 @@ export interface EventPayload {
 export interface TrackingEvent {
     timestamp: string;
     event: string;
-    session_id: string;
     tenant_id: string;
     domain: string;
     payload: EventPayload;

package/lib/utils/event-utils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Get browser language (PostHog-style)
+ * Returns the browser's language setting (e.g., "en-US")
+ */
+export declare function getBrowserLanguage(): string | undefined;
+/**
+ * Get browser language prefix (PostHog-style)
+ * Returns the language code without region (e.g., "en" from "en-US")
+ */
+export declare function getBrowserLanguagePrefix(): string | undefined;
+/**
+ * Get referrer (PostHog-style)
+ * Returns document.referrer or '$direct' if no referrer
+ */
+export declare function getReferrer(): string;
+/**
+ * Get referring domain (PostHog-style)
+ * Returns the hostname of the referrer URL or '$direct' if no referrer
+ */
+export declare function getReferringDomain(): string;
+/**
+ * Get timezone (PostHog-style)
+ * Returns the timezone (e.g., "America/New_York")
+ */
+export declare function getTimezone(): string | undefined;
+/**
+ * Get timezone offset (PostHog-style)
+ * Returns the timezone offset in minutes
+ */
+export declare function getTimezoneOffset(): number | undefined;
+/**
+ * Get event properties that should be added to all events (PostHog-style)
+ * Matches PostHog's getEventProperties() implementation
+ */
+export declare function getEventProperties(): Record<string, any>;

package/lib/utils/event-utils.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBrowserLanguage = getBrowserLanguage;
+exports.getBrowserLanguagePrefix = getBrowserLanguagePrefix;
+exports.getReferrer = getReferrer;
+exports.getReferringDomain = getReferringDomain;
+exports.getTimezone = getTimezone;
+exports.getTimezoneOffset = getTimezoneOffset;
+exports.getEventProperties = getEventProperties;
+const globals_1 = require("./globals");
+const user_agent_utils_1 = require("./user-agent-utils");
+// Library version - should match package.json version
+const LIB_VERSION = "1.0.7"; // TODO: Auto-import from package.json
+/**
+ * Get browser language (PostHog-style)
+ * Returns the browser's language setting (e.g., "en-US")
+ */
+function getBrowserLanguage() {
+    if (typeof globals_1.navigator === "undefined") {
+        return undefined;
+    }
+    return (globals_1.navigator.language || // Any modern browser
+        globals_1.navigator.userLanguage // IE11
+    );
+}
+/**
+ * Get browser language prefix (PostHog-style)
+ * Returns the language code without region (e.g., "en" from "en-US")
+ */
+function getBrowserLanguagePrefix() {
+    const lang = getBrowserLanguage();
+    return typeof lang === "string" ? lang.split("-")[0] : undefined;
+}
+/**
+ * Get referrer (PostHog-style)
+ * Returns document.referrer or '$direct' if no referrer
+ */
+function getReferrer() {
+    return (globals_1.document === null || globals_1.document === void 0 ? void 0 : globals_1.document.referrer) || "$direct";
+}
+/**
+ * Get referring domain (PostHog-style)
+ * Returns the hostname of the referrer URL or '$direct' if no referrer
+ */
+function getReferringDomain() {
+    if (!(globals_1.document === null || globals_1.document === void 0 ? void 0 : globals_1.document.referrer)) {
+        return "$direct";
+    }
+    try {
+        const url = new URL(globals_1.document.referrer);
+        return url.host || "$direct";
+    }
+    catch (_a) {
+        return "$direct";
+    }
+}
+/**
+ * Get timezone (PostHog-style)
+ * Returns the timezone (e.g., "America/New_York")
+ */
+function getTimezone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+/**
+ * Get timezone offset (PostHog-style)
+ * Returns the timezone offset in minutes
+ */
+function getTimezoneOffset() {
+    try {
+        return new Date().getTimezoneOffset();
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+/**
+ * Generate insert ID for deduplication (PostHog-style)
+ */
+function generateInsertId() {
+    return (Math.random().toString(36).substring(2, 10) +
+        Math.random().toString(36).substring(2, 10));
+}
+/**
+ * Get event properties that should be added to all events (PostHog-style)
+ * Matches PostHog's getEventProperties() implementation
+ */
+function getEventProperties() {
+    const props = {};
+    if (!globals_1.userAgent) {
+        return props;
+    }
+    // Device/OS properties
+    const [os_name, os_version] = (0, user_agent_utils_1.detectOS)(globals_1.userAgent);
+    if (os_name) {
+        props.$os = os_name;
+    }
+    if (os_version) {
+        props.$os_version = os_version;
+    }
+    const browser = (0, user_agent_utils_1.detectBrowser)(globals_1.userAgent, globals_1.navigator === null || globals_1.navigator === void 0 ? void 0 : globals_1.navigator.vendor);
+    if (browser) {
+        props.$browser = browser;
+    }
+    const browserVersion = (0, user_agent_utils_1.detectBrowserVersion)(globals_1.userAgent, globals_1.navigator === null || globals_1.navigator === void 0 ? void 0 : globals_1.navigator.vendor);
+    if (browserVersion) {
+        props.$browser_version = browserVersion;
+    }
+    const device = (0, user_agent_utils_1.detectDevice)(globals_1.userAgent);
+    if (device) {
+        props.$device = device;
+    }
+    const deviceType = (0, user_agent_utils_1.detectDeviceType)(globals_1.userAgent);
+    if (deviceType) {
+        props.$device_type = deviceType;
+    }
+    // Timezone properties
+    const timezone = getTimezone();
+    if (timezone) {
+        props.$timezone = timezone;
+    }
+    const timezoneOffset = getTimezoneOffset();
+    if (timezoneOffset !== undefined) {
+        props.$timezone_offset = timezoneOffset;
+    }
+    // URL properties (added to all events)
+    if (globals_1.location) {
+        props.$current_url = globals_1.location.href;
+        props.$host = globals_1.location.host;
+        props.$pathname = globals_1.location.pathname;
+    }
+    // User agent
+    if (globals_1.userAgent) {
+        props.$raw_user_agent =
+            globals_1.userAgent.length > 1000 ? globals_1.userAgent.substring(0, 997) + "..." : globals_1.userAgent;
+    }
+    // Browser language (added to all events)
+    const browserLanguage = getBrowserLanguage();
+    const browserLanguagePrefix = getBrowserLanguagePrefix();
+    if (browserLanguage) {
+        props.$browser_language = browserLanguage;
+    }
+    if (browserLanguagePrefix) {
+        props.$browser_language_prefix = browserLanguagePrefix;
+    }
+    // Screen/viewport properties
+    if (globals_1.window === null || globals_1.window === void 0 ? void 0 : globals_1.window.screen) {
+        if (globals_1.window.screen.height) {
+            props.$screen_height = globals_1.window.screen.height;
+        }
+        if (globals_1.window.screen.width) {
+            props.$screen_width = globals_1.window.screen.width;
+        }
+    }
+    if (globals_1.window) {
+        if (globals_1.window.innerHeight) {
+            props.$viewport_height = globals_1.window.innerHeight;
+        }
+        if (globals_1.window.innerWidth) {
+            props.$viewport_width = globals_1.window.innerWidth;
+        }
+    }
+    // Library info
+    props.$lib = "web";
+    props.$lib_version = LIB_VERSION;
+    // Insert ID for deduplication
+    props.$insert_id = generateInsertId();
+    // Timestamp (epoch time in seconds)
+    props.$time = Date.now() / 1000;
+    // Referrer properties (added to all events)
+    props.$referrer = getReferrer();
+    props.$referring_domain = getReferringDomain();
+    return props;
+}

package/lib/utils/user-agent-utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * This function detects which browser is running this script.
+ * The order of the checks are important since many user agents
+ * include keywords used in later checks.
+ */
+export declare const detectBrowser: (user_agent: string, vendor: string | undefined) => string;
+/**
+ * This function detects which browser version is running this script,
+ * parsing major and minor version (e.g., 42.1). User agent strings from:
+ * http://www.useragentstring.com/pages/useragentstring.php
+ *
+ * `navigator.vendor` is passed in and used to help with detecting certain browsers
+ * NB `navigator.vendor` is deprecated and not present in every browser
+ */
+export declare const detectBrowserVersion: (userAgent: string, vendor: string | undefined) => number | null;
+export declare const detectOS: (user_agent: string) => [string, string];
+export declare const detectDevice: (user_agent: string) => string;
+export declare const detectDeviceType: (user_agent: string) => string;