diff --git a/lerna.json b/lerna.json index d77b938a..e65babfc 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "packages/*" ], - "version": "0.7.29", + "version": "0.7.30", "npmClient": "yarn", "useWorkspaces": true } diff --git a/packages/clarity-decode/package.json b/packages/clarity-decode/package.json index b609ea72..dfae58e0 100644 --- a/packages/clarity-decode/package.json +++ b/packages/clarity-decode/package.json @@ -1,6 +1,6 @@ { "name": "clarity-decode", - "version": "0.7.29", + "version": "0.7.30", "description": "An analytics library that uses web page interactions to generate aggregated insights", "author": "Microsoft Corp.", "license": "MIT", diff --git a/packages/clarity-decode/src/interaction.ts b/packages/clarity-decode/src/interaction.ts index 6a9f4edd..2366f28f 100644 --- a/packages/clarity-decode/src/interaction.ts +++ b/packages/clarity-decode/src/interaction.ts @@ -72,7 +72,9 @@ export function decode(tokens: Data.Token[]): InteractionEvent { let scrollData: Interaction.ScrollData = { target: tokens[2] as number, x: tokens[3] as number, - y: tokens[4] as number + y: tokens[4] as number, + top: tokens[5] as string, + bottom: tokens[6] as string }; return { time, event, data: scrollData }; case Data.Event.Timeline: diff --git a/packages/clarity-devtools/package.json b/packages/clarity-devtools/package.json index 9284c8ad..4887fc66 100644 --- a/packages/clarity-devtools/package.json +++ b/packages/clarity-devtools/package.json @@ -1,6 +1,6 @@ { "name": "clarity-devtools", - "version": "0.7.29", + "version": "0.7.30", "private": true, "description": "Adds Clarity debugging support to browser devtools", "author": "Microsoft Corp.", diff --git a/packages/clarity-js/package.json b/packages/clarity-js/package.json index de77567f..dfea0157 100644 --- a/packages/clarity-js/package.json +++ b/packages/clarity-js/package.json @@ -1,6 +1,6 @@ { "name": "clarity-js", - "version": "0.7.29", + "version": "0.7.30", "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/version.ts b/packages/clarity-js/src/core/version.ts index 67edfec0..6a6e946c 100644 --- a/packages/clarity-js/src/core/version.ts +++ b/packages/clarity-js/src/core/version.ts @@ -1,2 +1,2 @@ -let version = "0.7.29"; +let version = "0.7.30"; export default version; diff --git a/packages/clarity-js/src/interaction/scroll.ts b/packages/clarity-js/src/interaction/scroll.ts index 3f8aa458..6468f318 100644 --- a/packages/clarity-js/src/interaction/scroll.ts +++ b/packages/clarity-js/src/interaction/scroll.ts @@ -5,6 +5,7 @@ import { schedule } from "@src/core/task"; import { time } from "@src/core/time"; import { clearTimeout, setTimeout } from "@src/core/timeout"; import { iframe } from "@src/layout/dom"; +import * as dom from "../layout/dom"; import { target } from "@src/layout/target"; import encode from "./encode"; @@ -39,7 +40,16 @@ function recompute(event: UIEvent = null): void { // And, if for some reason that is not available, fall back to looking up scrollTop on document.documentElement. let x = element === de && "pageXOffset" in w ? Math.round(w.pageXOffset) : Math.round((element as HTMLElement).scrollLeft); let y = element === de && "pageYOffset" in w ? Math.round(w.pageYOffset) : Math.round((element as HTMLElement).scrollTop); - let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y} }; + const width = window.innerWidth; + const height = window.innerHeight; + const xPosition = width / 3; + 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); + + let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y, top, bottom} }; // 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; } @@ -53,6 +63,23 @@ function recompute(event: UIEvent = null): void { timeout = setTimeout(process, Setting.LookAhead, Event.Scroll); } +function getPositionHash(x: number, y: number): string { + let node: Node; + if ("caretPositionFromPoint" in document) { + node = (document as any).caretPositionFromPoint(x, y)?.offsetNode; + } else if ("caretRangeFromPoint" in document) { + node = document.caretRangeFromPoint(x, y)?.startContainer; + } + if (!node) { + node = document.elementFromPoint(x, y) as Node; + } + if (node && node.nodeType === Node.TEXT_NODE) { + node = node.parentNode; + } + + return dom.get(node)?.hash?.[1]; +} + export function reset(): void { state = []; } diff --git a/packages/clarity-js/types/interaction.d.ts b/packages/clarity-js/types/interaction.d.ts index 5d777fe7..2b6da19d 100644 --- a/packages/clarity-js/types/interaction.d.ts +++ b/packages/clarity-js/types/interaction.d.ts @@ -134,6 +134,8 @@ export interface ScrollData { target: Target; x: number; y: number; + top: string; + bottom: string; } export interface SelectionData { diff --git a/packages/clarity-visualize/package.json b/packages/clarity-visualize/package.json index 8d61f497..5a79a8bf 100644 --- a/packages/clarity-visualize/package.json +++ b/packages/clarity-visualize/package.json @@ -1,6 +1,6 @@ { "name": "clarity-visualize", - "version": "0.7.29", + "version": "0.7.30", "description": "An analytics library that uses web page interactions to generate aggregated insights", "author": "Microsoft Corp.", "license": "MIT",