From de39ece33f2b584595c9d987d74d5bff92a7705b Mon Sep 17 00:00:00 2001
From: Deep Mehta <deepme987@gmail.com>
Date: Mon, 24 Nov 2025 02:00:00 +0530
Subject: [PATCH] Add analytics tracking for cloud notification feature
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds Mixpanel event tracking and UTM parameters to measure:
- Modal impression rate (cloud_notification_modal_shown)
- Click-through rate (cloud_notification_explore_cloud_clicked)
- Dismiss rate (cloud_notification_continue_locally_clicked)
- Badge engagement (cloud_notification_badge_clicked)

UTM parameters enable full funnel tracking:
- Desktop users clicking Explore Cloud
- Cloud website signups with utm_source=desktop
- Subscription conversions attributed to desktop

This enables measurement of the desktop→cloud conversion funnel to validate the 5.6% signup-to-paid conversion rate goal.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../content/CloudNotificationContent.vue      | 24 ++++++++++++++++++-
 src/components/topbar/TopbarBadges.vue        |  4 ++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog/content/CloudNotificationContent.vue b/src/components/dialog/content/CloudNotificationContent.vue
index 657d9dcb9..e2c654f27 100644
--- a/src/components/dialog/content/CloudNotificationContent.vue
+++ b/src/components/dialog/content/CloudNotificationContent.vue
@@ -87,18 +87,40 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const { t } = useI18n()
 
+// Track when modal is shown
+onMounted(() => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_modal_shown'
+  })
+})
+
 const onDismiss = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_continue_locally_clicked'
+  })
   useDialogStore().closeDialog()
 }
 
 const onExplore = () => {
-  window.open('https://www.comfy.org/cloud', '_blank')
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_explore_cloud_clicked'
+  })
+
+  // Add UTM parameters for attribution tracking
+  const url = new URL('https://www.comfy.org/cloud')
+  url.searchParams.set('utm_source', 'desktop')
+  url.searchParams.set('utm_medium', 'notification')
+  url.searchParams.set('utm_campaign', 'macos_first_launch')
+
+  window.open(url.toString(), '_blank')
   useDialogStore().closeDialog()
 }
 </script>
diff --git a/src/components/topbar/TopbarBadges.vue b/src/components/topbar/TopbarBadges.vue
index de0d8386f..165988520 100644
--- a/src/components/topbar/TopbarBadges.vue
+++ b/src/components/topbar/TopbarBadges.vue
@@ -34,6 +34,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
@@ -92,6 +93,9 @@ const cloudBadge = computed<TopbarBadgeType | null>(() => {
 })
 
 const handleCloudBadgeClick = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_badge_clicked'
+  })
   dialogService.showCloudNotification()
 }
 </script>