@coframe/sdk 1.1.40 → 1.1.42

package/dist/pkg/cf.cjs.js

@@ -1105,6 +1105,9 @@ let waitingForCookies = false;
 const setWaitingForCookies = (value) => {
     waitingForCookies = value;
 };
+function isWaitingForCookies() {
+    return waitingForCookies;
+}
 let frameActivated = false;
 const setFrameActivated = (value) => {
     frameActivated = value;
@@ -1125,7 +1128,7 @@ function warnEventsNotSent() {
     }
 }
 
-const SDK_VERSION = '2.8.0';
+const SDK_VERSION = '2.9.0';
 const queuedEvents = [];
 const queuedMonitoringEvents = [];
 const queuedSessions = [];
@@ -1230,7 +1233,7 @@ function flushQueuedEvents(projectId) {
         queuedSessions.length = 0;
     }
 }
-function queueEvent(coframe, sessionInfo) {
+function queueEvent(coframe, sessionInfo, heatmap) {
     const { projectId, sessionId, eventType, orgId, userToken } = sessionInfo;
     const data = {
         type: eventType,
@@ -1242,13 +1245,19 @@ function queueEvent(coframe, sessionInfo) {
         user_token: userToken,
     };
     const seg = sessionInfo.personalizationHeaders;
-    const metadata = seg ? { personalization_headers: { ...seg } } : {};
-    if (eventType === 'page_view') {
-        data.content = { universal_selector: {}, metadata };
-    }
-    else {
-        data.content = { metadata };
-    }
+    const metadata = seg
+        ? { personalization_headers: { ...seg } }
+        : {};
+    if (heatmap === null || heatmap === void 0 ? void 0 : heatmap.hm)
+        metadata.hm = heatmap.hm;
+    data.content =
+        eventType === 'page_view'
+            ? {
+                universal_selector: {},
+                metadata,
+                screen_size: { width: window.innerWidth, height: window.innerHeight },
+            }
+            : { metadata, ...heatmap === null || heatmap === void 0 ? void 0 : heatmap.content };
     queueEventForBatchedSending(coframe, data);
 }
 function queueVariantViewEvent(coframe, { projectId, sessionId, orgId, userToken, experimentId, variantId, }) {
@@ -1263,7 +1272,7 @@ function queueVariantViewEvent(coframe, { projectId, sessionId, orgId, userToken
         user_token: userToken,
     });
 }
-function sendPageEngagementEvent(coframe, eventType, event, { projectId, sessionId, duration = 0, userToken, personalizationHeaders, }) {
+function sendPageEngagementEvent(coframe, eventType, event, { projectId, sessionId, orgId, duration = 0, userToken, personalizationHeaders, collect, }) {
     var _a;
     if (event
         .composedPath()
@@ -1286,6 +1295,7 @@ function sendPageEngagementEvent(coframe, eventType, event, { projectId, session
         session_id: sessionId,
         time: new Date(),
         url: getCurrentPageUrl(),
+        org_id: orgId,
         user_token: userToken,
         content: {
             universal_selector: getSelector(targetElement, {
@@ -1308,7 +1318,10 @@ function sendPageEngagementEvent(coframe, eventType, event, { projectId, session
             }),
         },
     };
-    queueEventForBatchedSending(coframe, data, Boolean(metricIds === null || metricIds === void 0 ? void 0 : metricIds.length));
+    const isConversion = Boolean(metricIds === null || metricIds === void 0 ? void 0 : metricIds.length);
+    if (!(collect === null || collect === void 0 ? void 0 : collect(data, realEventTarget, event, isConversion))) {
+        queueEventForBatchedSending(coframe, data, isConversion);
+    }
     const processingDuration = performance.now() - startTime;
     if (coframe.status) {
         if (!coframe.status.events) {
@@ -3382,6 +3395,235 @@ function notifyEventsFlushed() {
     }
 }
 
+const DEFAULT_BLOCK_SELECTOR = '[data-cf-block],.cf-block';
+const INTERACTIVE_SELECTOR = 'a,button,input,select,textarea,label,summary,[href],[onclick],[contenteditable],[tabindex]:not([tabindex="-1"]),[role=button],[role=link],[role=tab],[role=checkbox],[role=menuitem]';
+const HOLD_MS = 1000;
+const RAGE_WINDOW_MS = 700;
+const RAGE_RADIUS_PX = 30;
+const RAGE_CLICKS = 3;
+let enabled = false;
+let allPages = false;
+let coframe = null;
+let blockSelector = DEFAULT_BLOCK_SELECTOR;
+const held = [];
+let recent = [];
+let lastActivity = 0;
+let observer = null;
+let pageView = '';
+let maxDepth = 0;
+let engagedMs = 0;
+let visibleSince = null;
+let navigated = false;
+function meta(name) {
+    const tag = document.querySelector(`meta[name="coframe:${name}"]`);
+    return (tag === null || tag === void 0 ? void 0 : tag.getAttribute('content')) || undefined;
+}
+function heatmapActive() {
+    return enabled && (allPages || !!meta('page'));
+}
+function pageFields(withHeight) {
+    const fields = {
+        page: meta('page'),
+        ver: meta('version'),
+        variant: meta('variant'),
+        row: meta('row'),
+    };
+    if (withHeight)
+        fields.doc_h = document.documentElement.scrollHeight;
+    return fields;
+}
+function round3(value) {
+    return Math.round(Math.min(1, Math.max(0, value)) * 1000) / 1000;
+}
+function markActivity() {
+    lastActivity = Date.now();
+}
+function viewportBottom() {
+    return Math.round(window.scrollY + window.innerHeight);
+}
+function restartCounters(depth) {
+    maxDepth = depth;
+    engagedMs = 0;
+    visibleSince = document.hidden ? null : Date.now();
+}
+function syncPageView() {
+    if (!coframe || coframe.sessionId === pageView)
+        return;
+    pageView = coframe.sessionId;
+    if (navigated)
+        navigated = false;
+    else
+        restartCounters(viewportBottom());
+}
+function onScroll() {
+    markActivity();
+    syncPageView();
+    maxDepth = Math.max(maxDepth, viewportBottom());
+}
+function onVisibility() {
+    if (document.hidden) {
+        if (visibleSince !== null)
+            engagedMs += Date.now() - visibleSince;
+        visibleSince = null;
+        releaseHeldClicks();
+    }
+    else if (visibleSince === null) {
+        visibleSince = Date.now();
+    }
+}
+function readBlockSelector(selector) {
+    if (typeof selector !== 'string' || !selector)
+        return DEFAULT_BLOCK_SELECTOR;
+    try {
+        document.createElement('div').matches(selector);
+        return selector;
+    }
+    catch (_a) {
+        return DEFAULT_BLOCK_SELECTOR;
+    }
+}
+function startHeatmaps(target, project) {
+    var _a, _b;
+    const settings = (_a = project === null || project === void 0 ? void 0 : project.settings) === null || _a === void 0 ? void 0 : _a.heatmaps;
+    if (enabled || !(settings === null || settings === void 0 ? void 0 : settings.enabled))
+        return;
+    enabled = true;
+    allPages = !!settings.all_pages;
+    blockSelector = readBlockSelector((_b = project.settings.session_replay) === null || _b === void 0 ? void 0 : _b.block_selector);
+    coframe = target;
+    syncPageView();
+    document.addEventListener('scroll', onScroll, {
+        capture: true,
+        passive: true,
+    });
+    document.addEventListener('visibilitychange', onVisibility);
+    window.addEventListener('pagehide', releaseHeldClicks);
+    window.addEventListener('beforeunload', releaseHeldClicks);
+}
+function leaveFields() {
+    if (!heatmapActive())
+        return undefined;
+    syncPageView();
+    if (navigated)
+        return undefined;
+    return {
+        content: {
+            scroll_depth: Math.max(maxDepth, viewportBottom()),
+            'duration-ms': Math.round(engagedMs + (visibleSince === null ? 0 : Date.now() - visibleSince)),
+        },
+        hm: pageFields(true),
+    };
+}
+function pageLeaveFields() {
+    if (!enabled)
+        return undefined;
+    const fields = leaveFields();
+    restartCounters(0);
+    navigated = true;
+    return fields;
+}
+function watchMutations() {
+    if (observer || typeof MutationObserver !== 'function')
+        return;
+    observer = new MutationObserver(markActivity);
+    observer.observe(document.documentElement, {
+        attributes: true,
+        characterData: true,
+        childList: true,
+        subtree: true,
+    });
+}
+function settle(click) {
+    const index = held.indexOf(click);
+    if (index < 0)
+        return;
+    held.splice(index, 1);
+    if (click.hm.kind !== 'rage') {
+        const dead = click.candidate &&
+            lastActivity < click.t &&
+            document.activeElement === click.focused &&
+            location.href === click.href;
+        click.hm.kind = dead ? 'dead' : 'click';
+    }
+    if (coframe)
+        queueEventForBatchedSending(coframe, click.data);
+    if (observer && !held.some((h) => h.candidate)) {
+        observer.disconnect();
+        observer = null;
+    }
+}
+function releaseHeldClicks() {
+    for (const click of held.splice(0)) {
+        if (click.hm.kind === undefined)
+            click.hm.kind = null;
+        if (coframe)
+            queueEventForBatchedSending(coframe, click.data);
+    }
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
+}
+function copyKey(node, id) {
+    const items = [];
+    for (let at = node; at; at = at.parentElement) {
+        const item = at.getAttribute('data-el-item');
+        if (item)
+            items.unshift(item);
+    }
+    return items.length ? `${id}~${items.join('.')}` : id;
+}
+function collectClick(data, target, event, isConversion) {
+    if (!target.closest || target.closest(blockSelector))
+        return false;
+    const content = data.content;
+    const position = content.position;
+    const hm = pageFields(true);
+    const anchor = target.closest('[data-el]');
+    if (anchor) {
+        const id = anchor.getAttribute('data-el');
+        hm.el = id ? copyKey(anchor, id) : undefined;
+        const rect = anchor.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+            hm.fx = round3((event.clientX - rect.left) / rect.width);
+            hm.fy = round3((event.clientY - rect.top) / rect.height);
+        }
+    }
+    content.metadata = {
+        ...content.metadata,
+        hm,
+    };
+    const now = Date.now();
+    const click = {
+        data,
+        hm,
+        x: position.x,
+        y: position.y,
+        t: now,
+        candidate: !target.closest(INTERACTIVE_SELECTOR),
+        focused: document.activeElement,
+        href: location.href,
+    };
+    recent = recent.filter((r) => now - r.t <= RAGE_WINDOW_MS);
+    recent.push(click);
+    const cluster = recent.filter((r) => Math.abs(r.x - click.x) <= RAGE_RADIUS_PX &&
+        Math.abs(r.y - click.y) <= RAGE_RADIUS_PX);
+    if (cluster.length >= RAGE_CLICKS) {
+        for (const r of cluster)
+            r.hm.kind = 'rage';
+    }
+    if (isConversion) {
+        if (hm.kind === undefined)
+            hm.kind = null;
+        return false;
+    }
+    held.push(click);
+    if (click.candidate)
+        watchMutations();
+    setTimeout(() => settle(click), HOLD_MS);
+    return true;
+}
+
 function startSession(Coframe, cookiesEnabled, executionStartTime, personalizationHeaders, sessionContext, pageUrl = getCurrentPageUrl()) {
     const sessionPayload = [
         Coframe,
@@ -3408,7 +3650,7 @@ function startSession(Coframe, cookiesEnabled, executionStartTime, personalizati
         orgId: Coframe.orgId,
         userToken: Coframe.userToken,
         personalizationHeaders,
-    });
+    }, heatmapActive() ? { hm: pageFields(false) } : undefined);
 }
 function reportInitTiming(Coframe, project, integrationStartTime, executionStartTime) {
     var _a;
@@ -3641,20 +3883,15 @@ function setupListeners(Coframe, executionStartTime) {
         sendPageEngagementEvent(Coframe, 'click', event, {
             projectId: Coframe.projectId,
             sessionId: Coframe.sessionId,
+            orgId: Coframe.orgId,
             userToken: Coframe.userToken,
             personalizationHeaders: Coframe.personalizationHeaders,
+            collect: heatmapActive() ? collectClick : undefined,
         });
     };
     document.addEventListener('click', handleClick, true);
     const handleEventFlush = debounce((eventType) => {
-        queueEvent(Coframe, {
-            projectId: Coframe.projectId,
-            sessionId: Coframe.sessionId,
-            eventType: eventType,
-            orgId: Coframe.orgId,
-            userToken: Coframe.userToken,
-            personalizationHeaders: Coframe.personalizationHeaders,
-        });
+        queueLeaveEvent(Coframe, eventType, eventType === 'tab_show' ? undefined : leaveFields());
         flushQueuedEvents(Coframe.projectId);
         notifyEventsFlushed();
     }, 1);
@@ -3666,11 +3903,27 @@ function setupListeners(Coframe, executionStartTime) {
         handleEventFlush(eventType);
     });
 }
+function queueLeaveEvent(Coframe, eventType, fields) {
+    queueEvent(Coframe, {
+        projectId: Coframe.projectId,
+        sessionId: Coframe.sessionId,
+        eventType,
+        orgId: Coframe.orgId,
+        userToken: Coframe.userToken,
+        personalizationHeaders: Coframe.personalizationHeaders,
+    }, fields);
+}
+function sendPageLeave(Coframe) {
+    const fields = pageLeaveFields();
+    if (fields)
+        queueLeaveEvent(Coframe, 'page_leave', fields);
+}
 function setupTracking(Coframe, projectResult, previewVariantId, executionStartTime, nonce, waitForCookiesEnabled, onConsentChange) {
     var _a, _b;
     const logger = Coframe.logger;
     const { project } = projectResult;
     setTrackOnlyActivatedFrames(!!((_a = project === null || project === void 0 ? void 0 : project.settings) === null || _a === void 0 ? void 0 : _a.track_only_activated_frames));
+    startHeatmaps(Coframe, project);
     const analytics = createTreatmentAnalytics(Coframe, previewVariantId);
     setupListeners(Coframe, executionStartTime);
     const managedAnalyticsCallback = (_b = project === null || project === void 0 ? void 0 : project.settings) === null || _b === void 0 ? void 0 : _b.analytics_callback;
@@ -3786,6 +4039,7 @@ function setupSPANavigation(Coframe, project, config, previewVariantId, isSessio
     let navigationAbortController = null;
     observeUrlChanges(false, async (newPageUrl, _oldPageUrl) => {
         var _a;
+        sendPageLeave(Coframe);
         if (navigationAbortController)
             navigationAbortController.abort();
         navigationAbortController = new AbortController();
@@ -3934,11 +4188,90 @@ async function modifyPage(Coframe, configResult, projectResult, analytics) {
     setupFlushInterval(Coframe);
 }
 
+function readClientCommand() {
+    try {
+        const cmd = findLastCmd((c) => typeof c.cookiesEnabled === 'boolean');
+        if (!cmd)
+            return undefined;
+        return cmd.cookiesEnabled === true ? 'granted' : 'denied';
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+function readOneTrust() {
+    var _a;
+    try {
+        const { OnetrustActiveGroups: groups, OneTrust } = window;
+        if (typeof groups !== 'string' && OneTrust === undefined)
+            return undefined;
+        if (typeof groups === 'string' && groups.split(',').indexOf('C0002') !== -1)
+            return 'granted';
+        return ((_a = OneTrust === null || OneTrust === void 0 ? void 0 : OneTrust.IsAlertBoxClosed) === null || _a === void 0 ? void 0 : _a.call(OneTrust)) === true ? 'denied' : 'pending';
+    }
+    catch (_b) {
+        return undefined;
+    }
+}
+function readCookiebot() {
+    var _a;
+    try {
+        const { Cookiebot } = window;
+        if (Cookiebot === undefined)
+            return undefined;
+        if (((_a = Cookiebot.consent) === null || _a === void 0 ? void 0 : _a.statistics) === true)
+            return 'granted';
+        return Cookiebot.hasResponse === true ? 'denied' : 'pending';
+    }
+    catch (_b) {
+        return undefined;
+    }
+}
+function readConsentMode() {
+    var _a;
+    try {
+        const { dataLayer } = window;
+        if (!Array.isArray(dataLayer))
+            return undefined;
+        let update;
+        let defaultGranted = false;
+        let defaultDenied = false;
+        for (let i = 0; i < dataLayer.length; i++) {
+            const entry = dataLayer[i];
+            if (entry === null ||
+                typeof entry !== 'object' ||
+                entry[0] !== 'consent' ||
+                (entry[1] !== 'default' && entry[1] !== 'update')) {
+                continue;
+            }
+            const storage = (_a = entry[2]) === null || _a === void 0 ? void 0 : _a.analytics_storage;
+            if (storage !== 'granted' && storage !== 'denied')
+                continue;
+            if (entry[1] === 'update')
+                update = storage;
+            else if (storage === 'denied')
+                defaultDenied = true;
+            else
+                defaultGranted = true;
+        }
+        if (update !== undefined)
+            return update;
+        if (defaultDenied)
+            return 'pending';
+        return defaultGranted ? 'granted' : undefined;
+    }
+    catch (_b) {
+        return undefined;
+    }
+}
+
 let startRequested = false;
 let replayScriptUrl;
 const COMPILED_REPLAY_SCRIPT_URL = `${"https://edge.cofra.me"}/replay/latest.js`;
 const CONSENT_POLL_MS = 100;
 const CONSENT_WAIT_MS = 5000;
+const CONSENT_DETECT_WAIT_MS = 10000;
+const EXPLICIT_CONSENT_WAIT_MS = 60000;
 function configureReplayScriptUrl(url) {
     replayScriptUrl = (url === null || url === void 0 ? void 0 : url.trim()) || undefined;
 }
@@ -3949,8 +4282,25 @@ function readReplayConsent() {
             return { state: 'denied', reason: 'gpc' };
         }
         const shopify = window.Shopify;
-        if (shopify === undefined)
-            return { state: 'allowed', source: 'none' };
+        if (shopify === undefined) {
+            const readers = [
+                [readClientCommand, 'client'],
+                [readOneTrust, 'onetrust'],
+                [readCookiebot, 'cookiebot'],
+                [readConsentMode, 'consent_mode'],
+            ];
+            for (let i = 0; i < readers.length; i++) {
+                const [read, source] = readers[i];
+                const signal = read();
+                if (signal === 'granted')
+                    return { state: 'allowed', source };
+                if (signal === 'denied')
+                    return { state: 'denied', reason: 'consent_denied' };
+                if (signal === 'pending')
+                    return { state: 'pending', detected: true };
+            }
+            return { state: 'pending', detected: isWaitingForCookies() };
+        }
         const customerPrivacy = shopify.customerPrivacy;
         const analyticsProcessingAllowed = customerPrivacy === null || customerPrivacy === void 0 ? void 0 : customerPrivacy.analyticsProcessingAllowed;
         if (typeof analyticsProcessingAllowed === 'function') {
@@ -4052,11 +4402,14 @@ function startReplayIfEnabled(coframe, project, nonce) {
         const settings = (_a = project.settings) === null || _a === void 0 ? void 0 : _a.session_replay;
         if ((settings === null || settings === void 0 ? void 0 : settings.enabled) !== true ||
             typeof CompressionStream !== 'function' ||
-            !shouldSendEvents() ||
+            !shouldSendEvents({
+                ignoreConsent: window.Shopify === undefined,
+            }) ||
             startRequested) {
             return;
         }
         startRequested = true;
+        const isShopify = window.Shopify !== undefined;
         let waited = 0;
         const decide = () => {
             var _a;
@@ -4067,7 +4420,12 @@ function startReplayIfEnabled(coframe, project, nonce) {
             else if (consent.state === 'denied') {
                 reportReplaySkipped(coframe, consent.reason);
             }
-            else if (waited >= CONSENT_WAIT_MS) {
+            else if (!isShopify &&
+                consent.detected !== true &&
+                waited >= CONSENT_DETECT_WAIT_MS) {
+                reportReplaySkipped(coframe, 'consent_not_configured');
+            }
+            else if (waited >= (isShopify ? CONSENT_WAIT_MS : EXPLICIT_CONSENT_WAIT_MS)) {
                 reportReplaySkipped(coframe, 'consent_unavailable');
             }
             else {

package/dist/pkg/cf.esm.mjs

@@ -1103,6 +1103,9 @@ let waitingForCookies = false;
 const setWaitingForCookies = (value) => {
     waitingForCookies = value;
 };
+function isWaitingForCookies() {
+    return waitingForCookies;
+}
 let frameActivated = false;
 const setFrameActivated = (value) => {
     frameActivated = value;
@@ -1123,7 +1126,7 @@ function warnEventsNotSent() {
     }
 }
 
-const SDK_VERSION = '2.8.0';
+const SDK_VERSION = '2.9.0';
 const queuedEvents = [];
 const queuedMonitoringEvents = [];
 const queuedSessions = [];
@@ -1228,7 +1231,7 @@ function flushQueuedEvents(projectId) {
         queuedSessions.length = 0;
     }
 }
-function queueEvent(coframe, sessionInfo) {
+function queueEvent(coframe, sessionInfo, heatmap) {
     const { projectId, sessionId, eventType, orgId, userToken } = sessionInfo;
     const data = {
         type: eventType,
@@ -1240,13 +1243,19 @@ function queueEvent(coframe, sessionInfo) {
         user_token: userToken,
     };
     const seg = sessionInfo.personalizationHeaders;
-    const metadata = seg ? { personalization_headers: { ...seg } } : {};
-    if (eventType === 'page_view') {
-        data.content = { universal_selector: {}, metadata };
-    }
-    else {
-        data.content = { metadata };
-    }
+    const metadata = seg
+        ? { personalization_headers: { ...seg } }
+        : {};
+    if (heatmap === null || heatmap === void 0 ? void 0 : heatmap.hm)
+        metadata.hm = heatmap.hm;
+    data.content =
+        eventType === 'page_view'
+            ? {
+                universal_selector: {},
+                metadata,
+                screen_size: { width: window.innerWidth, height: window.innerHeight },
+            }
+            : { metadata, ...heatmap === null || heatmap === void 0 ? void 0 : heatmap.content };
     queueEventForBatchedSending(coframe, data);
 }
 function queueVariantViewEvent(coframe, { projectId, sessionId, orgId, userToken, experimentId, variantId, }) {
@@ -1261,7 +1270,7 @@ function queueVariantViewEvent(coframe, { projectId, sessionId, orgId, userToken
         user_token: userToken,
     });
 }
-function sendPageEngagementEvent(coframe, eventType, event, { projectId, sessionId, duration = 0, userToken, personalizationHeaders, }) {
+function sendPageEngagementEvent(coframe, eventType, event, { projectId, sessionId, orgId, duration = 0, userToken, personalizationHeaders, collect, }) {
     var _a;
     if (event
         .composedPath()
@@ -1284,6 +1293,7 @@ function sendPageEngagementEvent(coframe, eventType, event, { projectId, session
         session_id: sessionId,
         time: new Date(),
         url: getCurrentPageUrl(),
+        org_id: orgId,
         user_token: userToken,
         content: {
             universal_selector: getSelector(targetElement, {
@@ -1306,7 +1316,10 @@ function sendPageEngagementEvent(coframe, eventType, event, { projectId, session
             }),
         },
     };
-    queueEventForBatchedSending(coframe, data, Boolean(metricIds === null || metricIds === void 0 ? void 0 : metricIds.length));
+    const isConversion = Boolean(metricIds === null || metricIds === void 0 ? void 0 : metricIds.length);
+    if (!(collect === null || collect === void 0 ? void 0 : collect(data, realEventTarget, event, isConversion))) {
+        queueEventForBatchedSending(coframe, data, isConversion);
+    }
     const processingDuration = performance.now() - startTime;
     if (coframe.status) {
         if (!coframe.status.events) {
@@ -3380,6 +3393,235 @@ function notifyEventsFlushed() {
     }
 }
 
+const DEFAULT_BLOCK_SELECTOR = '[data-cf-block],.cf-block';
+const INTERACTIVE_SELECTOR = 'a,button,input,select,textarea,label,summary,[href],[onclick],[contenteditable],[tabindex]:not([tabindex="-1"]),[role=button],[role=link],[role=tab],[role=checkbox],[role=menuitem]';
+const HOLD_MS = 1000;
+const RAGE_WINDOW_MS = 700;
+const RAGE_RADIUS_PX = 30;
+const RAGE_CLICKS = 3;
+let enabled = false;
+let allPages = false;
+let coframe = null;
+let blockSelector = DEFAULT_BLOCK_SELECTOR;
+const held = [];
+let recent = [];
+let lastActivity = 0;
+let observer = null;
+let pageView = '';
+let maxDepth = 0;
+let engagedMs = 0;
+let visibleSince = null;
+let navigated = false;
+function meta(name) {
+    const tag = document.querySelector(`meta[name="coframe:${name}"]`);
+    return (tag === null || tag === void 0 ? void 0 : tag.getAttribute('content')) || undefined;
+}
+function heatmapActive() {
+    return enabled && (allPages || !!meta('page'));
+}
+function pageFields(withHeight) {
+    const fields = {
+        page: meta('page'),
+        ver: meta('version'),
+        variant: meta('variant'),
+        row: meta('row'),
+    };
+    if (withHeight)
+        fields.doc_h = document.documentElement.scrollHeight;
+    return fields;
+}
+function round3(value) {
+    return Math.round(Math.min(1, Math.max(0, value)) * 1000) / 1000;
+}
+function markActivity() {
+    lastActivity = Date.now();
+}
+function viewportBottom() {
+    return Math.round(window.scrollY + window.innerHeight);
+}
+function restartCounters(depth) {
+    maxDepth = depth;
+    engagedMs = 0;
+    visibleSince = document.hidden ? null : Date.now();
+}
+function syncPageView() {
+    if (!coframe || coframe.sessionId === pageView)
+        return;
+    pageView = coframe.sessionId;
+    if (navigated)
+        navigated = false;
+    else
+        restartCounters(viewportBottom());
+}
+function onScroll() {
+    markActivity();
+    syncPageView();
+    maxDepth = Math.max(maxDepth, viewportBottom());
+}
+function onVisibility() {
+    if (document.hidden) {
+        if (visibleSince !== null)
+            engagedMs += Date.now() - visibleSince;
+        visibleSince = null;
+        releaseHeldClicks();
+    }
+    else if (visibleSince === null) {
+        visibleSince = Date.now();
+    }
+}
+function readBlockSelector(selector) {
+    if (typeof selector !== 'string' || !selector)
+        return DEFAULT_BLOCK_SELECTOR;
+    try {
+        document.createElement('div').matches(selector);
+        return selector;
+    }
+    catch (_a) {
+        return DEFAULT_BLOCK_SELECTOR;
+    }
+}
+function startHeatmaps(target, project) {
+    var _a, _b;
+    const settings = (_a = project === null || project === void 0 ? void 0 : project.settings) === null || _a === void 0 ? void 0 : _a.heatmaps;
+    if (enabled || !(settings === null || settings === void 0 ? void 0 : settings.enabled))
+        return;
+    enabled = true;
+    allPages = !!settings.all_pages;
+    blockSelector = readBlockSelector((_b = project.settings.session_replay) === null || _b === void 0 ? void 0 : _b.block_selector);
+    coframe = target;
+    syncPageView();
+    document.addEventListener('scroll', onScroll, {
+        capture: true,
+        passive: true,
+    });
+    document.addEventListener('visibilitychange', onVisibility);
+    window.addEventListener('pagehide', releaseHeldClicks);
+    window.addEventListener('beforeunload', releaseHeldClicks);
+}
+function leaveFields() {
+    if (!heatmapActive())
+        return undefined;
+    syncPageView();
+    if (navigated)
+        return undefined;
+    return {
+        content: {
+            scroll_depth: Math.max(maxDepth, viewportBottom()),
+            'duration-ms': Math.round(engagedMs + (visibleSince === null ? 0 : Date.now() - visibleSince)),
+        },
+        hm: pageFields(true),
+    };
+}
+function pageLeaveFields() {
+    if (!enabled)
+        return undefined;
+    const fields = leaveFields();
+    restartCounters(0);
+    navigated = true;
+    return fields;
+}
+function watchMutations() {
+    if (observer || typeof MutationObserver !== 'function')
+        return;
+    observer = new MutationObserver(markActivity);
+    observer.observe(document.documentElement, {
+        attributes: true,
+        characterData: true,
+        childList: true,
+        subtree: true,
+    });
+}
+function settle(click) {
+    const index = held.indexOf(click);
+    if (index < 0)
+        return;
+    held.splice(index, 1);
+    if (click.hm.kind !== 'rage') {
+        const dead = click.candidate &&
+            lastActivity < click.t &&
+            document.activeElement === click.focused &&
+            location.href === click.href;
+        click.hm.kind = dead ? 'dead' : 'click';
+    }
+    if (coframe)
+        queueEventForBatchedSending(coframe, click.data);
+    if (observer && !held.some((h) => h.candidate)) {
+        observer.disconnect();
+        observer = null;
+    }
+}
+function releaseHeldClicks() {
+    for (const click of held.splice(0)) {
+        if (click.hm.kind === undefined)
+            click.hm.kind = null;
+        if (coframe)
+            queueEventForBatchedSending(coframe, click.data);
+    }
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
+}
+function copyKey(node, id) {
+    const items = [];
+    for (let at = node; at; at = at.parentElement) {
+        const item = at.getAttribute('data-el-item');
+        if (item)
+            items.unshift(item);
+    }
+    return items.length ? `${id}~${items.join('.')}` : id;
+}
+function collectClick(data, target, event, isConversion) {
+    if (!target.closest || target.closest(blockSelector))
+        return false;
+    const content = data.content;
+    const position = content.position;
+    const hm = pageFields(true);
+    const anchor = target.closest('[data-el]');
+    if (anchor) {
+        const id = anchor.getAttribute('data-el');
+        hm.el = id ? copyKey(anchor, id) : undefined;
+        const rect = anchor.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+            hm.fx = round3((event.clientX - rect.left) / rect.width);
+            hm.fy = round3((event.clientY - rect.top) / rect.height);
+        }
+    }
+    content.metadata = {
+        ...content.metadata,
+        hm,
+    };
+    const now = Date.now();
+    const click = {
+        data,
+        hm,
+        x: position.x,
+        y: position.y,
+        t: now,
+        candidate: !target.closest(INTERACTIVE_SELECTOR),
+        focused: document.activeElement,
+        href: location.href,
+    };
+    recent = recent.filter((r) => now - r.t <= RAGE_WINDOW_MS);
+    recent.push(click);
+    const cluster = recent.filter((r) => Math.abs(r.x - click.x) <= RAGE_RADIUS_PX &&
+        Math.abs(r.y - click.y) <= RAGE_RADIUS_PX);
+    if (cluster.length >= RAGE_CLICKS) {
+        for (const r of cluster)
+            r.hm.kind = 'rage';
+    }
+    if (isConversion) {
+        if (hm.kind === undefined)
+            hm.kind = null;
+        return false;
+    }
+    held.push(click);
+    if (click.candidate)
+        watchMutations();
+    setTimeout(() => settle(click), HOLD_MS);
+    return true;
+}
+
 function startSession(Coframe, cookiesEnabled, executionStartTime, personalizationHeaders, sessionContext, pageUrl = getCurrentPageUrl()) {
     const sessionPayload = [
         Coframe,
@@ -3406,7 +3648,7 @@ function startSession(Coframe, cookiesEnabled, executionStartTime, personalizati
         orgId: Coframe.orgId,
         userToken: Coframe.userToken,
         personalizationHeaders,
-    });
+    }, heatmapActive() ? { hm: pageFields(false) } : undefined);
 }
 function reportInitTiming(Coframe, project, integrationStartTime, executionStartTime) {
     var _a;
@@ -3639,20 +3881,15 @@ function setupListeners(Coframe, executionStartTime) {
         sendPageEngagementEvent(Coframe, 'click', event, {
             projectId: Coframe.projectId,
             sessionId: Coframe.sessionId,
+            orgId: Coframe.orgId,
             userToken: Coframe.userToken,
             personalizationHeaders: Coframe.personalizationHeaders,
+            collect: heatmapActive() ? collectClick : undefined,
         });
     };
     document.addEventListener('click', handleClick, true);
     const handleEventFlush = debounce((eventType) => {
-        queueEvent(Coframe, {
-            projectId: Coframe.projectId,
-            sessionId: Coframe.sessionId,
-            eventType: eventType,
-            orgId: Coframe.orgId,
-            userToken: Coframe.userToken,
-            personalizationHeaders: Coframe.personalizationHeaders,
-        });
+        queueLeaveEvent(Coframe, eventType, eventType === 'tab_show' ? undefined : leaveFields());
         flushQueuedEvents(Coframe.projectId);
         notifyEventsFlushed();
     }, 1);
@@ -3664,11 +3901,27 @@ function setupListeners(Coframe, executionStartTime) {
         handleEventFlush(eventType);
     });
 }
+function queueLeaveEvent(Coframe, eventType, fields) {
+    queueEvent(Coframe, {
+        projectId: Coframe.projectId,
+        sessionId: Coframe.sessionId,
+        eventType,
+        orgId: Coframe.orgId,
+        userToken: Coframe.userToken,
+        personalizationHeaders: Coframe.personalizationHeaders,
+    }, fields);
+}
+function sendPageLeave(Coframe) {
+    const fields = pageLeaveFields();
+    if (fields)
+        queueLeaveEvent(Coframe, 'page_leave', fields);
+}
 function setupTracking(Coframe, projectResult, previewVariantId, executionStartTime, nonce, waitForCookiesEnabled, onConsentChange) {
     var _a, _b;
     const logger = Coframe.logger;
     const { project } = projectResult;
     setTrackOnlyActivatedFrames(!!((_a = project === null || project === void 0 ? void 0 : project.settings) === null || _a === void 0 ? void 0 : _a.track_only_activated_frames));
+    startHeatmaps(Coframe, project);
     const analytics = createTreatmentAnalytics(Coframe, previewVariantId);
     setupListeners(Coframe, executionStartTime);
     const managedAnalyticsCallback = (_b = project === null || project === void 0 ? void 0 : project.settings) === null || _b === void 0 ? void 0 : _b.analytics_callback;
@@ -3784,6 +4037,7 @@ function setupSPANavigation(Coframe, project, config, previewVariantId, isSessio
     let navigationAbortController = null;
     observeUrlChanges(false, async (newPageUrl, _oldPageUrl) => {
         var _a;
+        sendPageLeave(Coframe);
         if (navigationAbortController)
             navigationAbortController.abort();
         navigationAbortController = new AbortController();
@@ -3932,11 +4186,90 @@ async function modifyPage(Coframe, configResult, projectResult, analytics) {
     setupFlushInterval(Coframe);
 }
 
+function readClientCommand() {
+    try {
+        const cmd = findLastCmd((c) => typeof c.cookiesEnabled === 'boolean');
+        if (!cmd)
+            return undefined;
+        return cmd.cookiesEnabled === true ? 'granted' : 'denied';
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+function readOneTrust() {
+    var _a;
+    try {
+        const { OnetrustActiveGroups: groups, OneTrust } = window;
+        if (typeof groups !== 'string' && OneTrust === undefined)
+            return undefined;
+        if (typeof groups === 'string' && groups.split(',').indexOf('C0002') !== -1)
+            return 'granted';
+        return ((_a = OneTrust === null || OneTrust === void 0 ? void 0 : OneTrust.IsAlertBoxClosed) === null || _a === void 0 ? void 0 : _a.call(OneTrust)) === true ? 'denied' : 'pending';
+    }
+    catch (_b) {
+        return undefined;
+    }
+}
+function readCookiebot() {
+    var _a;
+    try {
+        const { Cookiebot } = window;
+        if (Cookiebot === undefined)
+            return undefined;
+        if (((_a = Cookiebot.consent) === null || _a === void 0 ? void 0 : _a.statistics) === true)
+            return 'granted';
+        return Cookiebot.hasResponse === true ? 'denied' : 'pending';
+    }
+    catch (_b) {
+        return undefined;
+    }
+}
+function readConsentMode() {
+    var _a;
+    try {
+        const { dataLayer } = window;
+        if (!Array.isArray(dataLayer))
+            return undefined;
+        let update;
+        let defaultGranted = false;
+        let defaultDenied = false;
+        for (let i = 0; i < dataLayer.length; i++) {
+            const entry = dataLayer[i];
+            if (entry === null ||
+                typeof entry !== 'object' ||
+                entry[0] !== 'consent' ||
+                (entry[1] !== 'default' && entry[1] !== 'update')) {
+                continue;
+            }
+            const storage = (_a = entry[2]) === null || _a === void 0 ? void 0 : _a.analytics_storage;
+            if (storage !== 'granted' && storage !== 'denied')
+                continue;
+            if (entry[1] === 'update')
+                update = storage;
+            else if (storage === 'denied')
+                defaultDenied = true;
+            else
+                defaultGranted = true;
+        }
+        if (update !== undefined)
+            return update;
+        if (defaultDenied)
+            return 'pending';
+        return defaultGranted ? 'granted' : undefined;
+    }
+    catch (_b) {
+        return undefined;
+    }
+}
+
 let startRequested = false;
 let replayScriptUrl;
 const COMPILED_REPLAY_SCRIPT_URL = `${"https://edge.cofra.me"}/replay/latest.js`;
 const CONSENT_POLL_MS = 100;
 const CONSENT_WAIT_MS = 5000;
+const CONSENT_DETECT_WAIT_MS = 10000;
+const EXPLICIT_CONSENT_WAIT_MS = 60000;
 function configureReplayScriptUrl(url) {
     replayScriptUrl = (url === null || url === void 0 ? void 0 : url.trim()) || undefined;
 }
@@ -3947,8 +4280,25 @@ function readReplayConsent() {
             return { state: 'denied', reason: 'gpc' };
         }
         const shopify = window.Shopify;
-        if (shopify === undefined)
-            return { state: 'allowed', source: 'none' };
+        if (shopify === undefined) {
+            const readers = [
+                [readClientCommand, 'client'],
+                [readOneTrust, 'onetrust'],
+                [readCookiebot, 'cookiebot'],
+                [readConsentMode, 'consent_mode'],
+            ];
+            for (let i = 0; i < readers.length; i++) {
+                const [read, source] = readers[i];
+                const signal = read();
+                if (signal === 'granted')
+                    return { state: 'allowed', source };
+                if (signal === 'denied')
+                    return { state: 'denied', reason: 'consent_denied' };
+                if (signal === 'pending')
+                    return { state: 'pending', detected: true };
+            }
+            return { state: 'pending', detected: isWaitingForCookies() };
+        }
         const customerPrivacy = shopify.customerPrivacy;
         const analyticsProcessingAllowed = customerPrivacy === null || customerPrivacy === void 0 ? void 0 : customerPrivacy.analyticsProcessingAllowed;
         if (typeof analyticsProcessingAllowed === 'function') {
@@ -4050,11 +4400,14 @@ function startReplayIfEnabled(coframe, project, nonce) {
         const settings = (_a = project.settings) === null || _a === void 0 ? void 0 : _a.session_replay;
         if ((settings === null || settings === void 0 ? void 0 : settings.enabled) !== true ||
             typeof CompressionStream !== 'function' ||
-            !shouldSendEvents() ||
+            !shouldSendEvents({
+                ignoreConsent: window.Shopify === undefined,
+            }) ||
             startRequested) {
             return;
         }
         startRequested = true;
+        const isShopify = window.Shopify !== undefined;
         let waited = 0;
         const decide = () => {
             var _a;
@@ -4065,7 +4418,12 @@ function startReplayIfEnabled(coframe, project, nonce) {
             else if (consent.state === 'denied') {
                 reportReplaySkipped(coframe, consent.reason);
             }
-            else if (waited >= CONSENT_WAIT_MS) {
+            else if (!isShopify &&
+                consent.detected !== true &&
+                waited >= CONSENT_DETECT_WAIT_MS) {
+                reportReplaySkipped(coframe, 'consent_not_configured');
+            }
+            else if (waited >= (isShopify ? CONSENT_WAIT_MS : EXPLICIT_CONSENT_WAIT_MS)) {
                 reportReplaySkipped(coframe, 'consent_unavailable');
             }
             else {

package/dist/pkg/types/index.d.ts

@@ -144,6 +144,10 @@ interface Metric {
     selector: SelectorCondition;
     js_binder?: string;
 }
+interface HeatmapSettings {
+    enabled: boolean;
+    all_pages?: boolean;
+}
 interface ProjectSettings {
     mutation_observer_active: boolean;
     track_only_activated_frames?: boolean;
@@ -152,6 +156,7 @@ interface ProjectSettings {
     bot_score_threshold?: number;
     analytics_callback?: AnalyticsCallback;
     session_replay?: SessionReplaySettings | null;
+    heatmaps?: HeatmapSettings | null;
 }
 interface Project {
     org_id: string;

package/dist/pkg/types/react.d.ts

@@ -164,6 +164,10 @@ interface Metric {
     selector: SelectorCondition;
     js_binder?: string;
 }
+interface HeatmapSettings {
+    enabled: boolean;
+    all_pages?: boolean;
+}
 interface ProjectSettings {
     mutation_observer_active: boolean;
     track_only_activated_frames?: boolean;
@@ -172,6 +176,7 @@ interface ProjectSettings {
     bot_score_threshold?: number;
     analytics_callback?: AnalyticsCallback;
     session_replay?: SessionReplaySettings | null;
+    heatmaps?: HeatmapSettings | null;
 }
 interface Project {
     org_id: string;

package/dist/pkg/types/server.d.ts

@@ -110,6 +110,10 @@ interface Metric {
     selector: SelectorCondition;
     js_binder?: string;
 }
+interface HeatmapSettings {
+    enabled: boolean;
+    all_pages?: boolean;
+}
 interface ProjectSettings {
     mutation_observer_active: boolean;
     track_only_activated_frames?: boolean;
@@ -118,6 +122,7 @@ interface ProjectSettings {
     bot_score_threshold?: number;
     analytics_callback?: AnalyticsCallback;
     session_replay?: SessionReplaySettings | null;
+    heatmaps?: HeatmapSettings | null;
 }
 interface Project {
     org_id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coframe/sdk",
-  "version": "1.1.40",
+  "version": "1.1.42",
   "description": "Coframe optimizes your website using generative AI to deliver maximum impact to your audience and allow your site to improve itself as you sleep. Learn more at coframe.com.",
   "main": "dist/pkg/cf.cjs.js",
   "module": "dist/pkg/cf.esm.mjs",