@designcrowd/library.brand-page 6.1.14 → 6.1.15

package/lib/src/metadata-builder/builders/reorder-pages-builder.d.ts

@@ -0,0 +1,13 @@
+import type { BrandPageModel } from '../../brand-page/models';
+import { BaseMetadataBuilder, type BuilderResult, type MetadataBuilderRequest } from '../models';
+import type { Logger } from '../logger';
+export interface ReorderPagesPayload {
+    pageOrder: string[];
+}
+export declare class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+    constructor(request: MetadataBuilderRequest<ReorderPagesPayload>, logger?: Logger);
+    validateAsync(): Promise<{
+        errors: string[];
+    }>;
+    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
+}

package/lib/src/metadata-builder/builders/reorder-pages-builder.js

@@ -0,0 +1,49 @@
+import { BaseMetadataBuilder, } from '../models';
+export class ReorderPagesBuilder extends BaseMetadataBuilder {
+    constructor(request, logger) {
+        super(request, logger);
+    }
+    async validateAsync() {
+        const errors = [];
+        const payload = this.request.payload;
+        if (!payload?.pageOrder?.length) {
+            errors.push('page_order is required for reorder_pages');
+        }
+        return { errors };
+    }
+    async buildAsync(model) {
+        this.log('Build called');
+        const validation = await this.validateAsync();
+        if (validation.errors.length) {
+            return { request: this.request, model, errors: validation.errors };
+        }
+        const { pageOrder } = this.request.payload;
+        // Build pageId → routeId lookup from nav.routes
+        const pageIdToRouteId = new Map();
+        for (const route of model.nav.routes) {
+            pageIdToRouteId.set(route.pageId, route.id);
+        }
+        // Build new nav.orders from the flat page_order (array of pageIds)
+        const newOrders = [];
+        const seenRouteIds = new Set();
+        for (const pageId of pageOrder) {
+            const routeId = pageIdToRouteId.get(pageId);
+            if (!routeId)
+                continue;
+            newOrders.push({ routeId, subRoutes: [] });
+            seenRouteIds.add(routeId);
+        }
+        // Safety: append any routes not mentioned (don't lose pages)
+        for (const route of model.nav.routes) {
+            const routeId = pageIdToRouteId.get(route.pageId);
+            if (routeId && !seenRouteIds.has(routeId)) {
+                newOrders.push({ routeId, subRoutes: [] });
+            }
+        }
+        model.nav.orders = newOrders;
+        this.log({
+            message: `Reordered pages: ${pageOrder.join(', ')}`,
+        });
+        return { request: this.request, model };
+    }
+}

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -637,6 +637,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -757,6 +757,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     bpEventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.d.ts

@@ -489,6 +489,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.d.ts

@@ -256,6 +256,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -4935,6 +4935,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     onDraggingEnd: (ev?: any, routeId?: string, previousParentRouteId?: string) => void;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -607,6 +607,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -17,6 +17,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -948,6 +948,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -132,6 +132,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/tracker.d.ts

@@ -1,2 +1,2 @@
-export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';
+export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, PREVIEW_CTA_LOCATIONS, PREVIEW_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';
 export type { EventTracker, BpEventTrackerEvent, BpGlobalEventProps, BpUpsellEventProps, } from './brand-page-maker/composables/useEventTracker';

package/lib/src/tracker.js

@@ -9,4 +9,4 @@
 // entry and the root `.` entry, or subscribers registered here won't receive
 // events published via the root. The multi-entry build hoists it into a shared
 // chunk (both `index` and `tracker` import it) — verified at build time.
-export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';
+export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, PREVIEW_CTA_LOCATIONS, PREVIEW_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';

package/lib/src/tracker.mjs

