@journium/react 1.2.0 → 1.3.0

package/dist/index.mjs

@@ -1,4 +1,7 @@
-import React, { createContext, useState, useEffect, useContext, useCallback } from 'react';
+import React, { createContext, useState, useMemo, useEffect, useContext, useCallback } from 'react';
+
+// @journium/js@1.3.0 is replaced at build time by @rollup/plugin-replace
+const SDK_VERSION$1 = '@journium/js@1.3.0';
 
 /**
  * uuidv7: A JavaScript implementation of UUID version 7
@@ -940,6 +943,7 @@ class JourniumClient {
         Logger.setDebug((_a = this.effectiveOptions.debug) !== null && _a !== void 0 ? _a : false);
     }
     buildIdentityProperties(userProperties = {}) {
+        var _a, _b;
         const identity = this.identityManager.getIdentity();
         const userAgentInfo = this.identityManager.getUserAgentInfo();
         return {
@@ -950,7 +954,7 @@ class JourniumClient {
             $current_url: typeof window !== 'undefined' ? window.location.href : '',
             $pathname: typeof window !== 'undefined' ? window.location.pathname : '',
             ...userAgentInfo,
-            $lib_version: '0.1.0', // TODO: Get from package.json
+            $sdk_version: (_b = (_a = this.config.options) === null || _a === void 0 ? void 0 : _a._sdkVersion) !== null && _b !== void 0 ? _b : 'unknown',
             $platform: 'web',
             ...userProperties,
         };
@@ -1091,7 +1095,7 @@ class PageviewTracker {
             $host: url.host,
             $pathname: url.pathname,
             $search: url.search,
-            $title: getPageTitle(),
+            $page_title: getPageTitle(),
             $referrer: getReferrer(),
             ...customProperties,
         };
@@ -1167,6 +1171,8 @@ class AutocaptureTracker {
             ignoreClasses: ['journium-ignore'],
             ignoreElements: ['script', 'style', 'noscript'],
             captureContentText: true,
+            dataAttributePrefixes: ['jrnm-'],
+            dataAttributeNames: ['data-testid', 'data-track'],
             ...options,
         };
     }
@@ -1188,6 +1194,8 @@ class AutocaptureTracker {
             ignoreClasses: ['journium-ignore'],
             ignoreElements: ['script', 'style', 'noscript'],
             captureContentText: true,
+            dataAttributePrefixes: ['jrnm-'],
+            dataAttributeNames: ['data-testid', 'data-track'],
             ...options,
         };
         // Restart if it was active before
@@ -1230,10 +1238,7 @@ class AutocaptureTracker {
                 return;
             }
             const properties = this.getElementProperties(target, 'click');
-            this.client.track('$autocapture', {
-                $event_type: 'click',
-                ...properties,
-            });
+            this.client.track('$autocapture', properties);
         };
         document.addEventListener('click', clickListener, true);
         this.listeners.set('click', clickListener);
@@ -1245,10 +1250,7 @@ class AutocaptureTracker {
                 return;
             }
             const properties = this.getFormProperties(target, 'submit');
-            this.client.track('$autocapture', {
-                $event_type: 'submit',
-                ...properties,
-            });
+            this.client.track('$autocapture', properties);
         };
         document.addEventListener('submit', submitListener, true);
         this.listeners.set('submit', submitListener);
@@ -1260,10 +1262,7 @@ class AutocaptureTracker {
                 return;
             }
             const properties = this.getInputProperties(target, 'change');
-            this.client.track('$autocapture', {
-                $event_type: 'change',
-                ...properties,
-            });
+            this.client.track('$autocapture', properties);
         };
         document.addEventListener('change', changeListener, true);
         this.listeners.set('change', changeListener);
@@ -1316,6 +1315,7 @@ class AutocaptureTracker {
     }
     getElementProperties(element, eventType) {
         const properties = {
+            $event_type: eventType,
             $element_tag: element.tagName.toLowerCase(),
             $element_type: this.getElementType(element),
         };
@@ -1325,6 +1325,7 @@ class AutocaptureTracker {
         }
         if (element.className) {
             properties.$element_classes = Array.from(element.classList);
+            properties.$element_semantic_classes = this.extractSemanticClasses(element.classList);
         }
         // Element attributes
         const relevantAttributes = ['name', 'role', 'aria-label', 'data-testid', 'data-track'];
@@ -1334,6 +1335,33 @@ class AutocaptureTracker {
                 properties[`$element_${attr.replace('-', '_')}`] = value;
             }
         });
+        // Configurable data-* attribute capture
+        const prefixes = this.options.dataAttributePrefixes || ['jrnm-'];
+        const exactNames = new Set(this.options.dataAttributeNames || ['data-testid', 'data-track']);
+        const relevantSet = new Set(relevantAttributes);
+        let dataAttrCount = 0;
+        for (let i = 0; i < element.attributes.length && dataAttrCount < 10; i++) {
+            const attr = element.attributes.item(i);
+            if (!attr || !attr.name.startsWith('data-'))
+                continue;
+            if (relevantSet.has(attr.name))
+                continue;
+            const suffix = attr.name.slice(5); // strip 'data-'
+            const matchesPrefix = prefixes.some(p => suffix.startsWith(p));
+            const matchesName = exactNames.has(attr.name);
+            if (matchesPrefix || matchesName) {
+                const propName = `$attr_${attr.name.replace(/-/g, '_')}`;
+                properties[propName] = attr.value;
+                dataAttrCount++;
+            }
+        }
+        // Link href as first-class property
+        if (element.tagName.toLowerCase() === 'a') {
+            const href = element.getAttribute('href');
+            if (href) {
+                properties.$element_href = href;
+            }
+        }
         // Element content
         if (this.options.captureContentText) {
             const text = this.getElementText(element);
@@ -1363,10 +1391,13 @@ class AutocaptureTracker {
                 properties.$parent_id = element.parentElement.id;
             }
         }
-        // URL information
+        // URL and page context
         properties.$current_url = window.location.href;
         properties.$host = window.location.host;
         properties.$pathname = window.location.pathname;
+        properties.$search = window.location.search;
+        properties.$page_title = document.title;
+        properties.$referrer = document.referrer;
         return properties;
     }
     getFormProperties(form, eventType) {
@@ -1515,6 +1546,38 @@ class AutocaptureTracker {
             ids: ids.reverse()
         };
     }
+    extractSemanticClasses(classList) {
+        const results = new Set();
+        for (let i = 0; i < classList.length; i++) {
+            const cls = classList.item(i);
+            if (!cls)
+                continue;
+            const parts = cls.split('__');
+            if (parts.length >= 3) {
+                // CSS module pattern: Module__hash__name → take last segment
+                const last = parts[parts.length - 1];
+                if (last)
+                    results.add(last);
+            }
+            else if (parts.length === 2) {
+                // 2-part __ class (e.g., Module__hash) → drop, no semantic name
+                continue;
+            }
+            else {
+                // Single-part class — keep unless it looks like a hash
+                if (!this.isHashLike(cls)) {
+                    results.add(cls);
+                }
+            }
+        }
+        return Array.from(results);
+    }
+    isHashLike(value) {
+        // Hash-like: alphanumeric, 5-10 chars, contains both letters and digits
+        return /^[a-zA-Z0-9]{5,10}$/.test(value)
+            && /[a-zA-Z]/.test(value)
+            && /[0-9]/.test(value);
+    }
     isSafeInputType(type) {
         // Don't capture values for sensitive input types
         const sensitiveTypes = ['password', 'email', 'tel', 'credit-card-number'];
@@ -1541,8 +1604,8 @@ class JourniumAnalytics {
         // This handles cached remote options or local options with autocapture enabled
         this.startAutocaptureIfEnabled(initialEffectiveOptions);
     }
-    resolvePageviewOptions(autoTrackPageviews) {
-        if (autoTrackPageviews === false) {
+    resolvePageviewOptions(autoTrackPageviews, frameworkHandlesPageviews) {
+        if (autoTrackPageviews === false || frameworkHandlesPageviews) {
             return { enabled: false, trackSpaPageviews: false, captureInitialPageview: false };
         }
         if (autoTrackPageviews === true || autoTrackPageviews === undefined) {
@@ -1596,7 +1659,7 @@ class JourniumAnalytics {
         // Only start if effectiveOptions are actually loaded (non-empty)
         const hasOptions = effectiveOptions && Object.keys(effectiveOptions).length > 0;
         const { enabled: autoTrackPageviews, trackSpaPageviews, captureInitialPageview } = hasOptions
-            ? this.resolvePageviewOptions(effectiveOptions.autoTrackPageviews)
+            ? this.resolvePageviewOptions(effectiveOptions.autoTrackPageviews, effectiveOptions._frameworkHandlesPageviews)
             : { enabled: false, trackSpaPageviews: false, captureInitialPageview: false };
         const autocaptureEnabled = hasOptions
             ? effectiveOptions.autocapture !== false
@@ -1632,7 +1695,7 @@ class JourniumAnalytics {
         const hasActualOptions = effectiveOptions && Object.keys(effectiveOptions).length > 0;
         if (hasActualOptions) {
             // Use same logic as manual startAutocapture() but only start automatically
-            const { enabled: autoTrackPageviews, trackSpaPageviews, captureInitialPageview } = this.resolvePageviewOptions(effectiveOptions.autoTrackPageviews);
+            const { enabled: autoTrackPageviews, trackSpaPageviews, captureInitialPageview } = this.resolvePageviewOptions(effectiveOptions.autoTrackPageviews, effectiveOptions._frameworkHandlesPageviews);
             const autocaptureEnabled = effectiveOptions.autocapture !== false;
             // Update autocapture tracker options
             const autocaptureOptions = this.resolveAutocaptureOptions(effectiveOptions.autocapture);
@@ -1663,7 +1726,7 @@ class JourniumAnalytics {
             this.autocaptureTracker.stop();
             this.autocaptureStarted = false;
         }
-        const { enabled: autoTrackPageviews, trackSpaPageviews, captureInitialPageview } = this.resolvePageviewOptions(effectiveOptions.autoTrackPageviews);
+        const { enabled: autoTrackPageviews, trackSpaPageviews, captureInitialPageview } = this.resolvePageviewOptions(effectiveOptions.autoTrackPageviews, effectiveOptions._frameworkHandlesPageviews);
         const autocaptureEnabled = effectiveOptions.autocapture !== false;
         const autocaptureOptions = this.resolveAutocaptureOptions(effectiveOptions.autocapture);
         this.autocaptureTracker.updateOptions(autocaptureOptions);
@@ -1701,9 +1764,20 @@ class JourniumAnalytics {
 }
 /** Create and return a new JourniumAnalytics instance for the given config. */
 const init = (config) => {
+    var _a;
+    // Set SDK version if not already set by a framework SDK (React, Next.js, Angular)
+    if (!((_a = config.options) === null || _a === void 0 ? void 0 : _a._sdkVersion)) {
+        config = {
+            ...config,
+            options: { ...config.options, _sdkVersion: SDK_VERSION$1 },
+        };
+    }
     return new JourniumAnalytics(config);
 };
 
