@amplifyup/sdk 0.1.17 → 0.1.19

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { C as CDPAdapter, A as AmplifyUpConfig, E as EventProperties, I as IdentifyTraits, a as AmplifyUpTarget, b as EventTrackingConfig$1 } from './types-B2Swk8BW.mjs';
-export { P as PageConfig, Z as ZoneConfig, i as isAmplifyUpTarget, n as normalizeAmplifyUpTarget, r as resolveAmplifyUpTarget, c as resolveAmplifyUpUrls } from './types-B2Swk8BW.mjs';
+import { C as CDPAdapter, A as AmplifyUpConfig, E as EventProperties, I as IdentifyTraits, a as AmplifyUpTarget, b as EventTrackingConfig$1 } from './types-Cy5aWQ5c.mjs';
+export { P as PageConfig, Z as ZoneConfig, i as isAmplifyUpTarget, n as normalizeAmplifyUpTarget, r as resolveAmplifyUpTarget, c as resolveAmplifyUpUrls } from './types-Cy5aWQ5c.mjs';
 export { i as isComposerPreview, a as isPreviewRequest } from './preview-BMrIgUvp.mjs';
 
 /**
@@ -18,6 +18,8 @@ interface EventTrackingConfig {
     description?: string;
     properties?: string[];
     enabled?: boolean;
+    componentId?: string | null;
+    componentName?: string | null;
 }
 declare class AmplifyUpSDK {
     private adapter;
@@ -54,6 +56,9 @@ declare class AmplifyUpSDK {
     private attachedEventListeners;
     private trackingIntervals;
     private trackingCleanup;
+    private componentViewObservers;
+    private componentViewSeen;
+    private pageEngagementActive;
     constructor(adapter?: CDPAdapter);
     /**
      * Detect if we're running in visual editor mode
@@ -83,6 +88,17 @@ declare class AmplifyUpSDK {
      * Clear all tracking intervals and event listeners
      */
     private clearTrackingIntervals;
+    /** Current page path for engagement attribution. */
+    private currentPath;
+    /**
+     * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
+     */
+    private setupPageEngagement;
+    /**
+     * Automatic Component View when component hosts enter the viewport.
+     */
+    setupComponentViewTracking(): void;
+    private cleanupComponentViewTracking;
     /**
      * Track a page view
      */