@@ -1,12 +1,14 @@
-import { A as N, E as O, G as _, P as A, a as I, S as a, T as S, U as s, u as C } from "./useEventTracker-Dmc2jFdN.js";
+import { A as N, E as O, G as _, P as I, a as A, b as a, c as S, S as s, T as C, U as L, u as P } from "./useEventTracker-C5Ql5p7u.js";
 export {
   N as AI_CTA_LOCATIONS,
   O as EVENTS,
   _ as GENERATE_TEXT_CONTINUATION_EVENTS,
-  A as PUBLISH_MODAL_CONTINUATION_EVENTS,
-  I as PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS,
-  a as SELECT_LOCATIONS,
-  S as TRIGGER_TYPE,
-  s as UPGRADE_CTA_LOCATIONS,
-  C as useEventTracker
+  I as PREVIEW_CTA_LOCATIONS,
+  A as PREVIEW_MODAL_CONTINUATION_EVENTS,
+  a as PUBLISH_MODAL_CONTINUATION_EVENTS,
+  S as PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS,
+  s as SELECT_LOCATIONS,
+  C as TRIGGER_TYPE,
+  L as UPGRADE_CTA_LOCATIONS,
+  P as useEventTracker
 };

package/lib/src/{useEventTracker-Dmc2jFdN.js → useEventTracker-C5Ql5p7u.js}

