clarity-js 0.7.9 → 0.7.12

package/build/clarity.js

@@ -47,6 +47,7 @@ var metadata$1 = /*#__PURE__*/Object.freeze({
     get id () { return id; },
     get metadata () { return metadata; },
     get save () { return save; },
+    get shortid () { return shortid; },
     get start () { return start$9; },
     get stop () { return stop$8; }
 });
@@ -140,7 +141,7 @@ function api(method) {
 }
 
 var startTime = 0;
-function start$G() {
+function start$H() {
     startTime = performance.now();
 }
 function time(event) {
@@ -148,11 +149,11 @@ function time(event) {
     var ts = event && event.timeStamp > 0 ? event.timeStamp : performance.now();
     return Math.max(Math.round(ts - startTime), 0);
 }
-function stop$D() {
+function stop$E() {
     startTime = 0;
 }
 
-var version$1 = "0.7.9";
+var version$1 = "0.7.12";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -353,18 +354,18 @@ function redact$1(value) {
     return array ? array.join("" /* Data.Constant.Empty */) : value;
 }
 
-var state$a = null;
+var state$b = null;
 var buffer = null;
 var update$2 = false;
-function start$F() {
+function start$G() {
     update$2 = false;
-    reset$q();
+    reset$r();
 }
-function reset$q() {
+function reset$r() {
     // Baseline state holds the previous values - if it is updated in the current payload,
     // reset the state to current value after sending the previous state
     if (update$2) {
-        state$a = { time: time(), event: 4 /* Event.Baseline */, data: {
+        state$b = { time: time(), event: 4 /* Event.Baseline */, data: {
                 visible: buffer.visible,
                 docWidth: buffer.docWidth,
                 docHeight: buffer.docHeight,
@@ -391,7 +392,7 @@ function reset$q() {
         activityTime: 0
     };
 }
-function track$7(event, x, y) {
+function track$8(event, x, y) {
     switch (event) {
         case 8 /* Event.Document */:
             buffer.docWidth = x;
@@ -427,19 +428,19 @@ function compute$c() {
         encode$1(4 /* Event.Baseline */);
     }
 }
-function stop$C() {
-    reset$q();
+function stop$D() {
+    reset$r();
 }
 
 var baseline = /*#__PURE__*/Object.freeze({
     __proto__: null,
     activity: activity,
     compute: compute$c,
-    reset: reset$q,
-    start: start$F,
-    get state () { return state$a; },
-    stop: stop$C,
-    track: track$7,
+    reset: reset$r,
+    start: start$G,
+    get state () { return state$b; },
+    stop: stop$D,
+    track: track$8,
     visibility: visibility
 });
 
@@ -459,12 +460,12 @@ function event(key, value) {
 
 var data$i = null;
 var updates$3 = null;
-function start$E() {
+function start$F() {
     data$i = {};
     updates$3 = {};
     count$1(5 /* Metric.InvokeCount */);
 }
-function stop$B() {
+function stop$C() {
     data$i = {};
     updates$3 = {};
 }
@@ -505,7 +506,7 @@ function max(metric, value) {
 function compute$b() {
     encode$1(0 /* Event.Metric */);
 }
-function reset$p() {
+function reset$q() {
     updates$3 = {};
 }
 
@@ -520,11 +521,11 @@ var data$h;
 var last = 0;
 var interval = 0;
 var timeout$6 = null;
-function start$D() {
+function start$E() {
     interval = 60000 /* Setting.PingInterval */;
     last = 0;
 }
-function reset$o() {
+function reset$p() {
     if (timeout$6) {
         clearTimeout(timeout$6);
     }
@@ -542,7 +543,7 @@ function ping() {
         suspend();
     }
 }
-function stop$A() {
+function stop$B() {
     clearTimeout(timeout$6);
     last = 0;
     interval = 0;
@@ -551,19 +552,19 @@ function stop$A() {
 var ping$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$h; },
-    reset: reset$o,
-    start: start$D,
-    stop: stop$A
+    reset: reset$p,
+    start: start$E,
+    stop: stop$B
 });
 
 var data$g = null;
-function start$C() {
+function start$D() {
     data$g = {};
 }
-function stop$z() {
+function stop$A() {
     data$g = {};
 }
-function track$6(event, time) {
+function track$7(event, time) {
     if (!(event in data$g)) {
         data$g[event] = [[time, 0]];
     }
@@ -583,7 +584,7 @@ function track$6(event, time) {
 function compute$a() {
     encode$1(36 /* Event.Summary */);
 }
-function reset$n() {
+function reset$o() {
     data$g = {};
 }
 
@@ -591,14 +592,14 @@ var summary = /*#__PURE__*/Object.freeze({
     __proto__: null,
     compute: compute$a,
     get data () { return data$g; },
-    reset: reset$n,
-    start: start$C,
-    stop: stop$z,
-    track: track$6
+    reset: reset$o,
+    start: start$D,
+    stop: stop$A,
+    track: track$7
 });
 
 var data$f = null;
-function start$B() {
+function start$C() {
     if (!config$1.lean && config$1.upgrade) {
         config$1.upgrade("Config" /* Constant.Config */);
     }
@@ -622,15 +623,15 @@ function upgrade(key) {
         encode$1(3 /* Event.Upgrade */);
     }
 }
-function stop$y() {
+function stop$z() {
     data$f = null;
 }
 
 var upgrade$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$f; },
-    start: start$B,
-    stop: stop$y,
+    start: start$C,
+    stop: stop$z,
     upgrade: upgrade
 });
 
@@ -688,8 +689,8 @@ function __generator(thisArg, body) {
 }
 
 var data$e = null;
-function start$A() {
-    reset$m();
+function start$B() {
+    reset$n();
 }
 function set(variable, value) {
     var values = typeof value === "string" /* Constant.String */ ? [value] : value;
@@ -747,11 +748,11 @@ function log$2(variable, value) {
 function compute$9() {
     encode$1(34 /* Event.Variable */);
 }
-function reset$m() {
+function reset$n() {
     data$e = {};
 }
-function stop$x() {
-    reset$m();
+function stop$y() {
+    reset$n();
 }
 function redact(input) {
     return input && input.length >= 5 /* Setting.WordLength */ ?
@@ -788,10 +789,10 @@ var variable = /*#__PURE__*/Object.freeze({
     compute: compute$9,
     get data () { return data$e; },
     identify: identify,
-    reset: reset$m,
+    reset: reset$n,
     set: set,
-    start: start$A,
-    stop: stop$x
+    start: start$B,
+    stop: stop$y
 });
 
 var supported$1 = "CompressionStream" /* Constant.CompressionStream */ in window;
@@ -853,18 +854,18 @@ function read(stream) {
 }
 
 var modules$1 = [baseline, dimension, variable, limit, summary, metadata$1, envelope$1, upload$1, ping$1, upgrade$1, extract];
-function start$z() {
+function start$A() {
     // Metric needs to be initialized before we can start measuring. so metric is not wrapped in measure
-    start$E();
+    start$F();
     modules$1.forEach(function (x) { return measure(x.start)(); });
 }
-function stop$w() {
+function stop$x() {
     // Stop modules in the reverse order of their initialization
     // The ordering below should respect inter-module dependency.
     // E.g. if upgrade depends on upload, then upgrade needs to end before upload.
     // Similarly, if upload depends on metadata, upload needs to end before metadata.
     modules$1.slice().reverse().forEach(function (x) { return measure(x.stop)(); });
-    stop$B();
+    stop$C();
 }
 function compute$8() {
     compute$9();
@@ -878,7 +879,7 @@ function compute$8() {
 
 var history$5 = [];
 var data$d;
-function start$y() {
+function start$z() {
     history$5 = [];
     max(26 /* Metric.Automation */, navigator.webdriver ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */);
     try {
@@ -902,7 +903,7 @@ function check$4(id, target, input) {
 
 var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
 var selectorMap = {};
-function reset$l() {
+function reset$m() {
     selectorMap = {};
 }
 function get$1(input, type) {
@@ -991,7 +992,7 @@ function filter(value) {
 var selector = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get: get$1,
-    reset: reset$l
+    reset: reset$m
 });
 
 var index = 1;
@@ -1010,14 +1011,14 @@ var idMap = null; // Maps node => id.
 var iframeMap = null; // Maps iframe's contentDocument => parent iframe element
 var privacyMap = null; // Maps node => Privacy (enum)
 var fraudMap = null; // Maps node => FraudId (number)
-function start$x() {
-    reset$k();
+function start$y() {
+    reset$l();
     parse$1(document, true);
 }
-function stop$v() {
-    reset$k();
+function stop$w() {
+    reset$l();
 }
-function reset$k() {
+function reset$l() {
     index = 1;
     nodes = [];
     values = [];
@@ -1033,7 +1034,7 @@ function reset$k() {
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
     fraudMap = new WeakMap();
-    reset$l();
+    reset$m();
 }
 // We parse new root nodes for any regions or masked nodes in the beginning (document) and
 // later whenever there are new additions or modifications to DOM (mutations)
@@ -1106,7 +1107,7 @@ function add(node, parent, data, source) {
     privacy(node, values[id], parentValue);
     updateSelector(values[id]);
     size$1(values[id]);
-    track$5(id, source);
+    track$6(id, source);
 }
 function update$1(node, parent, data, source) {
     var id = getId(node);
@@ -1156,7 +1157,7 @@ function update$1(node, parent, data, source) {
         }
         // Update selector
         updateSelector(value);
-        track$5(id, source, changed, parentChanged);
+        track$6(id, source, changed, parentChanged);
     }
 }
 function sameorigin(node) {
@@ -1312,7 +1313,7 @@ function remove(id, source) {
         var value = values[id];
         value.metadata.active = false;
         value.parent = null;
-        track$5(id, source);
+        track$6(id, source);
     }
 }
 function size$1(value) {
@@ -1331,7 +1332,7 @@ function getPreviousId(node) {
     }
     return id;
 }
-function track$5(id, source, changed, parentChanged) {
+function track$6(id, source, changed, parentChanged) {
     if (changed === void 0) { changed = true; }
     if (parentChanged === void 0) { parentChanged = false; }
     // Keep track of the order in which mutations happened, they may not be sequential
@@ -1360,8 +1361,8 @@ var dom = /*#__PURE__*/Object.freeze({
     lookup: lookup,
     parse: parse$1,
     sameorigin: sameorigin,
-    start: start$x,
-    stop: stop$v,
+    start: start$y,
+    stop: stop$w,
     update: update$1,
     updates: updates$2
 });
@@ -1389,7 +1390,7 @@ function resume$1() {
         }
     }
 }
-function reset$j() {
+function reset$k() {
     tracker = {};
     queuedTasks = [];
     activeTask = null;
@@ -1450,7 +1451,7 @@ function run() {
         });
     }
 }
-function state$9(timer) {
+function state$a(timer) {
     var id = key(timer);
     if (id in tracker) {
         var elapsed = performance.now() - tracker[id].start;
@@ -1459,7 +1460,7 @@ function state$9(timer) {
     // If this task is no longer being tracked, send stop message to the caller
     return 2 /* Task.Stop */;
 }
-function start$w(timer) {
+function start$x(timer) {
     tracker[key(timer)] = { start: performance.now(), calls: 0, yield: 30 /* Setting.LongTask */ };
 }
 function restart$2(timer) {
@@ -1467,12 +1468,12 @@ function restart$2(timer) {
     if (tracker && tracker[id]) {
         var c = tracker[id].calls;
         var y = tracker[id].yield;
-        start$w(timer);
+        start$x(timer);
         tracker[id].calls = c + 1;
         tracker[id].yield = y;
     }
 }
-function stop$u(timer) {
+function stop$v(timer) {
     var end = performance.now();
     var id = key(timer);
     var duration = end - tracker[id].start;
@@ -1492,7 +1493,7 @@ function suspend$1(timer) {
                 case 0:
                     id = key(timer);
                     if (!(id in tracker)) return [3 /*break*/, 2];
-                    stop$u(timer);
+                    stop$v(timer);
                     _a = tracker[id];
                     return [4 /*yield*/, wait()];
                 case 1:
@@ -1532,8 +1533,8 @@ function wait() {
 // While it's not possible to build a perfect polyfill given the nature of this API, the following code attempts to get close.
 // Background context: requestAnimationFrame invokes the js code right before: style, layout and paint computation within the frame.
 // This means, that any code that runs as part of requestAnimationFrame will by default be blocking in nature. Not what we want.
-// For non-blocking behavior, We need to know when browser has finished painiting. This can be accomplished in two different ways (hacks):
-//   (1) Use MessageChannel to pass the message, and browser will receive the message right after pain event has occured.
+// For non-blocking behavior, We need to know when browser has finished painting. This can be accomplished in two different ways (hacks):
+//   (1) Use MessageChannel to pass the message, and browser will receive the message right after paint event has occured.
 //   (2) Use setTimeout call within requestAnimationFrame. This also works, but there's a risk that browser may throttle setTimeout calls.
 // Given this information, we are currently using (1) from above. More information on (2) as well as some additional context is below:
 // https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers
@@ -1605,11 +1606,11 @@ function tokenize (tokens) {
 }
 
 var data$c;
-function reset$i() {
+function reset$j() {
     data$c = null;
 }
-function start$v() {
-    reset$i();
+function start$w() {
+    reset$j();
     compute$7();
 }
 function compute$7() {
@@ -1635,17 +1636,91 @@ function compute$7() {
         encode$4(8 /* Event.Document */);
     }
 }
+function stop$u() {
+    reset$j();
+}
+
+var state$9 = [];
+var animationPlay = null;
+var animationPause = null;
+var animationCancel = null;
+var animationFinish = null;
+var animationId = 'clarityAnimationId';
+var operationCount = 'clarityOperationCount';
+var maxOperations = 20;
+function start$v() {
+    reset$i();
+    overrideAnimationHelper(animationPlay, "play");
+    overrideAnimationHelper(animationPause, "pause");
+    overrideAnimationHelper(animationCancel, "cancel");
+    overrideAnimationHelper(animationFinish, "finish");
+}
+function reset$i() {
+    state$9 = [];
+}
+function track$5(time, id, operation, keyFrames, timing, targetId, timeline) {
+    state$9.push({
+        time: time,
+        event: 44 /* Event.Animation */,
+        data: {
+            id: id,
+            operation: operation,
+            keyFrames: keyFrames,
+            timing: timing,
+            targetId: targetId,
+            timeline: timeline
+        }
+    });
+    encode$4(44 /* Event.Animation */);
+}
 function stop$t() {
     reset$i();
+}
+function overrideAnimationHelper(functionToOverride, name) {
+    if (functionToOverride === null) {
+        functionToOverride = Animation.prototype[name];
+        Animation.prototype[name] = function () {
+            if (active()) {
+                if (!this[animationId]) {
+                    this[animationId] = shortid();
+                    this[operationCount] = 0;
+                    var keyframes = this.effect.getKeyframes();
+                    var timing = this.effect.getTiming();
+                    track$5(time(), this[animationId], 0 /* AnimationOperation.Create */, JSON.stringify(keyframes), JSON.stringify(timing), getId(this.effect.target));
+                }
+                if (this[operationCount]++ < maxOperations) {
+                    var operation = null;
+                    switch (name) {
+                        case "play":
+                            operation = 1 /* AnimationOperation.Play */;
+                            break;
+                        case "pause":
+                            operation = 2 /* AnimationOperation.Pause */;
+                            break;
+                        case "cancel":
+                            operation = 3 /* AnimationOperation.Cancel */;
+                            break;
+                        case "finish":
+                            operation = 4 /* AnimationOperation.Finish */;
+                            break;
+                    }
+                    if (operation) {
+                        track$5(time(), this[animationId], operation);
+                    }
+                }
+            }
+            return functionToOverride.apply(this, arguments);
+        };
+    }
 }
 
 function encode$4 (type, timer, ts) {
     if (timer === void 0) { timer = null; }
     if (ts === void 0) { ts = null; }
     return __awaiter(this, void 0, void 0, function () {
-        var eventTime, tokens, _a, d, _i, _b, r, values, _c, values_1, value, state, data, active, suspend, privacy, mangle, keys, _d, keys_1, key, box, factor, attr;
-        return __generator(this, function (_e) {
-            switch (_e.label) {
+        var eventTime, tokens, _a, d, _i, _b, r, _c, _d, entry, values, _e, values_1, value, state, data, active, suspend, privacy, mangle, keys, _f, keys_1, key, box, factor, attr;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
                 case 0:
                     eventTime = ts || time();
                     tokens = [eventTime, type];
@@ -1653,17 +1728,18 @@ function encode$4 (type, timer, ts) {
                     switch (_a) {
                         case 8 /* Event.Document */: return [3 /*break*/, 1];
                         case 7 /* Event.Region */: return [3 /*break*/, 2];
-                        case 5 /* Event.Discover */: return [3 /*break*/, 3];
-                        case 6 /* Event.Mutation */: return [3 /*break*/, 3];
+                        case 44 /* Event.Animation */: return [3 /*break*/, 3];
+                        case 5 /* Event.Discover */: return [3 /*break*/, 4];
+                        case 6 /* Event.Mutation */: return [3 /*break*/, 4];
                     }
-                    return [3 /*break*/, 10];
+                    return [3 /*break*/, 11];
                 case 1:
                     d = data$c;
                     tokens.push(d.width);
                     tokens.push(d.height);
-                    track$7(type, d.width, d.height);
+                    track$8(type, d.width, d.height);
                     queue(tokens);
-                    return [3 /*break*/, 10];
+                    return [3 /*break*/, 11];
                 case 2:
                     for (_i = 0, _b = state$8; _i < _b.length; _i++) {
                         r = _b[_i];
@@ -1675,28 +1751,42 @@ function encode$4 (type, timer, ts) {
                         queue(tokens);
                     }
                     reset$h();
-                    return [3 /*break*/, 10];
+                    return [3 /*break*/, 11];
                 case 3:
+                    for (_c = 0, _d = state$9; _c < _d.length; _c++) {
+                        entry = _d[_c];
+                        tokens = [entry.time, entry.event];
+                        tokens.push(entry.data.id);
+                        tokens.push(entry.data.operation);
+                        tokens.push(entry.data.keyFrames);
+                        tokens.push(entry.data.timing);
+                        tokens.push(entry.data.timeline);
+                        tokens.push(entry.data.targetId);
+                        queue(tokens);
+                    }
+                    reset$i();
+                    return [3 /*break*/, 11];
+                case 4:
                     // Check if we are operating within the context of the current page
-                    if (state$9(timer) === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 10];
+                    if (state$a(timer) === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 11];
                     }
                     values = updates$2();
-                    if (!(values.length > 0)) return [3 /*break*/, 9];
-                    _c = 0, values_1 = values;
-                    _e.label = 4;
-                case 4:
-                    if (!(_c < values_1.length)) return [3 /*break*/, 8];
-                    value = values_1[_c];
-                    state = state$9(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 6];
-                    return [4 /*yield*/, suspend$1(timer)];
+                    if (!(values.length > 0)) return [3 /*break*/, 10];
+                    _e = 0, values_1 = values;
+                    _g.label = 5;
                 case 5:
-                    state = _e.sent();
-                    _e.label = 6;
+                    if (!(_e < values_1.length)) return [3 /*break*/, 9];
+                    value = values_1[_e];
+                    state = state$a(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 7];
+                    return [4 /*yield*/, suspend$1(timer)];
                 case 6:
+                    state = _g.sent();
+                    _g.label = 7;
+                case 7:
                     if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 8];
+                        return [3 /*break*/, 9];
                     }
                     data = value.data;
                     active = value.metadata.active;
@@ -1704,8 +1794,8 @@ function encode$4 (type, timer, ts) {
                     privacy = value.metadata.privacy;
                     mangle = shouldMangle(value);
                     keys = active ? ["tag", "attributes", "value"] : ["tag"];
-                    for (_d = 0, keys_1 = keys; _d < keys_1.length; _d++) {
-                        key = keys_1[_d];
+                    for (_f = 0, keys_1 = keys; _f < keys_1.length; _f++) {
+                        key = keys_1[_f];
                         if (data[key]) {
                             switch (key) {
                                 case "tag":
@@ -1737,18 +1827,18 @@ function encode$4 (type, timer, ts) {
                             }
                         }
                     }
-                    _e.label = 7;
-                case 7:
-                    _c++;
-                    return [3 /*break*/, 4];
+                    _g.label = 8;
                 case 8:
+                    _e++;
+                    return [3 /*break*/, 5];
+                case 9:
                     if (type === 6 /* Event.Mutation */) {
                         activity(eventTime);
                     }
                     queue(tokenize(tokens), !config$1.lean);
-                    _e.label = 9;
-                case 9: return [3 /*break*/, 10];
-                case 10: return [2 /*return*/];
+                    _g.label = 10;
+                case 10: return [3 /*break*/, 11];
+                case 11: return [2 /*return*/];
             }
         });
     });
@@ -1931,7 +2021,7 @@ function recompute$8(evt) {
     var element = target(evt);
     if (element) {
         var value = element.value;
-        var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$1.fraud ? hash(value, 24 /* Setting.ChecksumPrecision */) : "" /* Constant.Empty */;
+        var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$1.fraud && "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.indexOf(element.type) === -1 ? hash(value, 24 /* Setting.ChecksumPrecision */) : "" /* Constant.Empty */;
         state$7.push({ time: time(evt), event: 42 /* Event.Change */, data: { target: target(evt), type: element.type, value: value, checksum: checksum } });
         schedule$1(encode$3.bind(this, 42 /* Event.Change */));
     }
@@ -2593,8 +2683,8 @@ function processNode (node, source) {
                         var styleSheet = adoptedStyleSheets_1[_i];
                         style += getCssRules(styleSheet);
                     }
-                    var fragementData = { tag: "*S" /* Constant.ShadowDomTag */, attributes: { style: style } };
-                    dom[call](node, shadowRoot.host, fragementData, source);
+                    var fragmentData = { tag: "*S" /* Constant.ShadowDomTag */, attributes: { style: style } };
+                    dom[call](node, shadowRoot.host, fragmentData, source);
                 }
                 else {
                     // If the browser doesn't support shadow DOM natively, we detect that, and send appropriate tag back.
@@ -2779,7 +2869,7 @@ function traverse (root, timer, source) {
                         queue.push(next);
                         next = next.nextSibling;
                     }
-                    state = state$9(timer);
+                    state = state$a(timer);
                     if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 3];
                     return [4 /*yield*/, suspend$1(timer)];
                 case 2:
@@ -2902,7 +2992,7 @@ function active$2() {
 function handle$1(m) {
     // Queue up mutation records for asynchronous processing
     var now = time();
-    track$6(6 /* Event.Mutation */, now);
+    track$7(6 /* Event.Mutation */, now);
     mutations.push({ time: now, mutations: m });
     schedule$1(process$1, 1 /* Priority.High */).then(function () {
         setTimeout(compute$7);
@@ -2916,7 +3006,7 @@ function process$1() {
             switch (_b.label) {
                 case 0:
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$w(timer);
+                    start$x(timer);
                     _b.label = 1;
                 case 1:
                     if (!(mutations.length > 0)) return [3 /*break*/, 8];
@@ -2927,7 +3017,7 @@ function process$1() {
                 case 2:
                     if (!(_i < _a.length)) return [3 /*break*/, 6];
                     mutation = _a[_i];
-                    state = state$9(timer);
+                    state = state$a(timer);
                     if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
                     return [4 /*yield*/, suspend$1(timer)];
                 case 3:
@@ -2972,7 +3062,7 @@ function process$1() {
                     _b.sent();
                     return [3 /*break*/, 1];
                 case 8:
-                    stop$u(timer);
+                    stop$v(timer);
                     return [2 /*return*/];
             }
         });
@@ -3035,7 +3125,7 @@ function processNodeList(list, source, timer) {
                     traverse(list[i], timer, source);
                     return [3 /*break*/, 5];
                 case 2:
-                    state = state$9(timer);
+                    state = state$a(timer);
                     if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
                     return [4 /*yield*/, suspend$1(timer)];
                 case 3:
@@ -3152,7 +3242,7 @@ function encode$3 (type, ts) {
                             tokens.push(entry.data.x);
                             tokens.push(entry.data.y);
                             queue(tokens);
-                            track$7(entry.event, entry.data.x, entry.data.y);
+                            track$8(entry.event, entry.data.x, entry.data.y);
                         }
                     }
                     reset$c();
@@ -3197,7 +3287,7 @@ function encode$3 (type, ts) {
                     r = data$b;
                     tokens.push(r.width);
                     tokens.push(r.height);
-                    track$7(type, r.width, r.height);
+                    track$8(type, r.width, r.height);
                     reset$b();
                     queue(tokens);
                     break;
@@ -3241,7 +3331,7 @@ function encode$3 (type, ts) {
                             tokens.push(entry.data.x);
                             tokens.push(entry.data.y);
                             queue(tokens);
-                            track$7(entry.event, entry.data.x, entry.data.y);
+                            track$8(entry.event, entry.data.x, entry.data.y);
                         }
                     }
                     reset$a();
@@ -3328,7 +3418,7 @@ function track$2(time, event, hash, x, y, reaction, context) {
     // Since timeline only keeps the data for configured time, we still want to continue tracking these values
     // as part of the baseline. For instance, in a scenario where last scroll happened 5s ago.
     // We would still need to capture the last scroll position as part of the baseline event, even when timeline will be empty.
-    track$7(event, x, y);
+    track$8(event, x, y);
 }
 function compute$5() {
     var temp = [];
@@ -3405,7 +3495,7 @@ function queue(tokens, transmit) {
         // We enrich the data going out with the existing upload. In these cases, call to upload comes with 'transmit' set to false.
         if (transmit && timeout === null) {
             if (type !== 25 /* Event.Ping */) {
-                reset$o();
+                reset$p();
             }
             timeout = setTimeout(upload, gap);
             queuedTime = now;
@@ -3727,22 +3817,26 @@ var keys = new Set();
 var variables = {};
 var selectors = {};
 var hashes = {};
+var validation = {};
 function start$c() {
     reset$4();
 }
 // Input string is of the following form:
-// EXTRACT 101 { "1": ".class1", "2": "~window.a.b", "3": "!abc"}
-// Which will set up event 101 to grab the contents of the class1 selector into component 1,
+// EXTRACT 101|element { "1": ".class1", "2": "~window.a.b", "3": "!abc"}
+// if element is present on the page it will set up event 101 to grab the contents of the class1 selector into component 1,
 // the javascript evaluated contents of window.a.b into component 2,
 // and the contents of Clarity's hash abc into component 3
 function trigger$1(input) {
     try {
         var parts = input && input.length > 0 ? input.split(/ (.*)/) : ["" /* Constant.Empty */];
-        var key = parseInt(parts[0]);
+        var keyparts = parts[0].split(/\|(.*)/);
+        var key = parseInt(keyparts[0]);
+        var element = keyparts.length > 1 ? keyparts[1] : "" /* Constant.Empty */;
         var values = parts.length > 1 ? JSON.parse(parts[1]) : {};
         variables[key] = {};
         selectors[key] = {};
         hashes[key] = {};
+        validation[key] = element;
         for (var v in values) {
             // values is a set of strings for proper JSON parsing, but it's more efficient 
             // to interact with them as numbers
@@ -3781,28 +3875,30 @@ function compute$4() {
     try {
         for (var v in variables) {
             var key = parseInt(v);
-            var variableData = variables[key];
-            for (var v_1 in variableData) {
-                var variableKey = parseInt(v_1);
-                var value = str(evaluate(clone(variableData[variableKey])));
-                if (value) {
-                    update(key, variableKey, value);
+            if (validation[key] == "" /* Constant.Empty */ || document.querySelector(validation[key])) {
+                var variableData = variables[key];
+                for (var v_1 in variableData) {
+                    var variableKey = parseInt(v_1);
+                    var value = str(evaluate(clone(variableData[variableKey])));
+                    if (value) {
+                        update(key, variableKey, value);
+                    }
                 }
-            }
-            var selectorData = selectors[key];
-            for (var s in selectorData) {
-                var selectorKey = parseInt(s);
-                var nodes = document.querySelectorAll(selectorData[selectorKey]);
-                if (nodes) {
-                    var text = Array.from(nodes).map(function (e) { return e.textContent; });
-                    update(key, selectorKey, text.join("<SEP>" /* Constant.Seperator */).substring(0, 10000 /* Setting.ExtractLimit */));
+                var selectorData = selectors[key];
+                for (var s in selectorData) {
+                    var selectorKey = parseInt(s);
+                    var nodes = document.querySelectorAll(selectorData[selectorKey]);
+                    if (nodes) {
+                        var text = Array.from(nodes).map(function (e) { return e.textContent; });
+                        update(key, selectorKey, text.join("<SEP>" /* Constant.Seperator */).substring(0, 10000 /* Setting.ExtractLimit */));
+                    }
+                }
+                var hashData = hashes[key];
+                for (var h in hashData) {
+                    var hashKey = parseInt(h);
+                    var content = hashText(hashData[hashKey]).trim().substring(0, 10000 /* Setting.ExtractLimit */);
+                    update(key, hashKey, content);
                 }
-            }
-            var hashData = hashes[key];
-            for (var h in hashData) {
-                var hashKey = parseInt(h);
-                var content = hashText(hashData[hashKey]).trim().substring(0, 10000 /* Setting.ExtractLimit */);
-                update(key, hashKey, content);
             }
         }
         if (keys.size > 0) {
@@ -3903,7 +3999,7 @@ function encode$1 (event) {
     var tokens = [t, event];
     switch (event) {
         case 4 /* Event.Baseline */:
-            var b = state$a;
+            var b = state$b;
             if (b) {
                 tokens = [b.time, b.event];
                 tokens.push(b.data.visible);
@@ -3918,7 +4014,7 @@ function encode$1 (event) {
                 tokens.push(b.data.activityTime);
                 queue(tokens, false);
             }
-            reset$q();
+            reset$r();
             break;
         case 25 /* Event.Ping */:
             tokens.push(data$h.gap);
@@ -3951,7 +4047,7 @@ function encode$1 (event) {
                     tokens.push(v);
                     tokens.push(data$e[v]);
                 }
-                reset$m();
+                reset$n();
                 queue(tokens, false);
             }
             break;
@@ -3966,7 +4062,7 @@ function encode$1 (event) {
                     // However, for data over the wire, we round it off to milliseconds precision.
                     tokens.push(Math.round(updates$3[m]));
                 }
-                reset$p();
+                reset$q();
                 queue(tokens, false);
             }
             break;
@@ -3992,7 +4088,7 @@ function encode$1 (event) {
                     tokens.push(key);
                     tokens.push([].concat.apply([], data$g[e]));
                 }
-                reset$n();
+                reset$o();
                 queue(tokens, false);
             }
             break;
@@ -4526,8 +4622,8 @@ function stop$6() {
 var status = false;
 function start$6() {
     status = true;
-    start$G();
-    reset$j();
+    start$H();
+    reset$k();
     reset$1();
     reset$2();
     start$7();
@@ -4536,8 +4632,8 @@ function stop$5() {
     stop$6();
     reset$2();
     reset$1();
-    reset$j();
-    stop$D();
+    reset$k();
+    stop$E();
     status = false;
 }
 function active() {
@@ -4591,7 +4687,7 @@ function restart() {
 }
 
 function start$5() {
-    start$y();
+    start$z();
     start$e();
     start$d();
 }
@@ -4619,14 +4715,14 @@ function discover() {
                 case 0:
                     ts = time();
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$w(timer);
+                    start$x(timer);
                     return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */)];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, encode$4(5 /* Event.Discover */, timer, ts)];
                 case 2:
                     _a.sent();
-                    stop$u(timer);
+                    stop$v(timer);
                     return [2 /*return*/];
             }
         });
@@ -4636,16 +4732,18 @@ function discover() {
 function start$3() {
     // The order below is important 
     // and is determined by interdependencies of modules
-    start$v();
+    start$w();
     start$u();
-    start$x();
+    start$y();
     start$h();
     start$4();
+    start$v();
 }
 function stop$3() {
     stop$s();
-    stop$v();
+    stop$w();
     stop$f();
+    stop$u();
     stop$t();
 }
 
@@ -4840,7 +4938,7 @@ function start(config$1) {
     if (check()) {
         config(config$1);
         start$6();
-        start$z();
+        start$A();
         modules.forEach(function (x) { return measure(x.start)(); });
         // If it's an internal call to start, without explicit configuration,
         // re-process any newly accumulated items in the queue
@@ -4871,7 +4969,7 @@ function stop() {
     if (active()) {
         // Stop modules in the reverse order of their initialization and start queuing up items again
         modules.slice().reverse().forEach(function (x) { return measure(x.stop)(); });
-        stop$w();
+        stop$x();
         stop$5();
         setup();
     }