diff --git a/web/utils/posthog.ts b/web/utils/posthog.ts
deleted file mode 100644
index 9bcbaa8ce2..0000000000
--- a/web/utils/posthog.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import posthog, { Properties } from 'posthog-js'
-
-// Initialize PostHog
-posthog.init(ANALYTICS_ID, {
- api_host: ANALYTICS_HOST,
- autocapture: false,
- capture_pageview: false,
- capture_pageleave: false,
- rageclick: false,
-})
-// Export the PostHog instance
-export const instance = posthog
-
-// Enum for Analytics Events
-export enum AnalyticsEvent {
- Ping = 'Ping',
-}
-
-// Function to determine the operating system
-function getOperatingSystem(): string {
- if (isMac) return 'MacOS'
- if (isWindows) return 'Windows'
- if (isLinux) return 'Linux'
- return 'Unknown'
-}
-
-function captureAppVersionAndOS() {
- const properties: Properties = {
- $appVersion: VERSION,
- $userOperatingSystem: getOperatingSystem(),
- // Set the following Posthog default properties to empty strings
- $initial_browser: '',
- $browser: '',
- $initial_browser_version: '',
- $browser_version: '',
- $initial_current_url: '',
- $current_url: '',
- $initial_device_type: '',
- $device_type: '',
- $initial_pathname: '',
- $pathname: '',
- $initial_referrer: '',
- $referrer: '',
- $initial_referring_domain: '',
- $referring_domain: '',
- }
- posthog.capture(AnalyticsEvent.Ping, properties)
-}
-
-captureAppVersionAndOS()
diff --git a/web/utils/umami.tsx b/web/utils/umami.tsx
new file mode 100644
index 0000000000..ac9e703049
--- /dev/null
+++ b/web/utils/umami.tsx
@@ -0,0 +1,65 @@
+import { useEffect } from 'react'
+
+import Script from 'next/script'
+
+// Define the type for the umami data object
+interface UmamiData {
+ version: string
+}
+
+declare global {
+ interface Window {
+ umami:
+ | {
+ track: (event: string, data?: UmamiData) => void
+ }
+ | undefined
+ }
+}
+
+const Umami = () => {
+ const appVersion = VERSION
+ const analyticsHost = ANALYTICS_HOST
+ const analyticsId = ANALYTICS_ID
+
+ useEffect(() => {
+ if (!appVersion || !analyticsHost || !analyticsId) return
+ const ping = () => {
+ // Check if umami is defined before ping
+ if (window.umami !== null && typeof window.umami !== 'undefined') {
+ window.umami.track(appVersion, {
+ version: appVersion,
+ })
+ }
+ }
+
+ // Wait for umami to be defined before ping
+ if (window.umami !== null && typeof window.umami !== 'undefined') {
+ ping()
+ } else {
+ // Listen for umami script load event
+ document.addEventListener('umami:loaded', ping)
+ }
+
+ // Cleanup function to remove event listener if the component unmounts
+ return () => {
+ document.removeEventListener('umami:loaded', ping)
+ }
+ }, [appVersion, analyticsHost, analyticsId])
+
+ return (
+ <>
+ {appVersion && analyticsHost && analyticsId && (
+