clarity-js 0.8.13-beta → 0.8.14

package/src/data/metadata.ts

@@ -1,5 +1,5 @@
 import { Time } from "@clarity-types/core";
-import { BooleanFlag, Constant, Dimension, Metadata, MetadataCallback, MetadataCallbackOptions, Metric, Session, User, Setting } from "@clarity-types/data";
+import { BooleanFlag, Constant, Dimension, Metadata, MetadataCallback, MetadataCallbackOptions, Metric, Session, User, Setting, ConsentState, ConsentSource, ConsentData } from "@clarity-types/data";
 import * as clarity from "@src/clarity";
 import * as core from "@src/core";
 import config from "@src/core/config";
@@ -9,11 +9,14 @@ import * as dimension from "@src/data/dimension";
 import * as metric from "@src/data/metric";
 import { set } from "@src/data/variable";
 import * as trackConsent from "@src/data/consent";
+import { Constant as CoreConstant } from "@clarity-types/core";
 
 export let data: Metadata = null;
 export let callbacks: MetadataCallbackOptions[] = [];
 export let electron = BooleanFlag.False;
 let rootDomain = null;
+let consentStatus: ConsentState = null;
+let defaultStatus: ConsentState = {ad_Storage: Constant.Denied, analytics_Storage: Constant.Denied};
 
 export function start(): void {
   rootDomain = null;
@@ -54,6 +57,13 @@ export function start(): void {
   metric.max(Metric.Playback, BooleanFlag.False);
   metric.max(Metric.Electron, electron);
 
+  const zone = (window as any)?.[CoreConstant.Zone];
+  const isZone = zone && CoreConstant.Symbol in zone;
+
+  if (isZone) {
+    metric.max(Metric.AngularZone, BooleanFlag.True);
+  }
+
   // Capture navigator specific dimensions
   if (navigator) {
     dimension.log(Dimension.Language, navigator.language);
@@ -76,8 +86,12 @@ export function start(): void {
   }
 
   // Track consent config
-  trackConsent.config(config.track);
-
+  consentStatus = {
+    ad_Storage: config.track ? Constant.Granted : Constant.Denied,
+    analytics_Storage: config.track ? Constant.Granted : Constant.Denied,
+  }      
+  const consent = getConsentData(consentStatus, ConsentSource.Implicit);
+  trackConsent.config(consent);      
   // Track ids using a cookie if configuration allows it
   track(u);
 }
@@ -98,10 +112,11 @@ function userAgentData(): void {
 export function stop(): void {
   rootDomain = null;
   data = null;
+  consentStatus = null;
   callbacks.forEach(cb => { cb.called = false; });
 }
 
-export function metadata(cb: MetadataCallback, wait: boolean = true, recall: boolean = false): void {
+export function metadata(cb: MetadataCallback, wait: boolean = true, recall: boolean = false, consentInfo: boolean = false): void {
   let upgraded = config.lean ? BooleanFlag.False : BooleanFlag.True;
   let called = false;
   // if caller hasn't specified that they want to skip waiting for upgrade but we've already upgraded, we need to
@@ -109,11 +124,11 @@ export function metadata(cb: MetadataCallback, wait: boolean = true, recall: boo
   // we go through the upgrading flow.
   if (data && (upgraded || wait === false)) {
     // Immediately invoke the callback if the caller explicitly doesn't want to wait for the upgrade confirmation
-    cb(data, !config.lean);
+    cb(data, !config.lean, consentInfo? consentStatus : undefined);
     called = true;
   }
   if (recall || !called) {
-    callbacks.push({ callback: cb, wait, recall, called });
+    callbacks.push({ callback: cb, wait, recall, called, consentInfo });
   }
 }
 
@@ -121,8 +136,27 @@ export function id(): string {
   return data ? [data.userId, data.sessionId, data.pageNum].join(Constant.Dot) : Constant.Empty;
 }
 
-export function consent(status: boolean = true): void {
+//TODO: Remove this function once consentv2 is fully released
+export function consent(status = true): void {
   if (!status) {
+    consentv2();
+    return;
+  }
+  
+  consentv2({ ad_Storage: Constant.Granted, analytics_Storage: Constant.Granted });
+  trackConsent.consent();
+}
+
+export function consentv2(consentState: ConsentState = defaultStatus, source: number = ConsentSource.API): void {
+  consentStatus = {
+    ad_Storage: normalizeConsent(consentState.ad_Storage),
+    analytics_Storage: normalizeConsent(consentState.analytics_Storage)
+  };
+
+  callback(true);
+  const consentData = getConsentData(consentStatus, source);
+  
+  if (!consentData.analytics_Storage) {
     config.track = false;
     setCookie(Constant.SessionKey, Constant.Empty, -Number.MAX_VALUE);
     setCookie(Constant.CookieKey, Constant.Empty, -Number.MAX_VALUE);
@@ -135,10 +169,25 @@ export function consent(status: boolean = true): void {
     config.track = true;
     track(user(), BooleanFlag.True);
     save();
+    trackConsent.consentv2(consentData);
     trackConsent.consent();
   }
 }
 
+function getConsentData(consentState: ConsentState, source : ConsentSource): ConsentData {
+  let consent: ConsentData = {
+    source: source,
+    ad_Storage: consentState.ad_Storage === Constant.Granted ? BooleanFlag.True : BooleanFlag.False,
+    analytics_Storage: consentState.analytics_Storage === Constant.Granted ? BooleanFlag.True : BooleanFlag.False,
+  };
+
+  return consent;
+}
+
+function normalizeConsent(value: unknown): string {
+  return typeof value === 'string' ? value.toLowerCase() : Constant.Denied;
+}
+
 export function clear(): void {
   // Clear any stored information in the cookie that tracks session information so we can restart fresh the next time
   setCookie(Constant.SessionKey, Constant.Empty, 0);
@@ -154,9 +203,9 @@ function tab(): string {
   return id;
 }
 
-export function callback(): void {
+export function callback(consentUpdate:boolean = false): void {
   let upgrade = config.lean ? BooleanFlag.False : BooleanFlag.True;
-  processCallback(upgrade);
+  processCallback(upgrade, consentUpdate);
 }
 
 export function save(): void {
@@ -167,12 +216,16 @@ export function save(): void {
   setCookie(Constant.SessionKey, [data.sessionId, ts, data.pageNum, upgrade, upload].join(Constant.Pipe), Setting.SessionExpire);
 }
 
-function processCallback(upgrade: BooleanFlag) {
+function processCallback(upgrade: BooleanFlag, consentUpdate: boolean = false): void {
   if (callbacks.length > 0) {
     for (let i = 0; i < callbacks.length; i++) {
       const cb = callbacks[i];
-      if (cb.callback && !cb.called && (!cb.wait || upgrade)) {
-        cb.callback(data, !config.lean);
+      if (
+        cb.callback && 
+        ((!cb.called && !consentUpdate) || (cb.consentInfo && consentUpdate)) && //If consentUpdate is true, we only call the callback if it has consentInfo
+        (!cb.wait || upgrade)       
+      ) {
+        cb.callback(data, !config.lean, cb.consentInfo ? consentStatus : undefined);
         cb.called = true;
         if (!cb.recall) {
           callbacks.splice(i, 1);

package/src/interaction/pointer.ts

@@ -124,12 +124,12 @@ export function reset(): void {
 }
 
 function similar(last: PointerState, current: PointerState): boolean {
-    const dx = last.data.x - current.data.x;
-    const dy = last.data.y - current.data.y;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-    const gap = current.time - last.time;
-    const match = current.data.target === last.data.target;
-    const sameId = current.data.id !== undefined ? current.data.id === last.data.id : true;
+    let dx = last.data.x - current.data.x;
+    let dy = last.data.y - current.data.y;
+    let distance = Math.sqrt(dx * dx + dy * dy);
+    let gap = current.time - last.time;
+    let match = current.data.target === last.data.target;
+    let sameId = current.data.id !== undefined ? current.data.id === last.data.id : true;
     return current.event === last.event && match && distance < Setting.Distance && gap < Setting.PointerInterval && sameId;
 }
 

package/src/interaction/scroll.ts

@@ -6,10 +6,10 @@ import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
 import throttle from "@src/core/throttle";
-import * as dimension from "@src/data/dimension";
 import { iframe } from "@src/layout/dom";
 import { target, metadata } from "@src/layout/target";
 import encode from "./encode";
+import * as dimension from "@src/data/dimension";
 
 export let state: ScrollState[] = [];
 let initialTop: Node = null;
@@ -22,8 +22,8 @@ export function start(): void {
 }
 
 export function observe(root: Node): void {
-    const frame = iframe(root);
-    const node = frame ? frame.contentWindow : root === document ? window : root;
+    let frame = iframe(root);
+    let node = frame ? frame.contentWindow : (root === document ? window : root);
     bind(node, "scroll", throttledRecompute, true);
 }
 
@@ -102,9 +102,9 @@ function process(event: Event): void {
 }
 
 function similar(last: ScrollState, current: ScrollState): boolean {
-    const dx = last.data.x - current.data.x;
-    const dy = last.data.y - current.data.y;
-    return dx * dx + dy * dy < Setting.Distance * Setting.Distance && current.time - last.time < Setting.ScrollInterval;
+    let dx = last.data.x - current.data.x;
+    let dy = last.data.y - current.data.y;
+    return (dx * dx + dy * dy < Setting.Distance * Setting.Distance) && (current.time - last.time < Setting.ScrollInterval);
 }
 
 export function compute(): void {

package/src/layout/region.ts

@@ -90,12 +90,9 @@ function handler(entries: IntersectionObserverEntry[]): void {
         // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
         // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
         if (regionMap.has(target) && rect.width + rect.height > 0 && viewport && viewport.width > 0 && viewport.height > 0) {
-            const id = target ? dom.getId(target) : null;
-            const data =
-                id in regions
-                    ? regions[id]
-                    : { id, name: regionMap.get(target), interaction: InteractionState.None, visibility: RegionVisibility.Rendered };
-
+            let id = target ? dom.getId(target) : null;
+            let data = id in regions ? regions[id] : { id, name: regionMap.get(target), interaction: InteractionState.None, visibility: RegionVisibility.Rendered };
+            
             // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
             // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
             let viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;

package/src/layout/style.ts

@@ -1,4 +1,4 @@
-import { Event } from "@clarity-types/data";
+import { Event, Metric } from "@clarity-types/data";
 import { StyleSheetOperation, StyleSheetState } from "@clarity-types/layout";
 import { time } from "@src/core/time";
 import { shortid } from "@src/data/metadata";

package/types/data.d.ts

@@ -3,12 +3,13 @@ export type Target = (number | Node);
 export type Token = (string | number | number[] | string[] | (string | number)[]);
 export type DecodedToken = (any | any[]);
 
-export type MetadataCallback = (data: Metadata, playback: boolean) => void;
+export type MetadataCallback = (data: Metadata, playback: boolean, consentStatus?: ConsentState) => void;
 export interface MetadataCallbackOptions {
     callback: MetadataCallback,
     wait: boolean,
     recall: boolean,
-    called: boolean
+    called: boolean,
+    consentInfo: boolean
 }
 export type SignalCallback = (data: ClaritySignal) => void
 
@@ -71,6 +72,7 @@ export const enum Event {
     Animation = 44,
     StyleSheetAdoption = 45,
     StyleSheetUpdate = 46,
+    Consent = 47,
 
     // Apps specific events
     WebViewDiscover = 100,
@@ -131,7 +133,8 @@ export const enum Metric {
      * @deprecated Move it to dimension as it'll report only last value
      */
     InteractionNextPaint = 37,
-    HistoryClear = 38
+    HistoryClear = 38,
+    AngularZone = 39,
 }
 
 export const enum Dimension {
@@ -346,6 +349,8 @@ export const enum Constant {
     SHA256 = "SHA-256",
     Electron = "Electron",
     Caret = "^",
+    Granted = "granted",
+    Denied = "denied",
 }
 
 export const enum XMLReadyState {
@@ -356,6 +361,10 @@ export const enum XMLReadyState {
     Done = 4
 }
 
+export const enum ConsentSource{
+    Implicit = 0,
+    API = 1
+}
 
 /* Helper Interfaces */
 
@@ -513,4 +522,15 @@ export interface PerformanceEventTiming extends PerformanceEntry {
 export interface Interaction {
     id: number;
     latency: number;
-}
+}
+
+export interface ConsentState {
+    ad_Storage?: string;
+    analytics_Storage?: string;
+}
+
+export interface ConsentData {
+    source: ConsentSource;
+    ad_Storage: BooleanFlag;
+    analytics_Storage: BooleanFlag;
+}

package/types/index.d.ts

@@ -12,6 +12,7 @@ interface Clarity {
   resume: () => void;
   upgrade: (key: string) => void;
   consent: () => void;
+  consentv2: () => void;
   event: (name: string, value: string) => void;
   set: (variable: string, value: string | string[]) => void;
   identify: (userId: string, sessionId?: string, pageId?: string, userHint?: string) => void;

package/types/interaction.d.ts

@@ -18,7 +18,6 @@ export const enum Setting {
     ScrollInterval = 50, // 25 milliseconds
     PointerInterval = 25, // 25 milliseconds
     Throttle = 25, // 25 milliseconds
-    // biome-ignore lint/style/useLiteralEnumMembers: Time.Second is a const enum, it is compiled to a number
     TimelineSpan = 2 * Time.Second, // 2 seconds
 }