Add analytics tracking for cloud notification feature

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>
This commit is contained in:
Deep Mehta
2025-11-24 02:00:00 +05:30
parent e5ba351dcc
commit de39ece33f
2 changed files with 27 additions and 1 deletions

View File

@@ -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>

View File

@@ -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>