@usermaven/nextjs 1.3.3 → 1.4.0

package/lib/index.es.js

@@ -798,6 +798,14 @@ function _findClosestLink(element) {
     }
     return null;
 }
+function _cleanObject(obj) {
+    for (var propName in obj) {
+        if (obj[propName] === '' || obj[propName] === null || obj[propName] === undefined || (typeof obj[propName] === 'object' && Object.keys(obj[propName]).length === 0)) {
+            delete obj[propName];
+        }
+    }
+    return obj;
+}
 
 /*
  * Get the className of an element, accounting for edge cases where element.className is an object
@@ -1407,10 +1415,131 @@ var autocapture = {
 _bind_instance_methods(autocapture);
 _safewrap_instance_methods(autocapture);
 
+var FormTracking = /** @class */ (function () {
+    function FormTracking(instance, trackingType) {
+        if (trackingType === void 0) { trackingType = 'all'; }
+        this.instance = instance;
+        this.trackingType = trackingType;
+        // Wait for the DOM to be ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', this.track.bind(this));
+        }
+        else {
+            this.track();
+        }
+    }
+    /**
+     * Track form submit
+     * @description this function will be called on every form submit event to track form submit
+     */
+    FormTracking.prototype.track = function () {
+        var _this = this;
+        this.formElements = document.querySelectorAll('form');
+        if (this.trackingType === 'tagged') {
+            this.formElements = document.querySelectorAll('form[data-um-form]');
+        }
+        this.formElements.forEach(function (form) {
+            form.addEventListener('submit', function (event) {
+                var form = event.target;
+                var props = _this._getFormDetails(form);
+                _this.instance.capture('$form', _cleanObject(props));
+            });
+        });
+    };
+    FormTracking.getInstance = function (instance, trackingType) {
+        if (trackingType === void 0) { trackingType = 'all'; }
+        if (!FormTracking.instance) {
+            FormTracking.instance = new FormTracking(instance, trackingType);
+        }
+        return FormTracking.instance;
+    };
+    FormTracking.prototype._getFormDetails = function (form) {
+        var _this = this;
+        var formDetails = {
+            form_id: form.id,
+            form_name: form.name || '',
+            form_action: form.action,
+            form_method: form.method,
+        };
+        var formFields = form.querySelectorAll('input, select, textarea');
+        // ignore form fields with class um-no-capture
+        var filteredFormFields = Array.from(formFields).filter(function (field) { return !field.classList.contains('um-no-capture'); });
+        filteredFormFields.forEach(function (field, index) {
+            var fieldProps = _this._getFieldProps(field, index);
+            Object.assign(formDetails, fieldProps);
+        });
+        return formDetails;
+    };
+    FormTracking.prototype._getFieldProps = function (field, index) {
+        var _a;
+        var fieldDataAttributes = Object.keys(field.dataset).length ? JSON.stringify(field.dataset) : undefined;
+        var safeValue = this.getSafeText(field);
+        return _a = {},
+            _a["field_" + (index + 1) + "_tag"] = field.tagName.toLowerCase(),
+            _a["field_" + (index + 1) + "_type"] = field instanceof HTMLInputElement ? field.type : undefined,
+            _a["field_" + (index + 1) + "_data_attributes"] = fieldDataAttributes,
+            _a["field_" + (index + 1) + "_id"] = field.id,
+            _a["field_" + (index + 1) + "_value"] = safeValue,
+            _a["field_" + (index + 1) + "_class"] = field.className,
+            _a["field_" + (index + 1) + "_name"] = field.name,
+            _a;
+    };
+    FormTracking.prototype.getSafeText = function (element) {
+        var safeText = '';
+        if ('value' in element && element.type !== "password") {
+            safeText = element.value;
+        }
+        else if (element.hasChildNodes()) {
+            var textNodes = Array.from(element.childNodes).filter(function (node) { return node.nodeType === Node.TEXT_NODE; });
+            safeText = textNodes.map(function (node) { return node.textContent; }).join('');
+        }
+        else {
+            safeText = element.textContent || '';
+        }
+        return this._scrubPotentiallySensitiveValues(safeText);
+    };
+    FormTracking.prototype._scrubPotentiallySensitiveValues = function (text) {
+        if (!this._shouldCaptureValue(text)) {
+            return '<redacted>';
+        }
+        return text;
+    };
+    FormTracking.prototype._shouldCaptureValue = function (value) {
+        if (this._isNullish(value)) {
+            return false;
+        }
+        if (this._isString(value)) {
+            value = this._trim(value);
+            // check to see if input value looks like a credit card number
+            // see: https://www.safaribooksonline.com/library/view/regular-expressions-cookbook/9781449327453/ch04s20.html
+            var ccRegex = /^(?:(4[0-9]{12}(?:[0-9]{3})?)|(5[1-5][0-9]{14})|(6(?:011|5[0-9]{2})[0-9]{12})|(3[47][0-9]{13})|(3(?:0[0-5]|[68][0-9])[0-9]{11})|((?:2131|1800|35[0-9]{3})[0-9]{11}))$/;
+            if (ccRegex.test((value || '').replace(/[- ]/g, ''))) {
+                return false;
+            }
+            // check to see if input value looks like a social security number
+            var ssnRegex = /(^\d{3}-?\d{2}-?\d{4}$)/;
+            if (ssnRegex.test(value)) {
+                return false;
+            }
+        }
+        return true;
+    };
+    FormTracking.prototype._isNullish = function (value) {
+        return value === null || value === undefined;
+    };
+    FormTracking.prototype._isString = function (value) {
+        return typeof value === 'string' || value instanceof String;
+    };
+    FormTracking.prototype._trim = function (value) {
+        return value.trim().replace(/^\s+|\s+$/g, '');
+    };
+    return FormTracking;
+}());
+
 var VERSION_INFO = {
     env: 'production',
-    date: '2024-02-28T06:06:37.148Z',
-    version: '1.3.3'
+    date: '2024-05-21T10:41:05.452Z',
+    version: '1.4.0'
 };
 var USERMAVEN_VERSION = VERSION_INFO.version + "/" + VERSION_INFO.env + "@" + VERSION_INFO.date;
 var MAX_AGE_TEN_YEARS = 31622400 * 10;
