@amplifyup/sdk 0.1.19 → 0.1.21

package/dist/index.d.mts

@@ -59,6 +59,10 @@ declare class AmplifyUpSDK {
     private componentViewObservers;
     private componentViewSeen;
     private pageEngagementActive;
+    /** Path of the last page() / routeChange — avoids duplicate SPA fires. */
+    private lastTrackedPath;
+    private historyHooksInstalled;
+    private pageEngagementState;
     constructor(adapter?: CDPAdapter);
     /**
      * Detect if we're running in visual editor mode
@@ -92,8 +96,20 @@ declare class AmplifyUpSDK {
     private currentPath;
     /**
      * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
+     * State lives on the instance so SPA route changes can reset milestones.
      */
     private setupPageEngagement;
+    private resetEngagementForNewPage;
+    /**
+     * SPA / soft navigation: fire a page view and reset engagement.
+     * No-op when the path has not changed. Safe for React Strict Mode remounts.
+     */
+    routeChange(url?: string, properties?: EventProperties): void;
+    /**
+     * Patch history.pushState / replaceState + popstate for non-React SPAs.
+     * React/Next apps should also call routeChange from the provider.
+     */
+    private installHistoryHooks;
     /**
      * Automatic Component View when component hosts enter the viewport.
      */
@@ -314,6 +330,7 @@ declare function getSDK(adapter?: CDPAdapter): AmplifyUpSDK;
  */
 declare function init(config: AmplifyUpConfig): Promise<void>;
 declare const page: (url: string, properties?: EventProperties) => void;
+declare const routeChange: (url?: string, properties?: EventProperties) => void;
 declare const track: (eventName: string, properties?: EventProperties) => void;
 declare const trackClick: (elementId: string, elementText: string, properties?: EventProperties) => void;
 declare const trackFormSubmit: (formId: string, formData?: EventProperties) => void;
@@ -369,4 +386,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, setupComponentViewTracking, 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, routeChange, setupComponentViewTracking, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };

package/dist/index.d.ts

@@ -59,6 +59,10 @@ declare class AmplifyUpSDK {
     private componentViewObservers;
     private componentViewSeen;
     private pageEngagementActive;
+    /** Path of the last page() / routeChange — avoids duplicate SPA fires. */
+    private lastTrackedPath;
+    private historyHooksInstalled;
+    private pageEngagementState;
     constructor(adapter?: CDPAdapter);
     /**
      * Detect if we're running in visual editor mode
@@ -92,8 +96,20 @@ declare class AmplifyUpSDK {
     private currentPath;
     /**
      * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
+     * State lives on the instance so SPA route changes can reset milestones.
      */
     private setupPageEngagement;
+    private resetEngagementForNewPage;
+    /**
+     * SPA / soft navigation: fire a page view and reset engagement.
+     * No-op when the path has not changed. Safe for React Strict Mode remounts.
+     */
+    routeChange(url?: string, properties?: EventProperties): void;
+    /**
+     * Patch history.pushState / replaceState + popstate for non-React SPAs.
+     * React/Next apps should also call routeChange from the provider.
+     */
+    private installHistoryHooks;
     /**
      * Automatic Component View when component hosts enter the viewport.
      */
@@ -314,6 +330,7 @@ declare function getSDK(adapter?: CDPAdapter): AmplifyUpSDK;
  */
 declare function init(config: AmplifyUpConfig): Promise<void>;
 declare const page: (url: string, properties?: EventProperties) => void;
+declare const routeChange: (url?: string, properties?: EventProperties) => void;
 declare const track: (eventName: string, properties?: EventProperties) => void;
 declare const trackClick: (elementId: string, elementText: string, properties?: EventProperties) => void;
 declare const trackFormSubmit: (formId: string, formData?: EventProperties) => void;
@@ -369,4 +386,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, setupComponentViewTracking, 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, routeChange, setupComponentViewTracking, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };

package/dist/index.js

