Minor data updates (microsoft#186)

* Minor data updates * Bumping version to 0.6.27 * Fix lint errors and an edge case with shadow DOM
yvvq · Nov 1, 2021 · a9eea07 · a9eea07
1 parent 4868c6b
commit a9eea07
Show file tree

Hide file tree

Showing 38 changed files with 236 additions and 160 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.6.26",
+  "version": "0.6.27",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.6.26",
+  "version": "0.6.27",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <sarveshn@microsoft.com>",
   "license": "MIT",

diff --git a/packages/clarity-decode/package.json b/packages/clarity-decode/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.6.26",
+  "version": "0.6.27",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-js": "^0.6.26"
+    "clarity-js": "^0.6.27"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.1",

diff --git a/packages/clarity-decode/src/clarity.ts b/packages/clarity-decode/src/clarity.ts
@@ -1,11 +1,11 @@
 import { Data, version } from "clarity-js";
 import { BaselineEvent, CustomEvent, DecodedPayload, DecodedVersion, DimensionEvent } from "../types/data";
 import { LimitEvent, MetricEvent, PingEvent, SummaryEvent, UpgradeEvent, UploadEvent, VariableEvent } from "../types/data";
-import { ImageErrorEvent, LogEvent, ScriptErrorEvent } from "../types/diagnostic";
-import { ClickEvent, InputEvent, PointerEvent, ResizeEvent, ScrollEvent, TimelineEvent } from "../types/interaction";
+import { LogEvent, ScriptErrorEvent } from "../types/diagnostic";
+import { ClickEvent, ClipboardEvent, InputEvent, PointerEvent, ResizeEvent, ScrollEvent, SubmitEvent, TimelineEvent } from "../types/interaction";
 import { SelectionEvent, UnloadEvent, VisibilityEvent } from "../types/interaction";
 import { BoxEvent, DocumentEvent, DomEvent, RegionEvent } from "../types/layout";
-import { ConnectionEvent, NavigationEvent } from "../types/performance";
+import { NavigationEvent } from "../types/performance";
 
 import * as data from "./data";
 import * as diagnostic from "./diagnostic";
@@ -101,6 +101,11 @@ export function decode(input: string): DecodedPayload {
                 let clickEntry = interaction.decode(entry) as ClickEvent;
                 payload.click.push(clickEntry);
                 break;
+            case Data.Event.Clipboard:
+                if (payload.clipboard === undefined) { payload.clipboard = []; }
+                let clipEntry = interaction.decode(entry) as ClipboardEvent;
+                payload.clipboard.push(clipEntry);
+                break;
             case Data.Event.Scroll:
                 if (payload.scroll === undefined) { payload.scroll = []; }
                 payload.scroll.push(interaction.decode(entry) as ScrollEvent);
@@ -113,6 +118,11 @@ export function decode(input: string): DecodedPayload {
                 if (payload.selection === undefined) { payload.selection = []; }
                 payload.selection.push(interaction.decode(entry) as SelectionEvent);
                 break;
+            case Data.Event.Submit:
+                if (payload.submit === undefined) { payload.submit = []; }
+                let submitEntry = interaction.decode(entry) as SubmitEvent;
+                payload.submit.push(submitEntry);
+                break;
             case Data.Event.Timeline:
                 if (payload.timeline === undefined) { payload.timeline = []; }
                 payload.timeline.push(interaction.decode(entry) as TimelineEvent);
@@ -150,18 +160,10 @@ export function decode(input: string): DecodedPayload {
                 if (payload.script === undefined) { payload.script = []; }
                 payload.script.push(diagnostic.decode(entry) as ScriptErrorEvent);
                 break;
-            case Data.Event.ImageError:
-                if (payload.image === undefined) { payload.image = []; }
-                payload.image.push(diagnostic.decode(entry) as ImageErrorEvent);
-                break;
             case Data.Event.Log:
                 if (payload.log === undefined) { payload.log = []; }
                 payload.log.push(diagnostic.decode(entry) as LogEvent);
                 break;
-            case Data.Event.Connection:
-                if (payload.connection === undefined) { payload.connection = []; }
-                payload.connection.push(performance.decode(entry) as ConnectionEvent);
-                break;
             case Data.Event.Navigation:
                 if (payload.navigation === undefined) { payload.navigation = []; }
                 payload.navigation.push(performance.decode(entry) as NavigationEvent);

diff --git a/packages/clarity-decode/src/diagnostic.ts b/packages/clarity-decode/src/diagnostic.ts
@@ -5,12 +5,6 @@ export function decode(tokens: Data.Token[]): DiagnosticEvent {
     let time = tokens[0] as number;
     let event = tokens[1] as Data.Event;
     switch (event) {
-        case Data.Event.ImageError:
-            let imageError: Diagnostic.ImageErrorData = {
-                source: tokens[2] as string,
-                target: tokens[3] as number,
-            };
-            return { time, event, data: imageError };
         case Data.Event.ScriptError:
             let scriptError: Diagnostic.ScriptErrorData = {
                 message: tokens[2] as string,

diff --git a/packages/clarity-decode/src/interaction.ts b/packages/clarity-decode/src/interaction.ts
@@ -37,6 +37,9 @@ export function decode(tokens: Data.Token[]): InteractionEvent {
                 hashBeta: clickHashes.length > 0 ? clickHashes[1] : null
             };
             return { time, event, data: clickData };
+        case Data.Event.Clipboard:
+            let clipData: Interaction.ClipboardData = { target: tokens[2] as number, action: tokens[3] as Interaction.Clipboard };
+            return { time, event, data: clipData };
         case Data.Event.Resize:
             let resizeData: Interaction.ResizeData = { width: tokens[2] as number, height: tokens[3] as number };
             return { time, event, data: resizeData };
@@ -54,6 +57,11 @@ export function decode(tokens: Data.Token[]): InteractionEvent {
                 endOffset: tokens[5] as number
             };
             return { time, event, data: selectionData };
+        case Data.Event.Submit:
+            let submitData: Interaction.SubmitData = {
+                target: tokens[2] as number
+            };
+            return { time, event, data: submitData };
         case Data.Event.Scroll:
             let scrollData: Interaction.ScrollData = {
                 target: tokens[2] as number,

diff --git a/packages/clarity-decode/src/performance.ts b/packages/clarity-decode/src/performance.ts
@@ -5,14 +5,6 @@ export function decode(tokens: Data.Token[]): PerformanceEvent  {
     let time = tokens[0] as number;
     let event = tokens[1] as Data.Event;
     switch (event) {
-        case Data.Event.Connection:
-            let connectionData: Performance.ConnectionData = {
-                downlink: tokens[2] as number,
-                rtt: tokens[3] as number,
-                saveData: tokens[4] as number,
-                type: tokens[5] as string
-            };
-            return { time, event, data: connectionData };
         case Data.Event.Navigation:
             let navigationData: Performance.NavigationData = {
                 fetchStart: tokens[2] as number,

diff --git a/packages/clarity-decode/types/data.d.ts b/packages/clarity-decode/types/data.d.ts
@@ -1,9 +1,9 @@
 import { Data } from "clarity-js";
-import { DiagnosticEvent, ImageErrorEvent, LogEvent, ScriptErrorEvent } from "./diagnostic";
-import { ClickEvent, InputEvent, InteractionEvent, PointerEvent, ResizeEvent } from "./interaction";
+import { DiagnosticEvent, LogEvent, ScriptErrorEvent } from "./diagnostic";
+import { ClickEvent, ClipboardEvent, InputEvent, InteractionEvent, PointerEvent, ResizeEvent, SubmitEvent } from "./interaction";
 import { ScrollEvent, SelectionEvent, TimelineEvent, UnloadEvent, VisibilityEvent } from "./interaction";
 import { BoxEvent, DocumentEvent, DomEvent, LayoutEvent, RegionEvent } from "./layout";
-import { ConnectionEvent, NavigationEvent, PerformanceEvent } from "./performance";
+import { NavigationEvent, PerformanceEvent } from "./performance";
 import { PartialEvent } from "./core";
 
 /* Redeclare enums */
@@ -50,14 +50,15 @@ export interface DecodedPayload {
     dimension?: DimensionEvent[];
     ping?: PingEvent[];
     limit?: LimitEvent[];
-    image?: ImageErrorEvent[];
     script?: ScriptErrorEvent[];
     input?: InputEvent[];
     pointer?: PointerEvent[];
     click?: ClickEvent[];
+    clipboard?: ClipboardEvent[];
     resize?: ResizeEvent[];
     scroll?: ScrollEvent[];
     selection?: SelectionEvent[];
+    submit?: SubmitEvent[];
     summary?: SummaryEvent[];
     timeline?: TimelineEvent[];
     unload?: UnloadEvent[];
@@ -68,7 +69,6 @@ export interface DecodedPayload {
     region?: RegionEvent[];
     dom?: DomEvent[];
     doc?: DocumentEvent[];
-    connection?: ConnectionEvent[];
     navigation?: NavigationEvent[];
     log?: LogEvent[];
     baseline?: BaselineEvent[];

diff --git a/packages/clarity-decode/types/diagnostic.d.ts b/packages/clarity-decode/types/diagnostic.d.ts
@@ -1,9 +1,8 @@
 import { Diagnostic } from "clarity-js";
 import { PartialEvent } from "./core";
 
-export interface ImageErrorEvent extends PartialEvent { data: Diagnostic.ImageErrorData; }
 export interface ScriptErrorEvent extends PartialEvent { data: Diagnostic.ScriptErrorData; }
 export interface LogEvent extends PartialEvent { data: Diagnostic.LogData; }
 export interface DiagnosticEvent extends PartialEvent {
-    data: Diagnostic.ImageErrorData | Diagnostic.LogData | Diagnostic.ScriptErrorData;
+    data: Diagnostic.LogData | Diagnostic.ScriptErrorData;
 }
diff --git a/packages/clarity-decode/types/interaction.d.ts b/packages/clarity-decode/types/interaction.d.ts
@@ -11,20 +11,24 @@ export interface TimelineData extends Interaction.TimelineData {
 
 export interface InputEvent extends PartialEvent { data: Interaction.InputData; }
 export interface ClickEvent extends PartialEvent { data: ClickData; }
+export interface ClipboardEvent extends PartialEvent { data: Interaction.ClipboardData; }
 export interface PointerEvent extends PartialEvent { data: Interaction.PointerData; }
 export interface ResizeEvent extends PartialEvent { data: Interaction.ResizeData; }
 export interface ScrollEvent extends PartialEvent { data: Interaction.ScrollData; }
 export interface SelectionEvent extends PartialEvent { data: Interaction.SelectionData; }
+export interface SubmitEvent extends PartialEvent { data: Interaction.SubmitData; }
 export interface TimelineEvent extends PartialEvent { data: TimelineData; }
 export interface UnloadEvent extends PartialEvent { data: Interaction.UnloadData; }
 export interface VisibilityEvent extends PartialEvent { data: Interaction.VisibilityData; }
 export interface InteractionEvent extends PartialEvent {
     data: ClickData |
+    Interaction.ClipboardData |
     Interaction.InputData |
     Interaction.PointerData |
     Interaction.ResizeData |
     Interaction.ScrollData |
     Interaction.SelectionData |
+    Interaction.SubmitData |
     TimelineData |
     Interaction.UnloadData |
     Interaction.VisibilityData;

diff --git a/packages/clarity-decode/types/performance.d.ts b/packages/clarity-decode/types/performance.d.ts
@@ -1,8 +1,7 @@
 import { Performance } from "clarity-js";
 import { PartialEvent } from "./core";
 
-export interface ConnectionEvent extends PartialEvent { data: Performance.ConnectionData; }
 export interface NavigationEvent extends PartialEvent { data: Performance.NavigationData; }
 export interface PerformanceEvent extends PartialEvent {
-    data: Performance.ConnectionData | Performance.NavigationData
+    data: Performance.NavigationData
 }
diff --git a/packages/clarity-devtools/package.json b/packages/clarity-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.6.26",
+  "version": "0.6.27",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",
@@ -24,9 +24,9 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.26",
-    "clarity-js": "^0.6.26",
-    "clarity-visualize": "^0.6.26"
+    "clarity-decode": "^0.6.27",
+    "clarity-js": "^0.6.27",
+    "clarity-visualize": "^0.6.27"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.0.2",
@@ -39,8 +39,8 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "source-map-loader": "^3.0.0",
-    "tslib": "^2.3.0",
     "ts-node": "^10.1.0",
+    "tslib": "^2.3.0",
     "tslint": "^6.1.3",
     "typescript": "^4.3.5"
   },

diff --git a/packages/clarity-devtools/src/config.ts b/packages/clarity-devtools/src/config.ts
@@ -17,6 +17,9 @@ export default function(): Core.Config {
             [Data.Metric.CartDiscount, 0, "span[data-checkout-discount-amount-target]", 100], /* 0: DOM Text */
             [Data.Metric.ProductPrice, 1, "Analytics.product.price", 100], /* 1: Javascript */
             [Data.Metric.CartTotal, 2, "data-checkout-payment-due-target"], /* 2: DOM Attribute */
+        ],
+        dimensions: [
+            [Data.Dimension.ProductBrand, 0, ".productBrand"], /* 0: DOM Text */
         ]
     };
 }
diff --git a/packages/clarity-devtools/src/content.ts b/packages/clarity-devtools/src/content.ts
@@ -32,7 +32,13 @@ function setup(url: string): void {
             chrome.storage.sync.get({ clarity: { showText: true, leanMode: false } }, (items: any) => {
               let c = config();
               let script = document.createElement("script");
-              script.innerText = wireup({regions: c.regions, metrics: c.metrics, showText: items.clarity.showText, leanMode: items.clarity.leanMode});
+              script.innerText = wireup({
+                regions: c.regions,
+                metrics: c.metrics,
+                dimensions: c.dimensions,
+                showText: items.clarity.showText,
+                leanMode: items.clarity.leanMode
+              });
               document.body.appendChild(script);
             });
             break;
@@ -53,6 +59,7 @@ function wireup(settings: any): string {
       lean: "$__leanMode__$",
       regions: "$__regions__$",
       metrics: "$__metrics__$",
+      dimensions: "$__dimensions__$",
       content: "$__showText__$",
       upload: (data: string): void => { window.postMessage({ action: "upload", payload: data }, "*"); },
       projectId: "devtools"

diff --git a/packages/clarity-devtools/static/manifest.json b/packages/clarity-devtools/static/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Clarity Developer Tools",
   "description": "Get insights about how customers use your website.",
-  "version": "0.6.26",
-  "version_name": "0.6.26",
+  "version": "0.6.27",
+  "version_name": "0.6.27",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

diff --git a/packages/clarity-js/package.json b/packages/clarity-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.6.26",
+  "version": "0.6.27",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

diff --git a/packages/clarity-js/src/core/config.ts b/packages/clarity-js/src/core/config.ts
@@ -10,6 +10,7 @@ let config: Config = {
     unmask: [],
     regions: [],
     metrics: [],
+    dimensions: [],
     cookies: [],
     report: null,
     upload: null,

diff --git a/packages/clarity-js/src/core/version.ts b/packages/clarity-js/src/core/version.ts
@@ -1,2 +1,2 @@
-let version = "0.6.26";
+let version = "0.6.27";
 export default version;
diff --git a/packages/clarity-js/src/data/metadata.ts b/packages/clarity-js/src/data/metadata.ts
@@ -41,11 +41,13 @@ export function start(): void {
 
   if (navigator) {
     dimension.log(Dimension.Language, (<any>navigator).userLanguage || navigator.language);
+    metric.max(Metric.Automation, navigator.webdriver ? BooleanFlag.True : BooleanFlag.False);
   }
 
   // Metrics
   metric.max(Metric.ClientTimestamp, s.ts);
   metric.max(Metric.Playback, BooleanFlag.False);
+
   if (screen) {
     metric.max(Metric.ScreenWidth, Math.round(screen.width));
     metric.max(Metric.ScreenHeight, Math.round(screen.height));

diff --git a/packages/clarity-js/src/data/upload.ts b/packages/clarity-js/src/data/upload.ts
@@ -56,6 +56,9 @@ export function queue(tokens: Token[], transmit: boolean = true): void {
                 break;
         }
 
+        // Increment event count metric
+        metric.count(Metric.EventCount);
+
         // Following two checks are precautionary and act as a fail safe mechanism to get out of unexpected situations.
         // Check 1: If for any reason the upload hasn't happened after waiting for 2x the config.delay time,
         // reset the timer. This allows Clarity to attempt an upload again.

diff --git a/packages/clarity-js/src/diagnostic/encode.ts b/packages/clarity-js/src/diagnostic/encode.ts
@@ -1,10 +1,8 @@
 import { Event, Token } from "@clarity-types/data";
 import { time } from "@src/core/time";
 import { queue } from "@src/data/upload";
-import * as image from "@src/diagnostic/image";
 import * as internal from "@src/diagnostic/internal";
 import * as script from "@src/diagnostic/script";
-import { metadata } from "@src/layout/target";
 
 export default async function (type: Event): Promise<void> {
     let tokens: Token[] = [time(), type];
@@ -18,14 +16,6 @@ export default async function (type: Event): Promise<void> {
             tokens.push(script.data.source);
             queue(tokens);
             break;
-        case Event.ImageError:
-            if (image.data) {
-                let imageTarget = metadata(image.data.target as Node, type);
-                tokens.push(image.data.source);
-                tokens.push(imageTarget.id);
-                queue(tokens);
-            }
-            break;
         case Event.Log:
             if (internal.data) {
                 tokens.push(internal.data.code);

diff --git a/packages/clarity-js/src/diagnostic/image.ts b/packages/clarity-js/src/diagnostic/image.ts