@@ -1765,6 +1894,7 @@ var UsermavenClientImpl = /** @class */ (function () {
         this.randomizeUrl = false;
         this.namespace = "usermaven";
         this.crossDomainLinking = true;
+        this.formTracking = false;
         this.domains = [];
         this.apiKey = "";
         this.initialized = false;
@@ -2083,7 +2213,7 @@ var UsermavenClientImpl = /** @class */ (function () {
     };
     UsermavenClientImpl.prototype.init = function (options) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (isWindowAvailable() && !options.force_use_fetch) {
             if (options.fetch) {
                 getLogger().warn("Custom fetch implementation is provided to Usermaven. However, it will be ignored since Usermaven runs in browser");
@@ -2143,6 +2273,7 @@ var UsermavenClientImpl = /** @class */ (function () {
         this.cookieDomain = options.cookie_domain || getCookieDomain();
         this.namespace = options.namespace || "usermaven";
         this.crossDomainLinking = (_a = options.cross_domain_linking) !== null && _a !== void 0 ? _a : true;
+        this.formTracking = (_b = options.form_tracking) !== null && _b !== void 0 ? _b : false;
         this.domains = options.domains ? (options.domains).split(',').map(function (domain) { return domain.trim(); }) : [];
         this.trackingHost = getHostWithProtocol(options["tracking_host"] || "t.usermaven.com");
         this.randomizeUrl = options.randomize_url || false;
@@ -2169,8 +2300,8 @@ var UsermavenClientImpl = /** @class */ (function () {
             var restored = this.propsPersistance.restore();
             if (restored) {
                 this.permanentProperties = restored;
-                this.permanentProperties.globalProps = (_b = restored.globalProps) !== null && _b !== void 0 ? _b : {};
-                this.permanentProperties.propsPerEvent = (_c = restored.propsPerEvent) !== null && _c !== void 0 ? _c : {};
+                this.permanentProperties.globalProps = (_c = restored.globalProps) !== null && _c !== void 0 ? _c : {};
+                this.permanentProperties.propsPerEvent = (_d = restored.propsPerEvent) !== null && _d !== void 0 ? _d : {};
             }
             getLogger().debug("Restored persistent properties", this.permanentProperties);
         }
@@ -2187,6 +2318,7 @@ var UsermavenClientImpl = /** @class */ (function () {
         getLogger().debug('Default Configuration', this.config);
         // this.manageSession(this.config);
         this.manageAutoCapture(this.config);
+        this.manageFormTracking(this.config);
         this.manageCrossDomainLinking({
             cross_domain_linking: this.crossDomainLinking,
             domains: this.domains,
@@ -2221,8 +2353,8 @@ var UsermavenClientImpl = /** @class */ (function () {
             enableAutoPageviews(this);
         }
         this.retryTimeout = [
-            (_d = options.min_send_timeout) !== null && _d !== void 0 ? _d : this.retryTimeout[0],
-            (_e = options.max_send_timeout) !== null && _e !== void 0 ? _e : this.retryTimeout[1],
+            (_e = options.min_send_timeout) !== null && _e !== void 0 ? _e : this.retryTimeout[0],
+            (_f = options.max_send_timeout) !== null && _f !== void 0 ? _f : this.retryTimeout[1],
         ];
         if (!!options.max_send_attempts) {
             this.maxSendAttempts = options.max_send_attempts;
@@ -2363,6 +2495,18 @@ var UsermavenClientImpl = /** @class */ (function () {
             autocapture.init(this, options);
         }
     };
+    /**
+     * Manage form tracking
+     */
+    UsermavenClientImpl.prototype.manageFormTracking = function (options) {
+        if (!isWindowAvailable() || !this.formTracking || this.formTracking === "none") {
+            return;
+        }
+        getLogger().debug('Form tracking enabled...');
+        // all and true are the same
+        var trackingType = this.formTracking === true ? 'all' : this.formTracking;
+        FormTracking.getInstance(this, trackingType).track();
+    };
     /**
      * Capture an event. This is the most important and
      * frequently used usermaven function.
@@ -2403,12 +2547,16 @@ var UsermavenClientImpl = /** @class */ (function () {
         if (event_name === '$scroll') {
             this.track(event_name, data.properties);
         }
+        // send event if the event is $form
+        if (event_name === '$form') {
+            this.track(event_name, data.properties);
+        }
     };
     UsermavenClientImpl.prototype._calculate_event_properties = function (event_name, event_properties) {
         var _a, _b;
         // set defaults
         var properties = event_properties || {};
-        if (event_name === '$snapshot' || event_name === '$scroll') {
+        if (event_name === '$snapshot' || event_name === '$scroll' || event_name === '$form') {
             return properties;
         }
         if (_isArray(this.propertyBlacklist)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usermaven/nextjs",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Usermaven JavaScript SDK for NextJS",
   "author": "Usermaven <hello@usermaven.com>",
   "license": "MIT",