@@ -203,7 +219,11 @@ declare class AmplifyUpSDK {
      */
     private setupViewTracking;
     /**
-     * Clean up all attached event listeners
+     * Detach listeners/observers without clearing the saved event config.
+     */
+    private detachEventListeners;
+    /**
+     * Clean up all attached event listeners and clear config
      */
     cleanupEventTracking(): void;
     /**
@@ -313,6 +333,7 @@ declare const fetchPageConfig: (route: string, preview?: boolean) => Promise<any
 declare const setupEventTracking: (config: EventTrackingConfig$1[]) => void;
 declare const cleanupEventTracking: () => void;
 declare const refreshEventTracking: () => void;
+declare const setupComponentViewTracking: () => void;
 declare const getDiagnostics: () => {
     initialized: boolean;
     instanceId: string;
@@ -348,4 +369,4 @@ declare const verifyAWSConnection: () => {
 
 declare const _default: AmplifyUpSDK;
 
-export { AmplifyUpConfig, AmplifyUpSDK, AmplifyUpTarget, CDPAdapter, EventProperties, EventTrackingConfig$1 as EventTrackingConfig, IdentifyTraits, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, _default as default, fetchPageConfig, getDiagnostics, getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId, identify, init, page, refreshEventTracking, reset, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };
+export { AmplifyUpConfig, AmplifyUpSDK, AmplifyUpTarget, CDPAdapter, EventProperties, EventTrackingConfig$1 as EventTrackingConfig, IdentifyTraits, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, _default as default, fetchPageConfig, getDiagnostics, getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId, identify, init, page, refreshEventTracking, reset, setupComponentViewTracking, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CDPAdapter, A as AmplifyUpConfig, E as EventProperties, I as IdentifyTraits, a as AmplifyUpTarget, b as EventTrackingConfig$1 } from './types-B2Swk8BW.js';
-export { P as PageConfig, Z as ZoneConfig, i as isAmplifyUpTarget, n as normalizeAmplifyUpTarget, r as resolveAmplifyUpTarget, c as resolveAmplifyUpUrls } from './types-B2Swk8BW.js';
+import { C as CDPAdapter, A as AmplifyUpConfig, E as EventProperties, I as IdentifyTraits, a as AmplifyUpTarget, b as EventTrackingConfig$1 } from './types-Cy5aWQ5c.js';
+export { P as PageConfig, Z as ZoneConfig, i as isAmplifyUpTarget, n as normalizeAmplifyUpTarget, r as resolveAmplifyUpTarget, c as resolveAmplifyUpUrls } from './types-Cy5aWQ5c.js';
 export { i as isComposerPreview, a as isPreviewRequest } from './preview-BMrIgUvp.js';
 
 /**
@@ -18,6 +18,8 @@ interface EventTrackingConfig {
     description?: string;
     properties?: string[];
     enabled?: boolean;
+    componentId?: string | null;
+    componentName?: string | null;
 }
 declare class AmplifyUpSDK {
     private adapter;
@@ -54,6 +56,9 @@ declare class AmplifyUpSDK {
     private attachedEventListeners;
     private trackingIntervals;
     private trackingCleanup;
+    private componentViewObservers;
+    private componentViewSeen;
+    private pageEngagementActive;
     constructor(adapter?: CDPAdapter);
     /**
      * Detect if we're running in visual editor mode
@@ -83,6 +88,17 @@ declare class AmplifyUpSDK {
      * Clear all tracking intervals and event listeners
      */
     private clearTrackingIntervals;
+    /** Current page path for engagement attribution. */
+    private currentPath;
+    /**
+     * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
+     */
+    private setupPageEngagement;
+    /**
+     * Automatic Component View when component hosts enter the viewport.
+     */
+    setupComponentViewTracking(): void;
+    private cleanupComponentViewTracking;
     /**
      * Track a page view
      */
@@ -203,7 +219,11 @@ declare class AmplifyUpSDK {
      */
     private setupViewTracking;
     /**
-     * Clean up all attached event listeners
+     * Detach listeners/observers without clearing the saved event config.
+     */
+    private detachEventListeners;
+    /**
+     * Clean up all attached event listeners and clear config
      */
     cleanupEventTracking(): void;
     /**
@@ -313,6 +333,7 @@ declare const fetchPageConfig: (route: string, preview?: boolean) => Promise<any
 declare const setupEventTracking: (config: EventTrackingConfig$1[]) => void;
 declare const cleanupEventTracking: () => void;
 declare const refreshEventTracking: () => void;
+declare const setupComponentViewTracking: () => void;
 declare const getDiagnostics: () => {
     initialized: boolean;
     instanceId: string;
@@ -348,4 +369,4 @@ declare const verifyAWSConnection: () => {
 
 declare const _default: AmplifyUpSDK;
 
-export { AmplifyUpConfig, AmplifyUpSDK, AmplifyUpTarget, CDPAdapter, EventProperties, EventTrackingConfig$1 as EventTrackingConfig, IdentifyTraits, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, _default as default, fetchPageConfig, getDiagnostics, getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId, identify, init, page, refreshEventTracking, reset, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };
+export { AmplifyUpConfig, AmplifyUpSDK, AmplifyUpTarget, CDPAdapter, EventProperties, EventTrackingConfig$1 as EventTrackingConfig, IdentifyTraits, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, _default as default, fetchPageConfig, getDiagnostics, getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId, identify, init, page, refreshEventTracking, reset, setupComponentViewTracking, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };

package/dist/index.js

@@ -360,6 +360,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();
@@ -532,6 +535,7 @@ var AmplifyUpSDK = class {
           this.initialPageSent = true;
           const url = window.location.pathname;
           this.page(url);
+          this.setupPageEngagement();
         }
       }
       if (this.config?.debug && this.initialized) {
@@ -564,6 +568,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
@@ -603,9 +769,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);
   }
   /**
@@ -894,6 +1064,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;
   }
   /**
@@ -901,10 +1078,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());
@@ -919,19 +1096,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;
       }
@@ -987,8 +1180,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}`);
@@ -1059,9 +1259,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);
     });
@@ -1075,6 +1275,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");
@@ -1084,11 +1290,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. */
@@ -2104,6 +2312,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();
@@ -2144,6 +2353,7 @@ exports.refreshEventTracking = refreshEventTracking;
 exports.reset = reset;
 exports.resolveAmplifyUpTarget = resolveAmplifyUpTarget;
 exports.resolveAmplifyUpUrls = resolveAmplifyUpUrls;
+exports.setupComponentViewTracking = setupComponentViewTracking;
 exports.setupEventTracking = setupEventTracking;
 exports.testTracking = testTracking;
 exports.track = track;