feat: add cloud gtm injection (#8311)

## Summary

Add GTM injection for cloud distribution builds and push SPA page view +
signup events.

## Changes

- **What**: Inject GTM script into head-prepend and noscript iframe into
body-prepend for cloud builds
- **What**: Push `page_view` to `dataLayer` on cloud route changes
(page_location + page_title)
- **What**: Push `sign_up` to `dataLayer` after successful account
creation (email/google/github)
- **Dependencies**: None

## Review Focus

- Placement order for head-prepend/body-prepend and cloud-only gating
- Route-change page_view payload shape
- Signup event emission only for new users

## Screenshots (if applicable)

<img width="1512" height="860" alt="Screenshot 2026-01-26 at 11 38
11 AM"
src="https://github.com/user-attachments/assets/03fb61db-5ca4-4432-9704-bbdcc4c6c1b7"
/>

<img width="1512" height="862" alt="Screenshot 2026-01-26 at 11 38
26 AM"
src="https://github.com/user-attachments/assets/6e46c855-a552-4e52-9800-17898a512d4d"
/>

src/platform/cloud/subscription/composables/useSubscription.test.ts

@@ -206,6 +206,45 @@ describe('useSubscription', () => {
       )
     })
 
+    it('pushes purchase event after a pending subscription completes', async () => {
+      window.dataLayer = []
+      localStorage.setItem(
+        'pending_subscription_purchase',
+        JSON.stringify({
+          tierKey: 'creator',
+          billingCycle: 'monthly',
+          timestamp: Date.now()
+        })
+      )
+
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          is_active: true,
+          subscription_id: 'sub_123',
+          subscription_tier: 'CREATOR',
+          subscription_duration: 'MONTHLY'
+        })
+      } as Response)
+
+      mockIsLoggedIn.value = true
+      const { fetchStatus } = useSubscription()
+
+      await fetchStatus()
+
+      expect(window.dataLayer).toHaveLength(1)
+      expect(window.dataLayer?.[0]).toMatchObject({
+        event: 'purchase',
+        transaction_id: 'sub_123',
+        currency: 'USD',
+        item_id: 'monthly_creator',
+        item_variant: 'monthly',
+        item_category: 'subscription',
+        quantity: 1
+      })
+      expect(localStorage.getItem('pending_subscription_purchase')).toBeNull()
+    })
+
     it('should handle fetch errors gracefully', async () => {
       vi.mocked(global.fetch).mockResolvedValue({
         ok: false,

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -8,12 +8,20 @@ import { getComfyApiBaseUrl, getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import { pushDataLayerEvent } from '@/platform/telemetry/gtm'
 import {
   FirebaseAuthStoreError,
   useFirebaseAuthStore
 } from '@/stores/firebaseAuthStore'
 import { useDialogService } from '@/services/dialogService'
-import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
+import {
+  getTierPrice,
+  TIER_TO_KEY
+} from '@/platform/cloud/subscription/constants/tierPricing'
+import {
+  clearPendingSubscriptionPurchase,
+  getPendingSubscriptionPurchase
+} from '@/platform/cloud/subscription/utils/subscriptionPurchaseTracker'
 import type { operations } from '@/types/comfyRegistryTypes'
 import { useSubscriptionCancellationWatcher } from './useSubscriptionCancellationWatcher'
 
@@ -93,7 +101,42 @@ function useSubscriptionInternal() {
       : baseName
   })
 
-  const buildApiUrl = (path: string) => `${getComfyApiBaseUrl()}${path}`
+  function buildApiUrl(path: string): string {
+    return `${getComfyApiBaseUrl()}${path}`
+  }
+
+  function trackSubscriptionPurchase(
+    status: CloudSubscriptionStatusResponse | null
+  ): void {
+    if (!status?.is_active || !status.subscription_id) return
+
+    const pendingPurchase = getPendingSubscriptionPurchase()
+    if (!pendingPurchase) return
+
+    const { tierKey, billingCycle } = pendingPurchase
+    const isYearly = billingCycle === 'yearly'
+    const baseName = t(`subscription.tiers.${tierKey}.name`)
+    const planName = isYearly
+      ? t('subscription.tierNameYearly', { name: baseName })
+      : baseName
+    const unitPrice = getTierPrice(tierKey, isYearly)
+    const value = isYearly && tierKey !== 'founder' ? unitPrice * 12 : unitPrice
+
+    pushDataLayerEvent({
+      event: 'purchase',
+      transaction_id: status.subscription_id,
+      value,
+      currency: 'USD',
+      item_id: `${billingCycle}_${tierKey}`,
+      item_name: planName,
+      item_category: 'subscription',
+      item_variant: billingCycle,
+      price: value,
+      quantity: 1
+    })
+
+    clearPendingSubscriptionPurchase()
+  }
 
   const fetchStatus = wrapWithErrorHandlingAsync(
     fetchSubscriptionStatus,
@@ -194,6 +237,12 @@ function useSubscriptionInternal() {
 
     const statusData = await response.json()
     subscriptionStatus.value = statusData
+
+    try {
+      await trackSubscriptionPurchase(statusData)
+    } catch (error) {
+      console.error('Failed to track subscription purchase', error)
+    }
     return statusData
   }
 

src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts

@@ -6,6 +6,7 @@ import {
   useFirebaseAuthStore
 } from '@/stores/firebaseAuthStore'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import { startSubscriptionPurchaseTracking } from '@/platform/cloud/subscription/utils/subscriptionPurchaseTracker'
 import type { BillingCycle } from './subscriptionTierRank'
 
 type CheckoutTier = TierKey | `${TierKey}-yearly`
@@ -78,6 +79,7 @@ export async function performSubscriptionCheckout(
   const data = await response.json()
 
   if (data.checkout_url) {
+    startSubscriptionPurchaseTracking(tierKey, currentBillingCycle)
     if (openInNewTab) {
       window.open(data.checkout_url, '_blank')
     } else {

src/platform/cloud/subscription/utils/subscriptionPurchaseTracker.ts

@@ -0,0 +1,78 @@
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import type { BillingCycle } from './subscriptionTierRank'
+
+type PendingSubscriptionPurchase = {
+  tierKey: TierKey
+  billingCycle: BillingCycle
+  timestamp: number
+}
+
+const STORAGE_KEY = 'pending_subscription_purchase'
+const MAX_AGE_MS = 24 * 60 * 60 * 1000 // 24 hours
+const VALID_TIERS: TierKey[] = ['standard', 'creator', 'pro', 'founder']
+const VALID_CYCLES: BillingCycle[] = ['monthly', 'yearly']
+
+const safeRemove = (): void => {
+  try {
+    localStorage.removeItem(STORAGE_KEY)
+  } catch {
+    // Ignore storage errors (e.g. private browsing mode)
+  }
+}
+
+export function startSubscriptionPurchaseTracking(
+  tierKey: TierKey,
+  billingCycle: BillingCycle
+): void {
+  if (typeof window === 'undefined') return
+  try {
+    const payload: PendingSubscriptionPurchase = {
+      tierKey,
+      billingCycle,
+      timestamp: Date.now()
+    }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload))
+  } catch {
+    // Ignore storage errors (e.g. private browsing mode)
+  }
+}
+
+export function getPendingSubscriptionPurchase(): PendingSubscriptionPurchase | null {
+  if (typeof window === 'undefined') return null
+
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return null
+
+    const parsed = JSON.parse(raw) as PendingSubscriptionPurchase
+    if (!parsed || typeof parsed !== 'object') {
+      safeRemove()
+      return null
+    }
+
+    const { tierKey, billingCycle, timestamp } = parsed
+    if (
+      !VALID_TIERS.includes(tierKey) ||
+      !VALID_CYCLES.includes(billingCycle) ||
+      typeof timestamp !== 'number'
+    ) {
+      safeRemove()
+      return null
+    }
+
+    if (Date.now() - timestamp > MAX_AGE_MS) {
+      safeRemove()
+      return null
+    }
+
+    return parsed
+  } catch {
+    safeRemove()
+    return null
+  }
+}
+
+export function clearPendingSubscriptionPurchase(): void {
+  if (typeof window === 'undefined') return
+  safeRemove()
+}