integrate Amplitude analytics into the application (#29049)

Co-authored-by: CodingOnStar <hanxujiang@dify.ai>
Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/app/create-app-dialog/app-list/index.tsx

@@ -28,6 +28,7 @@ import Input from '@/app/components/base/input'
 import { AppModeEnum } from '@/types/app'
 import { DSLImportMode } from '@/models/app'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 type AppsProps = {
   onSuccess?: () => void
@@ -141,6 +142,15 @@ const Apps = ({
         icon_background,
         description,
       })
+
+      // Track app creation from template
+      trackEvent('create_app_with_template', {
+        app_mode: mode,
+        template_id: currApp?.app.id,
+        template_name: currApp?.app.name,
+        description,
+      })
+
       setIsShowCreateModal(false)
       Toast.notify({
         type: 'success',

web/app/components/app/create-app-modal/index.tsx

@@ -30,6 +30,7 @@ import { getRedirection } from '@/utils/app-redirection'
 import FullScreenModal from '@/app/components/base/fullscreen-modal'
 import useTheme from '@/hooks/use-theme'
 import { useDocLink } from '@/context/i18n'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 type CreateAppProps = {
   onSuccess: () => void
@@ -82,6 +83,13 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
         icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined,
         mode: appMode,
       })
+
+      // Track app creation success
+      trackEvent('create_app', {
+        app_mode: appMode,
+        description,
+      })
+
       notify({ type: 'success', message: t('app.newApp.appCreated') })
       onSuccess()
       onClose()

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -28,6 +28,7 @@ import { getRedirection } from '@/utils/app-redirection'
 import cn from '@/utils/classnames'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { noop } from 'lodash-es'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 type CreateFromDSLModalProps = {
   show: boolean
@@ -112,6 +113,13 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         return
       const { id, status, app_id, app_mode, imported_dsl_version, current_dsl_version } = response
       if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
+        // Track app creation from DSL import
+        trackEvent('create_app_with_dsl', {
+          app_mode,
+          creation_method: currentTab === CreateFromDSLModalTab.FROM_FILE ? 'dsl_file' : 'dsl_url',
+          has_warnings: status === DSLImportStatus.COMPLETED_WITH_WARNINGS,
+        })
+
         if (onSuccess)
           onSuccess()
         if (onClose)

web/app/components/app/workflow-log/filter.tsx

@@ -8,6 +8,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import type { QueryParam } from './index'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
+import { trackEvent } from '@/app/components/base/amplitude/utils'
 dayjs.extend(quarterOfYear)
 
 const today = dayjs()
@@ -37,6 +38,9 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
         value={queryParams.status || 'all'}
         onSelect={(item) => {
           setQueryParams({ ...queryParams, status: item.value as string })
+          trackEvent('workflow_log_filter_status_selected', {
+            workflow_log_filter_status: item.value as string,
+          })
         }}
         onClear={() => setQueryParams({ ...queryParams, status: 'all' })}
         items={[{ value: 'all', name: 'All' },