@@ -363,6 +363,15 @@ var AmplifyUpSDK = class {
     this.componentViewObservers = [];
     this.componentViewSeen = /* @__PURE__ */ new Set();
     this.pageEngagementActive = false;
+    /** Path of the last page() / routeChange — avoids duplicate SPA fires. */
+    this.lastTrackedPath = null;
+    this.historyHooksInstalled = false;
+    this.pageEngagementState = {
+      reached: /* @__PURE__ */ new Set(),
+      visibleMs: 0,
+      visibleSince: null,
+      lastDwellSecondsSent: 0
+    };
     this.adapter = adapter || new AWSAdapter();
     if (typeof window !== "undefined") {
       this.isVisualEditorMode = this.detectVisualEditorMode();
@@ -535,7 +544,9 @@ var AmplifyUpSDK = class {
           this.initialPageSent = true;
           const url = window.location.pathname;
           this.page(url);
+          this.lastTrackedPath = url;
           this.setupPageEngagement();
+          this.installHistoryHooks();
         }
       }
       if (this.config?.debug && this.initialized) {
@@ -578,16 +589,18 @@ var AmplifyUpSDK = class {
   }
   /**
    * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
+   * State lives on the instance so SPA route changes can reset milestones.
    */
   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;
+    const state = this.pageEngagementState;
+    state.reached = /* @__PURE__ */ new Set();
+    state.visibleMs = 0;
+    state.visibleSince = document.visibilityState === "visible" ? Date.now() : null;
+    state.lastDwellSecondsSent = 0;
     let scrollRaf = null;
     const path = () => this.currentPath();
     const measureScrollPercent = () => {
@@ -609,8 +622,8 @@ var AmplifyUpSDK = class {
       if (this.isPreviewMode()) return;
       const pct = measureScrollPercent();
       for (const milestone of milestones) {
-        if (pct >= milestone && !reached.has(milestone)) {
-          reached.add(milestone);
+        if (pct >= milestone && !state.reached.has(milestone)) {
+          state.reached.add(milestone);
           this.track("Scroll Depth", {
             percentage: milestone,
             path: path()
@@ -626,28 +639,29 @@ var AmplifyUpSDK = class {
       });
     };
     const accumulateVisible = () => {
-      if (visibleSince == null) return;
-      visibleMs += Date.now() - visibleSince;
-      visibleSince = Date.now();
+      if (state.visibleSince == null) return;
+      state.visibleMs += Date.now() - state.visibleSince;
+      state.visibleSince = Date.now();
     };
     const emitDwell = (force = false) => {
       if (this.isPreviewMode()) return;
       accumulateVisible();
-      const seconds = Math.floor(visibleMs / 1e3);
+      const seconds = Math.floor(state.visibleMs / 1e3);
       if (seconds <= 0) return;
-      if (!force && seconds <= lastDwellSecondsSent) return;
-      lastDwellSecondsSent = seconds;
+      if (!force && seconds <= state.lastDwellSecondsSent) return;
+      state.lastDwellSecondsSent = seconds;
       this.track("Time on Page", {
         seconds,
-        path: path()
+        path: this.lastTrackedPath || path()
       });
     };
+    this._emitPageDwell = emitDwell;
     const onVisibility = () => {
       if (document.visibilityState === "visible") {
-        visibleSince = Date.now();
+        state.visibleSince = Date.now();
       } else {
         emitDwell(true);
-        visibleSince = null;
+        state.visibleSince = null;
       }
     };
     const onPageHide = () => {
@@ -674,11 +688,64 @@ var AmplifyUpSDK = class {
       }
       previousCleanup?.();
       this.pageEngagementActive = false;
+      delete this._emitPageDwell;
     };
     if (this.config?.debug) {
       console.log("[AmplifyUp SDK] Page engagement tracking enabled");
     }
   }
+  resetEngagementForNewPage() {
+    const emit = this._emitPageDwell;
+    emit?.(true);
+    const state = this.pageEngagementState;
+    state.reached = /* @__PURE__ */ new Set();
+    state.visibleMs = 0;
+    state.lastDwellSecondsSent = 0;
+    state.visibleSince = typeof document !== "undefined" && document.visibilityState === "visible" ? Date.now() : null;
+    this.componentViewSeen.clear();
+  }
+  /**
+   * SPA / soft navigation: fire a page view and reset engagement.
+   * No-op when the path has not changed. Safe for React Strict Mode remounts.
+   */
+  routeChange(url, properties) {
+    if (this.isPreviewMode()) return;
+    if (!this.isInitialized()) return;
+    if (typeof window === "undefined") return;
+    const path = url || window.location.pathname || "/";
+    if (path === this.lastTrackedPath) return;
+    this.resetEngagementForNewPage();
+    this.page(path, properties);
+    this.lastTrackedPath = path;
+    if (!this.pageEngagementActive) {
+      this.setupPageEngagement();
+    }
+    if (this.config?.debug) {
+      console.log("[AmplifyUp SDK] Route change page view", path);
+    }
+  }
+  /**
+   * Patch history.pushState / replaceState + popstate for non-React SPAs.
+   * React/Next apps should also call routeChange from the provider.
+   */
+  installHistoryHooks() {
+    if (typeof window === "undefined" || this.historyHooksInstalled) return;
+    this.historyHooksInstalled = true;
+    const notify = () => {
+      queueMicrotask(() => this.routeChange(window.location.pathname));
+    };
+    const wrap = (method) => {
+      const original = history[method].bind(history);
+      history[method] = (...args) => {
+        const result = original(...args);
+        notify();
+        return result;
+      };
+    };
+    wrap("pushState");
+    wrap("replaceState");
+    window.addEventListener("popstate", notify);
+  }
   /**
    * Automatic Component View when component hosts enter the viewport.
    */
@@ -753,6 +820,7 @@ var AmplifyUpSDK = class {
       ...properties
     };
     this.adapter.page(pageProperties);
+    this.lastTrackedPath = url;
   }
   /**
    * Track an event
@@ -2293,6 +2361,7 @@ async function init(config) {
   await sdk.init(config);
 }
 var page = (url, properties) => getSDK().page(url, properties);
+var routeChange = (url, properties) => getSDK().routeChange(url, properties);
 var track = (eventName, properties) => getSDK().track(eventName, properties);
 var trackClick = (elementId, elementText, properties) => getSDK().trackClick(elementId, elementText, properties);
 var trackFormSubmit = (formId, formData) => getSDK().trackFormSubmit(formId, formData);
@@ -2353,6 +2422,7 @@ exports.refreshEventTracking = refreshEventTracking;
 exports.reset = reset;
 exports.resolveAmplifyUpTarget = resolveAmplifyUpTarget;
 exports.resolveAmplifyUpUrls = resolveAmplifyUpUrls;
+exports.routeChange = routeChange;
 exports.setupComponentViewTracking = setupComponentViewTracking;
 exports.setupEventTracking = setupEventTracking;
 exports.testTracking = testTracking;