@@ -38,11 +38,23 @@ const E = {
   WEBSITE_MAKER_UNDO: "website_maker_undo",
   WEBSITE_MAKER_REDO: "website_maker_redo",
   WEBSITE_MAKER_HISTORY_CAPPED: "website_maker_history_capped",
-  WEBSITE_MAKER_HISTORY_OVERSIZED: "website_maker_history_oversized"
-}, R = {
+  WEBSITE_MAKER_HISTORY_OVERSIZED: "website_maker_history_oversized",
+  WEBSITE_MAKER_LIVE_PREVIEW_CLICK: "website_maker_live_preview_click",
+  WEBSITE_MAKER_LIVE_PREVIEW_MODAL: "website_maker_live_preview_modal"
+}, r = {
+  MAKER: "maker",
+  MANAGE_WEBSITE: "manage_website"
+}, p = {
+  EXIT: "exit",
+  // The same button reads "Back to Editor" on the editor and "Edit" on other
+  // surfaces — the continuation mirrors the label the user actually clicked.
+  BACK_TO_EDITOR: "back_to_editor",
+  EDIT: "edit",
+  PUBLISH: "publish"
+}, O = {
   MAKER_PREVIEW: "maker_preview",
   SIDEBAR: "sidebar"
-}, p = {
+}, M = {
   MANAGE_WEBSITE: "manage_website",
   MANAGE_WEBSITE_PUBLISH: "manage_website_publish",
   MANAGE_WEBSITE_UPGRADE: "manage_website_upgrade",
@@ -61,14 +73,14 @@ const E = {
   SAVE_CONTACT_SETTINGS: "save_contact_settings",
   NAV_TOP: "nav_top",
   NAV_BOTTOM: "nav_bottom"
-}, O = {
+}, d = {
   AI_BUILDER_TAB: "ai_builder_tab",
   AI_BUILDER_CHAT_UPSELL: "ai_builder_chat_upsell"
 }, S = {
   AUTOMATIC: "automatic",
   USER_TRIGGERED: "user_triggered",
   AI_BUILDER: "ai_builder"
-}, d = {
+}, P = {
   PUBLISH: "publish",
   EXIT: "exit",
   BUY_A_DOMAIN: "buy_a_domain",
@@ -76,14 +88,14 @@ const E = {
   COPY_LINK: "copy_link",
   VIEW_WEBSITE: "view_website",
   USE_EXISTING_DOMAIN: "use_existing_domain"
-}, M = {
+}, L = {
   USE_TEXT: "use_text",
   EXIT: "exit"
-}, T = {
+}, i = {
   PREMIUM: "premium",
   EXIT: "exit",
   FREEMIUM: "freemium"
-}, i = I(), n = I({
+}, T = I(), n = I({
   upsellOpenEventProps: {},
   domainUpsellOpenEventProps: {},
   publishOpenEventProps: {}
@@ -93,12 +105,12 @@ const E = {
       scope: t,
       eventName: o,
       eventProps: {
-        ...e ? {} : i.value,
+        ...e ? {} : T.value,
         ...A
       }
     });
   });
-}, P = () => ({
+}, B = () => ({
   sendExperimentStartedEvent: (e, t) => {
     _(
       E.EXPERIMENT_STARTED,
@@ -116,10 +128,10 @@ const E = {
       location: "post_purchase",
       domain_type: "Free"
     };
-    i.value = { ...t, ...e };
+    T.value = { ...t, ...e };
   },
   setCustomGlobalEventProps: (e) => {
-    i.value = e;
+    T.value = e;
   },
   setUpsellBridgeState: (e) => {
     n.value.upsellOpenEventProps = e;
@@ -206,17 +218,17 @@ const E = {
   },
   sendPublishOptionsForFreeEvent: () => {
     _(E.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
-      upsell_option_continuation: T.FREEMIUM
+      upsell_option_continuation: i.FREEMIUM
     });
   },
   sendPublishOptionsForPremiumEvent: () => {
     _(E.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
-      upsell_option_continuation: T.PREMIUM
+      upsell_option_continuation: i.PREMIUM
     });
   },
   sendPublishOptionsForExitEvent: () => {
     _(E.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
-      upsell_option_continuation: T.EXIT
+      upsell_option_continuation: i.EXIT
     });
   },
   // Template sidebar events
@@ -330,6 +342,26 @@ const E = {
       is_enabled: e
     });
   },
+  // Live preview: the click is tracked separately from the modal opening —
+  // sign-in/save gating means a click doesn't always open the modal, and the
+  // post-sign-in return trip opens it without a click.
+  sendPreviewClickEvent: (e) => {
+    _(E.WEBSITE_MAKER_LIVE_PREVIEW_CLICK, {
+      cta_location: e
+    });
+  },
+  sendPreviewModalOpenEvent: (e) => {
+    _(E.WEBSITE_MAKER_LIVE_PREVIEW_MODAL, {
+      cta_location: e,
+      continuation: null
+    });
+  },
+  sendPreviewModalContinuationEvent: (e, t) => {
+    _(E.WEBSITE_MAKER_LIVE_PREVIEW_MODAL, {
+      cta_location: t,
+      continuation: e
+    });
+  },
   // Undo / Redo (BP-5506)
   sendUndoEvent: (e) => {
     _(E.WEBSITE_MAKER_UNDO, e);
@@ -345,13 +377,15 @@ const E = {
   }
 });
 export {
-  O as A,
+  d as A,
   E,
-  M as G,
-  d as P,
-  R as S,
+  L as G,
+  r as P,
+  O as S,
   S as T,
-  p as U,
-  T as a,
-  P as u
+  M as U,
+  p as a,
+  P as b,
+  i as c,
+  B as u
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.1.14",
+  "version": "6.1.15",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -48,7 +48,11 @@ import AssetLibraryClient from '../../../clients/asset-library-clients';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import type { ShopConfigData } from '@brand-page/models/shop.model';
 import { useProductConfigStore } from '@brand-page-maker/stores/product-config/product-config-store';
-import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
+import {
+  useEventTracker,
+  UPGRADE_CTA_LOCATIONS,
+  PREVIEW_CTA_LOCATIONS,
+} from '../../composables/useEventTracker';
 import { commonTr } from '@src/composables/useTranslate';
 import { useSnapshot } from '../../../composables/useSnapshot';
 import { usePageNavigationStore } from '@src/shared/page-navigation/store/page-navigation-store';
@@ -460,6 +464,10 @@ export default defineComponent({
       this.$emit(EVENTS.Back);
     },
     onPreview() {
+      // Every click is counted, before the gating below — the modal-open event
+      // fires separately, so click → open reads as a funnel.
+      useEventTracker().sendPreviewClickEvent(PREVIEW_CTA_LOCATIONS.MAKER);
+
       // The preview frames a SAVED, owned draft. A signed-out customer can't have
       // one, and the save needs an owner — so sign-in comes first, via the host's
       // Save Progress flow.

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.preview-gate.test.ts

@@ -1,6 +1,11 @@
-import { describe, test, expect, vi } from 'vitest';
+import { describe, test, expect, vi, beforeEach } from 'vitest';
 import BrandPageMakerMixin from './BrandPageMaker.mixin';
 import { EVENTS } from '../../../constants/brand-page-maker';
+import {
+  useEventTracker,
+  EVENTS as TRACKER_EVENTS,
+  PREVIEW_CTA_LOCATIONS,
+} from '@brand-page-maker/composables/useEventTracker';
 
 // The preview frames a SAVED, owned draft, so who saves it decides when the modal
 // may open. Signed out: nobody owns a draft, so hand off to the host's Save Progress
@@ -68,6 +73,38 @@ describe('BrandPageMaker.onPreview', () => {
   });
 });
 
+describe('BrandPageMaker.onPreview click analytics', () => {
+  const received: { name: string; props: any }[] = [];
+
+  useEventTracker().subscribe((event) =>
+    received.push({ name: event.eventName, props: event.eventProps }),
+  );
+
+  beforeEach(() => {
+    received.length = 0;
+  });
+
+  // The click is counted before the sign-in/save gating, so every branch —
+  // including ones where the modal never opens — reports the same event.
+  test.each([
+    ['signed out', { isUserAuthenticated: false }],
+    [
+      'pre-purchase',
+      { containerStore: { isPrePurchase: true, livePreviewUrl: undefined } },
+    ],
+    ['post-purchase', {}],
+  ])('every click is counted: %s', (_, overrides) => {
+    onPreview.call(createContext(overrides as any));
+
+    expect(received).toEqual([
+      {
+        name: TRACKER_EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_CLICK,
+        props: { cta_location: PREVIEW_CTA_LOCATIONS.MAKER },
+      },
+    ]);
+  });
+});
+
 describe('BrandPageMaker livePreviewUrl watcher', () => {
   test('opens the preview once the host save hands back a URL', () => {
     const context = createContext({

package/src/brand-page-maker/components/preview-modal/PreviewModalWithState.test.ts

@@ -7,6 +7,12 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
 } from '@brand-page-maker/stores';
+import {
+  useEventTracker,
+  EVENTS,
+  PREVIEW_CTA_LOCATIONS,
+  PREVIEW_MODAL_CONTINUATION_EVENTS,
+} from '@brand-page-maker/composables/useEventTracker';
 
 const PREVIEW_URL = 'https://brand.site/_p/request?token=signed';
 
@@ -243,4 +249,121 @@ describe('PreviewModalWithState', () => {
 
     expect(wrapper.emitted('edit')).toHaveLength(1);
   });
+
+  describe('analytics', () => {
+    const received: { name: string; props: any }[] = [];
+
+    useEventTracker().subscribe((event) =>
+      received.push({ name: event.eventName, props: event.eventProps }),
+    );
+
+    const openModal = async (props: Record<string, unknown> = {}) => {
+      vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
+        saved: true,
+        canPublish: true,
+      } as any);
+      vi.spyOn(containerStore, 'showSaveSuccessMessage').mockResolvedValue(
+        undefined,
+      );
+      vi.spyOn(
+        useBrandPageMakerStore(),
+        'showNextNotificationMessage',
+      ).mockResolvedValue(undefined);
+
+      const wrapper = shallowMount(PreviewModalWithState, {
+        props: { visible: false, ...props },
+      });
+
+      await wrapper.setProps({ visible: true });
+      await flushPromises();
+
+      return wrapper;
+    };
+
+    beforeEach(() => {
+      received.length = 0;
+    });
+
+    test('opening fires the modal event, stamped with the editor surface by default', async () => {
+      await openModal();
+
+      expect(received).toEqual([
+        {
+          name: EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL,
+          props: {
+            cta_location: PREVIEW_CTA_LOCATIONS.MAKER,
+            continuation: null,
+          },
+        },
+      ]);
+    });
+
+    test('the hosting surface stamps its own cta_location', async () => {
+      await openModal({ ctaLocation: PREVIEW_CTA_LOCATIONS.MANAGE_WEBSITE });
+
+      expect(received).toEqual([
+        {
+          name: EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL,
+          props: {
+            cta_location: PREVIEW_CTA_LOCATIONS.MANAGE_WEBSITE,
+            continuation: null,
+          },
+        },
+      ]);
+    });
+
+    test.each([
+      ['close', PREVIEW_MODAL_CONTINUATION_EVENTS.EXIT],
+      // On the editor (cta=publish, the default) the button reads "Back to Editor".
+      ['edit', PREVIEW_MODAL_CONTINUATION_EVENTS.BACK_TO_EDITOR],
+      ['publish', PREVIEW_MODAL_CONTINUATION_EVENTS.PUBLISH],
+    ])('%s continues the modal event as %s', async (emitName, continuation) => {
+      const wrapper = await openModal();
+
+      received.length = 0;
+      await wrapper.findComponent(LivePreviewModal).vm.$emit(emitName);
+      await flushPromises();
+
+      expect(received).toEqual([
+        {
+          name: EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL,
+          props: { cta_location: PREVIEW_CTA_LOCATIONS.MAKER, continuation },
+        },
+      ]);
+    });
+
+    // The manage page's button reads "Edit" (cta=edit), so its continuation is
+    // edit — the editor's back_to_editor case is covered above.
+    test('continuations carry the hosting surface and its label', async () => {
+      const wrapper = await openModal({
+        cta: 'edit',
+        ctaLocation: PREVIEW_CTA_LOCATIONS.MANAGE_WEBSITE,
+      });
+
+      received.length = 0;
+      await wrapper.findComponent(LivePreviewModal).vm.$emit('edit');
+      await flushPromises();
+
+      expect(received).toEqual([
+        {
+          name: EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL,
+          props: {
+            cta_location: PREVIEW_CTA_LOCATIONS.MANAGE_WEBSITE,
+            continuation: PREVIEW_MODAL_CONTINUATION_EVENTS.EDIT,
+          },
+        },
+      ]);
+    });
+
+    // Retry re-runs the save, it isn't a decision about the preview — not tracked.
+    test('retry is not tracked', async () => {
+      const wrapper = await openModal();
+
+      received.length = 0;
+      await wrapper.findComponent(LivePreviewModal).vm.$emit('retry');
+      await flushPromises();
+
+      expect(received).toEqual([]);
+    });
+  });
 });

package/src/brand-page-maker/components/preview-modal/PreviewModalWithState.vue

@@ -27,18 +27,26 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
 } from '@brand-page-maker/stores';
+import {
+  useEventTracker,
+  PREVIEW_CTA_LOCATIONS,
+  PREVIEW_MODAL_CONTINUATION_EVENTS,
+} from '@brand-page-maker/composables/useEventTracker';
 import type { UiDeviceMode } from '@shared/models';
 
 const props = defineProps({
   visible: { type: Boolean, default: false },
   // Per-surface header CTA; defaults to 'publish' so the editor is unchanged.
   cta: { type: String as PropType<LivePreviewCta>, default: 'publish' },
+  // Which surface hosts the preview — stamped on its analytics as cta_location.
+  ctaLocation: { type: String, default: PREVIEW_CTA_LOCATIONS.MAKER },
 });
 
 const emit = defineEmits<{ close: []; publish: []; edit: [] }>();
 
 const containerStore = useBrandPageContainerStore();
 const makerStore = useBrandPageMakerStore();
+const eventTracker = useEventTracker();
 
 // The preview must step back for any modal opening over the editor.
 const isFlowModalOpen = computed(() => containerStore.isAnyModalVisible);
@@ -96,18 +104,34 @@ const announceExit = async (): Promise<void> => {
 };
 
 const onClose = async (): Promise<void> => {
+  // Escape funnels through the shell's close emit too, so it counts as an exit.
+  eventTracker.sendPreviewModalContinuationEvent(
+    PREVIEW_MODAL_CONTINUATION_EVENTS.EXIT,
+    props.ctaLocation,
+  );
   emit('close');
 
   await announceExit();
 };
 
 const onEdit = async (): Promise<void> => {
+  // Mirror the rendered label: cta=publish shows "Back to Editor", else "Edit".
+  eventTracker.sendPreviewModalContinuationEvent(
+    props.cta === 'publish'
+      ? PREVIEW_MODAL_CONTINUATION_EVENTS.BACK_TO_EDITOR
+      : PREVIEW_MODAL_CONTINUATION_EVENTS.EDIT,
+    props.ctaLocation,
+  );
   emit('edit');
 
   await announceExit();
 };
 
 const onPublish = (): void => {
+  eventTracker.sendPreviewModalContinuationEvent(
+    PREVIEW_MODAL_CONTINUATION_EVENTS.PUBLISH,
+    props.ctaLocation,
+  );
   // Route through the host's publish flow so pre-purchase still reaches checkout.
   publishing.value = true;
   emit('publish');
@@ -117,6 +141,7 @@ watch(
   () => props.visible,
   (isVisible) => {
     if (isVisible) {
+      eventTracker.sendPreviewModalOpenEvent(props.ctaLocation);
       openPreview();
     } else {
       previewUrl.value = '';