tracking initial top & bottom elements

packages/clarity-decode/src/interaction.ts

@@ -74,7 +74,9 @@ export function decode(tokens: Data.Token[]): InteractionEvent {
                 x: tokens[3] as number,
                 y: tokens[4] as number,
                 top: tokens.length > 5 ? tokens[5] as string : null,
-                bottom: tokens.length > 6 ? tokens[6] as string : null
+                bottom: tokens.length > 6 ? tokens[6] as string : null,
+                topNode: null,
+                bottomNode: null
             };
             return { time, event, data: scrollData };
         case Data.Event.Timeline:

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

@@ -1,4 +1,4 @@
-import { Constant, Event, Token } from "@clarity-types/data";
+import { Constant, Dimension, Event, Token } from "@clarity-types/data";
 import * as scrub from "@src/core/scrub";
 import { time } from "@src/core/time";
 import * as baseline from "@src/data/baseline";
@@ -16,6 +16,7 @@ import * as submit from "@src/interaction/submit";
 import * as timeline from "@src/interaction/timeline";
 import * as unload from "@src/interaction/unload";
 import * as visibility from "@src/interaction/visibility";
+import * as dimension from "@src/data/dimension";
 
 export default async function (type: Event, ts: number = null): Promise<void> {
     let t = ts || time();
@@ -117,17 +118,23 @@ export default async function (type: Event, ts: number = null): Promise<void> {
         case Event.Scroll:
             for (let entry of scroll.state) {
                 let sTarget = metadata(entry.data.target as Node, entry.event);
+                const top = metadata(entry.data.topNode, entry.event);
+                const bottom = metadata(entry.data.bottomNode, entry.event);
                 if (sTarget.id > 0) {
                     tokens = [entry.time, entry.event];
                     tokens.push(sTarget.id);
                     tokens.push(entry.data.x);
                     tokens.push(entry.data.y);
-                    tokens.push(entry.data.top);
-                    tokens.push(entry.data.bottom);
+                    tokens.push(top?.hash?.[1]);
+                    tokens.push(bottom?.hash?.[1]);
                     queue(tokens);
                     baseline.track(entry.event, entry.data.x, entry.data.y, entry.time);
                 }
             }
+            const initTop = metadata(scroll.initElement?.topNode, null);
+            const initBottom = metadata(scroll.initElement?.bottomNode, null);
+            dimension.log(Dimension.InitialTop, initTop?.hash?.[1]);
+            dimension.log(Dimension.InitialBottom, initBottom?.hash?.[1]);
             scroll.reset();
             break;
         case Event.Change:

packages/clarity-js/src/interaction/scroll.ts

@@ -1,14 +1,15 @@
 import { Event } from "@clarity-types/data";
-import { ScrollState, Setting } from "@clarity-types/interaction";
+import { ScrollData, ScrollState, Setting } from "@clarity-types/interaction";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
-import { iframe, get } from "@src/layout/dom";
+import { iframe } from "@src/layout/dom";
 import { target } from "@src/layout/target";
 import encode from "./encode";
 
 export let state: ScrollState[] = [];
+export let initElement: ScrollData;
 let timeout: number = null;
 
 export function start(): void {
@@ -45,13 +46,17 @@ function recompute(event: UIEvent = null): void {
     const yOffset = width > height ? height * 0.15 : height * 0.2;
     const startYPosition = yOffset;
     const endYPosition = height - yOffset;
-    const top = getPositionHash(xPosition, startYPosition);
-    const bottom = getPositionHash(xPosition, endYPosition);
+    const topNode = getPositionNode(xPosition, startYPosition);
+    const bottomNode = getPositionNode(xPosition, endYPosition);
 
-    let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y, top, bottom} };
+    let current: ScrollState =
+        { time: time(event), event: Event.Scroll, data: {target: element, x, y, topNode, bottomNode, top: null, bottom: null} };
 
     // We don't send any scroll events if this is the first event and the current position is top (0,0)
-    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) { return; }
+    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
+        initElement = {target: element, x, y, topNode, bottomNode, top: null, bottom: null};
+        return;
+    }
 
     let length = state.length;
     let last = length > 1 ? state[length - 2] : null;
@@ -62,7 +67,7 @@ function recompute(event: UIEvent = null): void {
     timeout = setTimeout(process, Setting.LookAhead, Event.Scroll);
 }
 
-function getPositionHash(x: number, y: number): string {
+function getPositionNode(x: number, y: number): Node {
     let node: Node;
     if ("caretPositionFromPoint" in document) {
         node = (document as any).caretPositionFromPoint(x, y)?.offsetNode;
@@ -76,7 +81,7 @@ function getPositionHash(x: number, y: number): string {
         node = node.parentNode;
     }
 
-    return get(node)?.hash?.[1];
+    return node;
 }
 
 export function reset(): void {

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

@@ -145,7 +145,9 @@ export const enum Dimension {
     ConnectionType = 27,
     Dob = 28,
     CookieVersion = 29,
-    DeviceFamily = 30 // Allows iOS SDK to override the DeviceFamily value parsed from UserAgent.
+    DeviceFamily = 30, // Allows iOS SDK to override the DeviceFamily value parsed from UserAgent.
+    InitialTop = 31,
+    InitialBottom = 32
 }
 
 export const enum Check {

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

@@ -134,6 +134,8 @@ export interface ScrollData {
     target: Target;
     x: number;
     y: number;
+    topNode: Node;
+    bottomNode: Node;
     top: string;
     bottom: string;
 }