@amplifyup/sdk 0.1.17 → 0.1.19

package/dist/index.mjs

@@ -356,6 +356,9 @@ var AmplifyUpSDK = class {
     this.attachedEventListeners = [];
     this.trackingIntervals = [];
     this.trackingCleanup = null;
+    this.componentViewObservers = [];
+    this.componentViewSeen = /* @__PURE__ */ new Set();
+    this.pageEngagementActive = false;
     this.adapter = adapter || new AWSAdapter();
     if (typeof window !== "undefined") {
       this.isVisualEditorMode = this.detectVisualEditorMode();
@@ -528,6 +531,7 @@ var AmplifyUpSDK = class {
           this.initialPageSent = true;
           const url = window.location.pathname;
           this.page(url);
+          this.setupPageEngagement();
         }
       }
       if (this.config?.debug && this.initialized) {
@@ -560,6 +564,168 @@ var AmplifyUpSDK = class {
     }
     this.trackingIntervals.forEach((id) => clearInterval(id));
     this.trackingIntervals = [];
+    this.cleanupComponentViewTracking();
+    this.pageEngagementActive = false;
+  }
+  /** Current page path for engagement attribution. */
+  currentPath() {
+    if (typeof window === "undefined") return "/";
+    return window.location.pathname || "/";
+  }
+  /**
+   * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
+   */
+  setupPageEngagement() {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    if (this.isPreviewMode() || this.pageEngagementActive) return;
+    this.pageEngagementActive = true;
+    const milestones = [25, 50, 75, 100];
+    const reached = /* @__PURE__ */ new Set();
+    let visibleMs = 0;
+    let visibleSince = document.visibilityState === "visible" ? Date.now() : null;
+    let lastDwellSecondsSent = 0;
+    let scrollRaf = null;
+    const path = () => this.currentPath();
+    const measureScrollPercent = () => {
+      const doc = document.documentElement;
+      const body = document.body;
+      const scrollTop = window.scrollY || doc.scrollTop || body?.scrollTop || 0;
+      const scrollHeight = Math.max(
+        doc.scrollHeight,
+        body?.scrollHeight || 0,
+        doc.offsetHeight,
+        body?.offsetHeight || 0
+      );
+      const clientHeight = window.innerHeight || doc.clientHeight || 0;
+      const traversable = Math.max(scrollHeight - clientHeight, 0);
+      if (traversable <= 0) return 100;
+      return Math.min(100, Math.round(scrollTop / traversable * 100));
+    };
+    const checkScroll = () => {
+      if (this.isPreviewMode()) return;
+      const pct = measureScrollPercent();
+      for (const milestone of milestones) {
+        if (pct >= milestone && !reached.has(milestone)) {
+          reached.add(milestone);
+          this.track("Scroll Depth", {
+            percentage: milestone,
+            path: path()
+          });
+        }
+      }
+    };
+    const onScroll = () => {
+      if (scrollRaf != null) return;
+      scrollRaf = window.requestAnimationFrame(() => {
+        scrollRaf = null;
+        checkScroll();
+      });
+    };
+    const accumulateVisible = () => {
+      if (visibleSince == null) return;
+      visibleMs += Date.now() - visibleSince;
+      visibleSince = Date.now();
+    };
+    const emitDwell = (force = false) => {
+      if (this.isPreviewMode()) return;
+      accumulateVisible();
+      const seconds = Math.floor(visibleMs / 1e3);
+      if (seconds <= 0) return;
+      if (!force && seconds <= lastDwellSecondsSent) return;
+      lastDwellSecondsSent = seconds;
+      this.track("Time on Page", {
+        seconds,
+        path: path()
+      });
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") {
+        visibleSince = Date.now();
+      } else {
+        emitDwell(true);
+        visibleSince = null;
+      }
+    };
+    const onPageHide = () => {
+      emitDwell(true);
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    document.addEventListener("visibilitychange", onVisibility);
+    window.addEventListener("pagehide", onPageHide);
+    checkScroll();
+    const heartbeat = setInterval(() => {
+      if (document.visibilityState === "visible") {
+        emitDwell(false);
+      }
+    }, 15e3);
+    this.trackingIntervals.push(heartbeat);
+    const previousCleanup = this.trackingCleanup;
+    this.trackingCleanup = () => {
+      window.removeEventListener("scroll", onScroll);
+      document.removeEventListener("visibilitychange", onVisibility);
+      window.removeEventListener("pagehide", onPageHide);
+      if (scrollRaf != null) {
+        window.cancelAnimationFrame(scrollRaf);
+        scrollRaf = null;
+      }
+      previousCleanup?.();
+      this.pageEngagementActive = false;
+    };
+    if (this.config?.debug) {
+      console.log("[AmplifyUp SDK] Page engagement tracking enabled");
+    }
+  }
+  /**
+   * Automatic Component View when component hosts enter the viewport.
+   */
+  setupComponentViewTracking() {
+    if (typeof document === "undefined" || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    if (this.isPreviewMode()) return;
+    this.cleanupComponentViewTracking();
+    const hosts = document.querySelectorAll("[data-amplifyup-component]");
+    if (hosts.length === 0) {
+      if (this.config?.debug) {
+        console.log("[AmplifyUp SDK] No component hosts found for Component View");
+      }
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          const el = entry.target;
+          const componentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
+          if (!componentId || this.componentViewSeen.has(componentId)) {
+            observer.unobserve(el);
+            return;
+          }
+          this.componentViewSeen.add(componentId);
+          const componentName = el.getAttribute("data-component-name") || void 0;
+          this.track("Component View", {
+            componentId,
+            componentName,
+            path: this.currentPath()
+          });
+          observer.unobserve(el);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    hosts.forEach((host) => observer.observe(host));
+    this.componentViewObservers.push(observer);
+    if (this.config?.debug) {
+      console.log(
+        "[AmplifyUp SDK] Component View tracking enabled for",
+        hosts.length,
+        "hosts"
+      );
+    }
+  }
+  cleanupComponentViewTracking() {
+    this.componentViewObservers.forEach((obs) => obs.disconnect());
+    this.componentViewObservers = [];
   }
   /**
    * Track a page view
@@ -599,9 +765,13 @@ var AmplifyUpSDK = class {
       instanceId,
       trackingId: this.config?.trackingId,
       url: typeof window !== "undefined" ? window.location.href : void 0,
+      path: properties?.path || (typeof window !== "undefined" ? window.location.pathname : void 0),
       // Timestamp is included in event payload
       ...properties
     };
+    if (!trackProperties.path && typeof window !== "undefined") {
+      trackProperties.path = window.location.pathname;
+    }
     this.adapter.track(eventName, trackProperties);
   }
   /**
@@ -890,6 +1060,13 @@ Available Console Commands:
     if (pageConfig?.eventTracking) {
       this.setupEventTracking(pageConfig.eventTracking);
     }
+    if (typeof window !== "undefined") {
+      window.setTimeout(() => this.setupComponentViewTracking(), 150);
+      window.setTimeout(() => {
+        this.setupComponentViewTracking();
+        this.refreshEventTracking();
+      }, 800);
+    }
     return pageConfig;
   }
   /**
@@ -897,10 +1074,10 @@ Available Console Commands:
    */
   setupEventTracking(eventConfig) {
     if (typeof document === "undefined") return;
-    this.cleanupEventTracking();
-    this.eventTrackingConfig = eventConfig;
+    this.detachEventListeners();
+    this.eventTrackingConfig = Array.isArray(eventConfig) ? [...eventConfig] : [];
     if (this.config?.debug) {
-      console.log("[AmplifyUp SDK] Setting up event tracking:", eventConfig.length, "events");
+      console.log("[AmplifyUp SDK] Setting up event tracking:", this.eventTrackingConfig.length, "events");
     }
     if (document.readyState === "loading") {
       document.addEventListener("DOMContentLoaded", () => this.attachEventListeners());
@@ -915,19 +1092,35 @@ Available Console Commands:
     if (typeof document === "undefined") return;
     this.eventTrackingConfig.forEach((eventConfig) => {
       if (eventConfig.enabled === false) return;
+      if (!eventConfig.selector) {
+        if (this.config?.debug) {
+          console.warn(`[AmplifyUp SDK] Event ${eventConfig.eventName} has no selector, skipping`);
+        }
+        return;
+      }
       let targetElements = [];
-      if (eventConfig.selector) {
-        try {
-          targetElements = document.querySelectorAll(eventConfig.selector);
-        } catch (e) {
+      try {
+        const escapeAttr = (value) => typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(value) : value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+        const scopeRoot = eventConfig.componentId ? document.querySelector(
+          `[data-amplifyup-component="${escapeAttr(eventConfig.componentId)}"], [data-component-id="${escapeAttr(eventConfig.componentId)}"]`
+        ) : document;
+        if (!scopeRoot) {
           if (this.config?.debug) {
-            console.warn(`[AmplifyUp SDK] Invalid selector: ${eventConfig.selector}`, e);
+            console.log(
+              `[AmplifyUp SDK] Component host not found for ${eventConfig.componentId}`
+            );
           }
           return;
         }
-      } else {
+        targetElements = Array.from(
+          scopeRoot.querySelectorAll(eventConfig.selector)
+        );
+        if (scopeRoot instanceof Element && scopeRoot !== document.documentElement && scopeRoot.matches?.(eventConfig.selector)) {
+          targetElements.unshift(scopeRoot);
+        }
+      } catch (e) {
         if (this.config?.debug) {
-          console.warn(`[AmplifyUp SDK] Event ${eventConfig.eventName} has no selector, skipping`);
+          console.warn(`[AmplifyUp SDK] Invalid selector: ${eventConfig.selector}`, e);
         }
         return;
       }
@@ -983,8 +1176,15 @@ Available Console Commands:
   handleTrackedEvent(event, config, element) {
     const properties = {
       eventType: config.eventType,
-      selector: config.selector
+      selector: config.selector,
+      path: this.currentPath()
     };
+    if (config.componentId) {
+      properties.componentId = config.componentId;
+    }
+    if (config.componentName) {
+      properties.componentName = config.componentName;
+    }
     if (config.properties && config.properties.length > 0) {
       config.properties.forEach((prop) => {
         const dataAttrValue = element.getAttribute(`data-${prop}`);
@@ -1055,9 +1255,9 @@ Available Console Commands:
     element._amplifyupViewObserver = observer;
   }
   /**
-   * Clean up all attached event listeners
+   * Detach listeners/observers without clearing the saved event config.
    */
-  cleanupEventTracking() {
+  detachEventListeners() {
     this.attachedEventListeners.forEach(({ element, eventType, handler }) => {
       element.removeEventListener(eventType, handler);
     });
@@ -1071,6 +1271,12 @@ Available Console Commands:
         }
       });
     }
+  }
+  /**
+   * Clean up all attached event listeners and clear config
+   */
+  cleanupEventTracking() {
+    this.detachEventListeners();
     this.eventTrackingConfig = [];
     if (this.config?.debug) {
       console.log("[AmplifyUp SDK] Cleaned up event tracking");
@@ -1080,11 +1286,13 @@ Available Console Commands:
    * Manually trigger event tracking setup (useful after dynamic content loads)
    */
   refreshEventTracking() {
-    if (this.eventTrackingConfig.length > 0) {
-      this.cleanupEventTracking();
-      const config = [...this.eventTrackingConfig];
-      this.eventTrackingConfig = config;
-      this.attachEventListeners();
+    if (this.eventTrackingConfig.length === 0) return;
+    const config = [...this.eventTrackingConfig];
+    this.detachEventListeners();
+    this.eventTrackingConfig = config;
+    this.attachEventListeners();
+    if (this.config?.debug) {
+      console.log("[AmplifyUp SDK] Refreshed event tracking:", config.length, "events");
     }
   }
   /** Origins allowed to send Composer postMessage commands to the SDK. */
@@ -2100,6 +2308,7 @@ var fetchPageConfig = (route, preview) => getSDK().fetchPageConfig(route, previe
 var setupEventTracking = (config) => getSDK().setupEventTracking(config);
 var cleanupEventTracking = () => getSDK().cleanupEventTracking();
 var refreshEventTracking = () => getSDK().refreshEventTracking();
+var setupComponentViewTracking = () => getSDK().setupComponentViewTracking();
 var getDiagnostics = () => getSDK().getDiagnostics();
 var getStatus = () => {
   const status = getSDK().getStatus();
@@ -2115,6 +2324,6 @@ var verifyAWSConnection = () => {
 };
 var index_default = getSDK();
 
-export { AmplifyUpSDK, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, index_default as default, fetchPageConfig, getDiagnostics, getInstanceId2 as getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId2 as getUserId, identify, init, isAmplifyUpTarget, isComposerPreview, isPreviewRequest, normalizeAmplifyUpTarget, page, refreshEventTracking, reset, resolveAmplifyUpTarget, resolveAmplifyUpUrls, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };
+export { AmplifyUpSDK, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, index_default as default, fetchPageConfig, getDiagnostics, getInstanceId2 as getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId2 as getUserId, identify, init, isAmplifyUpTarget, isComposerPreview, isPreviewRequest, normalizeAmplifyUpTarget, page, refreshEventTracking, reset, resolveAmplifyUpTarget, resolveAmplifyUpUrls, setupComponentViewTracking, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map