@amplifyup/sdk 0.1.17 → 0.1.19

package/dist/AmplifyRenderer.mjs

@@ -366,6 +366,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();
@@ -538,6 +541,7 @@ var AmplifyUpSDK = class {
           this.initialPageSent = true;
           const url = window.location.pathname;
           this.page(url);
+          this.setupPageEngagement();
         }
       }
       if (this.config?.debug && this.initialized) {
@@ -570,6 +574,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
@@ -609,9 +775,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);
   }
   /**
@@ -900,6 +1070,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;
   }
   /**
@@ -907,10 +1084,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());
@@ -925,19 +1102,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;
       }
@@ -993,8 +1186,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}`);
@@ -1065,9 +1265,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);
     });
@@ -1081,6 +1281,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");
@@ -1090,11 +1296,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. */
@@ -2087,6 +2295,7 @@ function getSDK(adapter) {
   return sdkInstance;
 }
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
+var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
 createContext(null);
 var usePathname = null;
@@ -2146,6 +2355,32 @@ function AmplifyRenderer({
       });
     }
   }, [pageConfig]);
+  useEffect(() => {
+    if (!pageConfig?.eventTracking?.length) return;
+    const sdk = getSDK();
+    if (!sdk.isInitialized()) return;
+    sdk.setupEventTracking(pageConfig.eventTracking);
+    const t1 = window.setTimeout(() => {
+      sdk.setupComponentViewTracking();
+      refreshEventTracking();
+    }, 200);
+    const t2 = window.setTimeout(() => {
+      sdk.setupComponentViewTracking();
+      refreshEventTracking();
+    }, 1e3);
+    return () => {
+      window.clearTimeout(t1);
+      window.clearTimeout(t2);
+    };
+  }, [pageConfig?.id]);
+  useEffect(() => {
+    if (!pageConfig) return;
+    const t = window.setTimeout(() => {
+      getSDK().setupComponentViewTracking();
+      refreshEventTracking();
+    }, 100);
+    return () => window.clearTimeout(t);
+  }, [variantCache, pageConfig?.id]);
   useEffect(() => {
     const isVisualEditorMode = () => {
       if (typeof window === "undefined") return false;
@@ -2351,6 +2586,31 @@ function AmplifyRenderer({
   pageConfig.layout?.header !== false;
   pageConfig.layout?.footer !== false;
   const renderNode = (node) => {
+    const zoneIdFromProps = node.componentId === "AmplifyZone" ? String(node.props?.zoneId || "") : "";
+    if (node.componentId === "AmplifyZone") {
+      const contentSlot = node.slots?.find((s) => s.slotId === "content") || node.slots?.[0];
+      const children = Array.isArray(contentSlot?.children) ? contentSlot.children : [];
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-node-id": node.id,
+          "data-amplifyup-node": "",
+          "data-amplifyup-component": "AmplifyZone",
+          "data-amplifyup-zone": zoneIdFromProps || void 0,
+          "data-zone-id": zoneIdFromProps || void 0,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot-id": "content",
+              "data-amplifyup-slot": "content",
+              "data-parent-node-id": node.id,
+              "data-parent-component-id": "AmplifyZone",
+              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(child) }, child.id))
+            }
+          )
+        }
+      );
+    }
     let slotChildren = {};
     console.log(`[AmplifyRenderer] Rendering node ${node.id} (${node.componentId})`, {
       hasSlots: !!(node.slots && node.slots.length > 0),