feat: add cloud gtm injection

global.d.ts

@@ -4,6 +4,7 @@ declare const __SENTRY_DSN__: string
 declare const __ALGOLIA_APP_ID__: string
 declare const __ALGOLIA_API_KEY__: string
 declare const __USE_PROD_CONFIG__: boolean
+declare const __GTM_ENABLED__: boolean
 
 interface Window {
   __CONFIG__: {
@@ -30,6 +31,7 @@ interface Window {
       badge?: string
     }
   }
+  dataLayer?: Array<Record<string, unknown>>
 }
 
 interface Navigator {

scripts/vite-define-shim.ts

@@ -11,6 +11,7 @@ declare global {
   const __ALGOLIA_APP_ID__: string
   const __ALGOLIA_API_KEY__: string
   const __USE_PROD_CONFIG__: boolean
+  const __GTM_ENABLED__: boolean
   const __DISTRIBUTION__: 'desktop' | 'localhost' | 'cloud'
   const __IS_NIGHTLY__: boolean
 }
@@ -22,6 +23,7 @@ type GlobalWithDefines = typeof globalThis & {
   __ALGOLIA_APP_ID__: string
   __ALGOLIA_API_KEY__: string
   __USE_PROD_CONFIG__: boolean
+  __GTM_ENABLED__: boolean
   __DISTRIBUTION__: 'desktop' | 'localhost' | 'cloud'
   __IS_NIGHTLY__: boolean
   window?: Record<string, unknown>
@@ -37,6 +39,7 @@ globalWithDefines.__SENTRY_DSN__ = ''
 globalWithDefines.__ALGOLIA_APP_ID__ = ''
 globalWithDefines.__ALGOLIA_API_KEY__ = ''
 globalWithDefines.__USE_PROD_CONFIG__ = false
+globalWithDefines.__GTM_ENABLED__ = false
 globalWithDefines.__DISTRIBUTION__ = 'localhost'
 globalWithDefines.__IS_NIGHTLY__ = false
 

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

@@ -206,6 +206,51 @@ describe('useSubscription', () => {
       )
     })
 
+    it('pushes purchase event after a pending subscription completes', async () => {
+      const originalGtmEnabled = __GTM_ENABLED__
+      try {
+        vi.stubGlobal('__GTM_ENABLED__', true)
+        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()
+      } finally {
+        vi.stubGlobal('__GTM_ENABLED__', originalGtmEnabled)
+      }
+    })
+
     it('should handle fetch errors gracefully', async () => {
       vi.mocked(global.fetch).mockResolvedValue({
         ok: false,

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

@@ -1,19 +1,26 @@
 import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { createSharedComposable } from '@vueuse/core'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getComfyApiBaseUrl, getComfyPlatformBaseUrl } from '@/config/comfyApi'
-import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 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'
 
@@ -29,6 +36,7 @@
   const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
   const telemetry = useTelemetry()
   const isInitialized = ref(false)
+  const { t } = useI18n()
 
   const isSubscribedOrIsNotCloud = computed(() => {
     if (!isCloud || !window.__CONFIG__?.subscription_required) return true
@@ -94,6 +102,46 @@
   })
 
   const buildApiUrl = (path: string) => `${getComfyApiBaseUrl()}${path}`
+  const isGtmEnabled = __GTM_ENABLED__
+
+  const pushDataLayerEvent = (event: Record<string, unknown>) => {
+    if (!isGtmEnabled || typeof window === 'undefined') return
+    const dataLayer = window.dataLayer ?? (window.dataLayer = [])
+    dataLayer.push(event)
+  }
+
+  const trackSubscriptionPurchase = (
+    status: CloudSubscriptionStatusResponse | null
+  ) => {
+    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 +242,7 @@
 
     const statusData = await response.json()
     subscriptionStatus.value = statusData
+    trackSubscriptionPurchase(statusData)
     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,9 @@ export async function performSubscriptionCheckout(
   const data = await response.json()
 
   if (data.checkout_url) {
+    if (__GTM_ENABLED__) {
+      startSubscriptionPurchaseTracking(tierKey, currentBillingCycle)
+    }
     if (openInNewTab) {
       window.open(data.checkout_url, '_blank')
     } else {

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

@@ -0,0 +1,69 @@
+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']
+
+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
+  const raw = localStorage.getItem(STORAGE_KEY)
+  if (!raw) return null
+
+  try {
+    const parsed = JSON.parse(raw) as PendingSubscriptionPurchase
+    if (!parsed || typeof parsed !== 'object') {
+      localStorage.removeItem(STORAGE_KEY)
+      return null
+    }
+
+    const { tierKey, billingCycle, timestamp } = parsed
+    if (
+      !VALID_TIERS.includes(tierKey) ||
+      !VALID_CYCLES.includes(billingCycle) ||
+      typeof timestamp !== 'number'
+    ) {
+      localStorage.removeItem(STORAGE_KEY)
+      return null
+    }
+
+    if (Date.now() - timestamp > MAX_AGE_MS) {
+      localStorage.removeItem(STORAGE_KEY)
+      return null
+    }
+
+    return parsed
+  } catch {
+    localStorage.removeItem(STORAGE_KEY)
+    return null
+  }
+}
+
+export function clearPendingSubscriptionPurchase(): void {
+  if (typeof window === 'undefined') return
+  localStorage.removeItem(STORAGE_KEY)
+}

src/router.ts

@@ -36,6 +36,17 @@ function getBasePath(): string {
 
 const basePath = getBasePath()
 
+function pushPageView(): void {
+  if (!__GTM_ENABLED__ || typeof window === 'undefined') return
+
+  const dataLayer = window.dataLayer ?? (window.dataLayer = [])
+  dataLayer.push({
+    event: 'page_view',
+    page_location: window.location.href,
+    page_title: document.title
+  })
+}
+
 const router = createRouter({
   history: isFileProtocol
     ? createWebHashHistory()
@@ -93,6 +104,10 @@ installPreservedQueryTracker(router, [
   }
 ])
 
+router.afterEach(() => {
+  pushPageView()
+})
+
 if (isCloud) {
   const { flags } = useFeatureFlags()
   const PUBLIC_ROUTE_NAMES = new Set([

src/stores/firebaseAuthStore.ts

@@ -81,6 +81,31 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
 
   const buildApiUrl = (path: string) => `${getComfyApiBaseUrl()}${path}`
 
+  const pushDataLayerEvent = (event: Record<string, unknown>) => {
+    if (!__GTM_ENABLED__ || typeof window === 'undefined') return
+    const dataLayer = window.dataLayer ?? (window.dataLayer = [])
+    dataLayer.push(event)
+  }
+
+  const hashSha256 = async (value: string): Promise<string | undefined> => {
+    if (typeof crypto === 'undefined' || !crypto.subtle) return
+    const data = new TextEncoder().encode(value)
+    const hash = await crypto.subtle.digest('SHA-256', data)
+    return Array.from(new Uint8Array(hash))
+      .map((b) => b.toString(16).padStart(2, '0'))
+      .join('')
+  }
+
+  const trackSignUp = async (method: 'email' | 'google' | 'github') => {
+    const userId = currentUser.value?.uid
+    const hashedUserId = userId ? await hashSha256(userId) : undefined
+    pushDataLayerEvent({
+      event: 'sign_up',
+      method,
+      ...(hashedUserId ? { user_id: hashedUserId } : {})
+    })
+  }
+
   // Providers
   const googleProvider = new GoogleAuthProvider()
   googleProvider.addScope('email')
@@ -347,6 +372,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
         method: 'email',
         is_new_user: true
       })
+      await trackSignUp('email')
     }
 
     return result
@@ -365,6 +391,9 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
         method: 'google',
         is_new_user: isNewUser
       })
+      if (isNewUser) {
+        await trackSignUp('google')
+      }
     }
 
     return result
@@ -383,6 +412,9 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
         method: 'github',
         is_new_user: isNewUser
       })
+      if (isNewUser) {
+        await trackSignUp('github')
+      }
     }
 
     return result