mirror of https://github.com/langgenius/dify.git
90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import type { FC } from 'react'
|
|
import * as amplitude from '@amplitude/analytics-browser'
|
|
import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
|
|
import * as React from 'react'
|
|
import { useEffect } from 'react'
|
|
import { AMPLITUDE_API_KEY, IS_CLOUD_EDITION } from '@/config'
|
|
|
|
export type IAmplitudeProps = {
|
|
sessionReplaySampleRate?: number
|
|
}
|
|
|
|
// Check if Amplitude should be enabled
|
|
export const isAmplitudeEnabled = () => {
|
|
return IS_CLOUD_EDITION && !!AMPLITUDE_API_KEY
|
|
}
|
|
|
|
// Map URL pathname to English page name for consistent Amplitude tracking
|
|
const getEnglishPageName = (pathname: string): string => {
|
|
// Remove leading slash and get the first segment
|
|
const segments = pathname.replace(/^\//, '').split('/')
|
|
const firstSegment = segments[0] || 'home'
|
|
|
|
const pageNameMap: Record<string, string> = {
|
|
'': 'Home',
|
|
'apps': 'Studio',
|
|
'datasets': 'Knowledge',
|
|
'explore': 'Explore',
|
|
'tools': 'Tools',
|
|
'account': 'Account',
|
|
'signin': 'Sign In',
|
|
'signup': 'Sign Up',
|
|
}
|
|
|
|
return pageNameMap[firstSegment] || firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1)
|
|
}
|
|
|
|
// Enrichment plugin to override page title with English name for page view events
|
|
const pageNameEnrichmentPlugin = (): amplitude.Types.EnrichmentPlugin => {
|
|
return {
|
|
name: 'page-name-enrichment',
|
|
type: 'enrichment',
|
|
setup: async () => undefined,
|
|
execute: async (event: amplitude.Types.Event) => {
|
|
// Only modify page view events
|
|
if (event.event_type === '[Amplitude] Page Viewed' && event.event_properties) {
|
|
const pathname = typeof window !== 'undefined' ? window.location.pathname : ''
|
|
event.event_properties['[Amplitude] Page Title'] = getEnglishPageName(pathname)
|
|
}
|
|
return event
|
|
},
|
|
}
|
|
}
|
|
|
|
const AmplitudeProvider: FC<IAmplitudeProps> = ({
|
|
sessionReplaySampleRate = 0.5,
|
|
}) => {
|
|
useEffect(() => {
|
|
// Only enable in Saas edition with valid API key
|
|
if (!isAmplitudeEnabled())
|
|
return
|
|
|
|
// Initialize Amplitude
|
|
amplitude.init(AMPLITUDE_API_KEY, {
|
|
defaultTracking: {
|
|
sessions: true,
|
|
pageViews: true,
|
|
formInteractions: true,
|
|
fileDownloads: true,
|
|
attribution: true,
|
|
},
|
|
})
|
|
|
|
// Add page name enrichment plugin to override page title with English name
|
|
amplitude.add(pageNameEnrichmentPlugin())
|
|
|
|
// Add Session Replay plugin
|
|
const sessionReplay = sessionReplayPlugin({
|
|
sampleRate: sessionReplaySampleRate,
|
|
})
|
|
amplitude.add(sessionReplay)
|
|
}, [])
|
|
|
|
// This is a client component that renders nothing
|
|
return null
|
|
}
|
|
|
|
export default React.memo(AmplitudeProvider)
|