Logging lcp target

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.7.47",
+  "version": "0.7.48",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.7.47",
+  "version": "0.7.48",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <[email protected]>",
   "license": "MIT",

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.7.47",
+  "version": "0.7.48",
   "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.7.47"
+    "clarity-js": "^0.7.48"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.47",
+  "version": "0.7.48",
   "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.7.47",
-    "clarity-js": "^0.7.47",
-    "clarity-visualize": "^0.7.47"
+    "clarity-decode": "^0.7.48",
+    "clarity-js": "^0.7.48",
+    "clarity-visualize": "^0.7.48"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.0",

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Microsoft Clarity Developer Tools",
   "description": "Clarity helps you understand how users are interacting with your website.",
-  "version": "0.7.47",
-  "version_name": "0.7.47",
+  "version": "0.7.48",
+  "version_name": "0.7.48",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.7.47",
+  "version": "0.7.48",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

packages/clarity-js/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.7.47";
+let version = "0.7.48";
 export default version;

packages/clarity-js/src/data/encode.ts

@@ -12,7 +12,7 @@ import * as variable from "@src/data/variable";
 import * as extract from "@src/data/extract";
 import { queue, track } from "./upload";
 
-export default function(event: Event): void {
+export default function(event: Event, target?: number): void {
     let t = time();
     let tokens: Token[] = [t, event]; 
     switch (event) {
@@ -84,6 +84,13 @@ export default function(event: Event): void {
                 queue(tokens, false);
             }
             break;
+        case Event.LargestPaintTarget:
+            if(target){
+                // Log the id of the largest paint element
+                tokens.push(target);
+                queue(tokens, false);
+            }
+            break;
         case Event.Dimension:
             let dimensionKeys = Object.keys(dimension.updates);
             if (dimensionKeys.length > 0) {

packages/clarity-js/src/data/metric.ts

@@ -42,6 +42,12 @@ export function max(metric: Metric, value: number): void {
     }
 }
 
+export function logTarget(event: Event, target: number): void {
+    if(event == Event.LargestPaintTarget){
+        encode(Event.LargestPaintTarget, target);
+    }
+}
+
 export function compute(): void {
     encode(Event.Metric);
 }

packages/clarity-js/src/performance/observer.ts

@@ -1,4 +1,4 @@
-import { Code, Constant, Dimension, Metric, Severity } from "@clarity-types/data";
+import { Code, Constant, Dimension, Event, Metric, Severity } from "@clarity-types/data";
 import config from "@src/core/config";
 import { bind } from "@src/core/event";
 import measure from "@src/core/measure";
@@ -7,6 +7,8 @@ import * as dimension from "@src/data/dimension";
 import * as metric from "@src/data/metric";
 import * as internal from "@src/diagnostic/internal";
 import * as navigation from "@src/performance/navigation";
+import * as dom from "@src/layout/dom";
+
 
 let observer: PerformanceObserver;
 const types: string[] = [Constant.Navigation, Constant.Resource, Constant.LongTask, Constant.FID, Constant.CLS, Constant.LCP, Constant.PerformanceEventTiming];
@@ -81,6 +83,10 @@ function process(entries: PerformanceEntryList): void {
                 break;
             case Constant.LCP:
                 if (visible) { metric.max(Metric.LargestPaint, entry.startTime); }
+                const targetNode = dom.get((entry as any).element)?.id 
+                if(targetNode){
+                    metric.logTarget(Event.LargestPaintTarget, targetNode)
+                }
                 break;
         }
     }

packages/clarity-js/types/data.d.ts

@@ -70,7 +70,11 @@ export const enum Event {
     Snapshot = 43,
     Animation = 44,
     StyleSheetAdoption = 45,
-    StyleSheetUpdate = 46
+    StyleSheetUpdate = 46,
+/**
+ * Metric related event data
+ */
+    LargestPaintTarget = 47
 }
 
 export const enum Metric {

packages/clarity-visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.7.47",
+  "version": "0.7.48",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.7.47"
+    "clarity-decode": "^0.7.48"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",