+// @journium/react@1.3.0 is replaced at build time by @rollup/plugin-replace
+const SDK_VERSION = '@journium/react@1.3.0';
+
 const JourniumContext = createContext(undefined);
 /**
  * Provides the Journium analytics instance to the React tree.
@@ -1713,8 +1787,12 @@ const JourniumContext = createContext(undefined);
 const JourniumProvider = ({ children, config, }) => {
     const [analytics, setAnalytics] = useState(null);
     const [effectiveOptions, setEffectiveOptions] = useState(null);
+    const configWithSdk = useMemo(() => ({
+        ...config,
+        options: { _sdkVersion: SDK_VERSION, ...config.options },
+    }), [config]);
     useEffect(() => {
-        const analyticsInstance = init(config);
+        const analyticsInstance = init(configWithSdk);
         // Get initial effective options (may be empty during remote-first initialization)
         const initialEffective = analyticsInstance.getEffectiveOptions();
         setEffectiveOptions(initialEffective);
@@ -1734,7 +1812,7 @@ const JourniumProvider = ({ children, config, }) => {
             setAnalytics(null);
             setEffectiveOptions(null);
         };
-    }, [config]);
+    }, [configWithSdk]);
     return (React.createElement(JourniumContext.Provider, { value: { analytics, config, effectiveOptions } }, children));
 };
 /**