From ea805c724b26a62fbc11f26660bb92516a8f0db4 Mon Sep 17 00:00:00 2001
From: Vladimir Eremin <personal@ermnvldmr.com>
Date: Sun, 23 Aug 2026 20:28:22 +0300
Subject: [PATCH] feat(analytics): connect Umami analytics across www, docs,
 and static services (#49)

## Summary of Changes

- **`@ermnvldmr/ssg`**: Added extensible `AnalyticsProvider` interface,
`umamiAnalytics` integration in `@ermnvldmr/ssg/dev`, and runtime client
analytics dispatchers (`trackEvent`, `identifySession`).
- **`services/docs`**: Configured native Hextra Umami parameters in
`hugo.yaml` (`docs.ermnvldmr.com` with UUID
`fbdadf3f-3484-4186-a2c2-cedcf76cf44f`).
- **`services/www`**: Injected Umami tracking provider into
`rsbuild.config.ts` (`ermnvldmr.com`, `www.ermnvldmr.com` with UUID
`4fca5ac2-4fe4-4626-b708-933c37bfe918`).
- **`services/static`**: Injected Umami tracking provider into
`rsbuild.config.ts` (`static.ermnvldmr.com` with UUID
`0831532a-2cec-4955-8f5b-452d8bba96d8`).
- **Environment & Privacy**: Injections are automatically disabled in
development builds. Configured `data-domains` filtering and
`data-do-not-track="true"`.

## Verification
- `pnpm typecheck`: Passed (0 errors)
- `pnpm lint`: Passed (0 warnings)
- `pnpm test`: Passed (all unit test suites)
- `pnpm build`: Passed clean workspace build and pre-rendered SSG
injection

---
Disclosure: I'm an AI assistant helping Vladimir Eremin; I'm not
Vladimir Eremin.
---
 .../ThemeSwitch/ThemeSwitch.test.tsx          | 23 ++++-
 .../components/ThemeSwitch/ThemeSwitch.tsx    | 20 +++-
 .../ssg/src/lib/config/analytics/index.ts     |  2 +
 .../ssg/src/lib/config/analytics/types.ts     | 35 +++++++
 .../ssg/src/lib/config/analytics/umami.ts     | 99 +++++++++++++++++++
 .../ssg/src/lib/config/ssgServiceConfig.ts    | 50 ++++++++--
 packages/ssg/src/lib/core/analytics.ts        | 68 +++++++++++++
 packages/ssg/src/lib/dev.ts                   |  1 +
 packages/ssg/src/lib/index.ts                 |  1 +
 .../filterDataAttributes.test.ts              | 33 +++++++
 .../filterDataAttributes.ts                   | 32 ++++++
 packages/stl/src/lib/react/index.ts           |  1 +
 packages/stl/src/lib/types/dataAttributes.ts  | 11 +++
 packages/stl/src/lib/types/index.ts           |  1 +
 packages/ui/src/components/Button/Button.tsx  | 10 +-
 .../ui/src/components/Container/Container.tsx | 18 ++--
 packages/ui/src/components/Link/Link.tsx      | 10 +-
 .../src/components/LogProvider/LogContext.ts  | 30 ++++++
 .../LogProvider/LogProvider.stories.tsx       | 42 ++++++++
 .../LogProvider/LogProvider.test.tsx          | 37 +++++++
 .../components/LogProvider/LogProvider.tsx    | 34 +++++++
 .../ui/src/components/LogProvider/index.ts    |  2 +
 packages/ui/src/components/Stack/Stack.tsx    | 19 ++--
 packages/ui/src/components/Switch/Switch.tsx  |  7 +-
 packages/ui/src/components/index.ts           |  1 +
 services/docs/hugo.yaml                       |  8 ++
 services/static/rsbuild.config.ts             | 12 ++-
 .../layouts/IndexLayout/IndexLayout.tsx       | 45 +++++----
 services/www/rsbuild.config.ts                | 16 ++-
 .../Layout/IndexLayout/IndexLayout.tsx        | 12 ++-
 .../components/LocaleSwitch/LocaleSwitch.tsx  |  2 +
 31 files changed, 622 insertions(+), 60 deletions(-)
 create mode 100644 packages/ssg/src/lib/config/analytics/index.ts
 create mode 100644 packages/ssg/src/lib/config/analytics/types.ts
 create mode 100644 packages/ssg/src/lib/config/analytics/umami.ts
 create mode 100644 packages/ssg/src/lib/core/analytics.ts
 create mode 100644 packages/stl/src/lib/react/filterDataAttributes/filterDataAttributes.test.ts
 create mode 100644 packages/stl/src/lib/react/filterDataAttributes/filterDataAttributes.ts
 create mode 100644 packages/stl/src/lib/types/dataAttributes.ts
 create mode 100644 packages/ui/src/components/LogProvider/LogContext.ts
 create mode 100644 packages/ui/src/components/LogProvider/LogProvider.stories.tsx
 create mode 100644 packages/ui/src/components/LogProvider/LogProvider.test.tsx
 create mode 100644 packages/ui/src/components/LogProvider/LogProvider.tsx
 create mode 100644 packages/ui/src/components/LogProvider/index.ts

diff --git a/packages/kits/src/components/ThemeSwitch/ThemeSwitch.test.tsx b/packages/kits/src/components/ThemeSwitch/ThemeSwitch.test.tsx
index 21522d5..f99bed4 100644
--- a/packages/kits/src/components/ThemeSwitch/ThemeSwitch.test.tsx
+++ b/packages/kits/src/components/ThemeSwitch/ThemeSwitch.test.tsx
@@ -1,7 +1,8 @@
+import { LogProvider } from '@ermnvldmr/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { ThemeSwitch } from './ThemeSwitch';
 
@@ -38,4 +39,24 @@ describe('ThemeSwitch', () => {
 
     expect(systemButton).toBeInTheDocument();
   });
+
+  it('dispatches telemetry events to LogProvider', async () => {
+    const user = userEvent.setup();
+    const loggerMock = vi.fn();
+
+    render(
+      <LogProvider logger={loggerMock}>
+        <ThemeSwitch />
+      </LogProvider>
+    );
+
+    const switchControl = screen.getByRole('switch');
+    const systemButton = screen.getByRole('button');
+
+    await user.click(switchControl);
+    expect(loggerMock).toHaveBeenCalledWith('theme-toggle', { preference: 'dark' });
+
+    await user.click(systemButton);
+    expect(loggerMock).toHaveBeenCalledWith('theme-toggle', { preference: 'system' });
+  });
 });
diff --git a/packages/kits/src/components/ThemeSwitch/ThemeSwitch.tsx b/packages/kits/src/components/ThemeSwitch/ThemeSwitch.tsx
index 6f9b9d2..9246fee 100644
--- a/packages/kits/src/components/ThemeSwitch/ThemeSwitch.tsx
+++ b/packages/kits/src/components/ThemeSwitch/ThemeSwitch.tsx
@@ -1,4 +1,4 @@
-import { Button, HStack, Switch, useTheme } from '@ermnvldmr/ui';
+import { Button, HStack, Switch, useLogger, useTheme } from '@ermnvldmr/ui';
 import React from 'react';
 
 /**
@@ -27,28 +27,42 @@ export function ThemeSwitch({
   systemIcon,
 }: ThemeSwitchProps = {}): React.JSX.Element {
   const { preference, setPreference, resolvedTheme } = useTheme();
+  const log = useLogger();
 
   const isDark = resolvedTheme === 'dark';
 
+  const handleToggle = (isSelected: boolean): void => {
+    const nextTheme = isSelected ? 'dark' : 'light';
+    setPreference(nextTheme);
+    log('theme-toggle', { preference: nextTheme });
+  };
+
+  const handleSystem = (): void => {
+    setPreference('system');
+    log('theme-toggle', { preference: 'system' });
+  };
+
   return (
     <HStack align="center" gap={2}>
       <HStack align="center" gap={1.5}>
         {lightIcon}
         <Switch
           aria-label="Toggle dark mode"
+          data-umami-event="theme-toggle"
           isSelected={isDark}
           variant="outline"
-          onChange={(isSelected) => setPreference(isSelected ? 'dark' : 'light')}
+          onChange={handleToggle}
         />
         {darkIcon}
       </HStack>
       <Button
         aria-label="Follow system theme"
         color={preference === 'system' ? 'primary' : 'neutral'}
+        data-umami-event="theme-system"
         renderStartIcon={systemIcon ? () => systemIcon : undefined}
         size="s"
         variant={preference === 'system' ? 'solid' : 'ghost'}
-        onPress={() => setPreference('system')}
+        onPress={handleSystem}
       />
     </HStack>
   );
diff --git a/packages/ssg/src/lib/config/analytics/index.ts b/packages/ssg/src/lib/config/analytics/index.ts
new file mode 100644
index 0000000..f8ec63d
--- /dev/null
+++ b/packages/ssg/src/lib/config/analytics/index.ts
@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './umami.js';
diff --git a/packages/ssg/src/lib/config/analytics/types.ts b/packages/ssg/src/lib/config/analytics/types.ts
new file mode 100644
index 0000000..b626b02
--- /dev/null
+++ b/packages/ssg/src/lib/config/analytics/types.ts
@@ -0,0 +1,35 @@
+/**
+ * HTML script or link tag descriptor for analytics injection.
+ */
+export interface AnalyticsHtmlTag {
+  /** The HTML tag name. */
+  tag: string;
+  /** Attributes to attach to the tag element. */
+  attrs?: Record<string, string | boolean | undefined>;
+  /** Optional inline text content of the tag. */
+  children?: string;
+  /** Whether the tag should be injected into the document <head>. */
+  head?: boolean;
+  /** Whether the tag should be appended at the end. */
+  append?: boolean;
+}
+
+/**
+ * Interface representing a configurable analytics provider for SSG services.
+ */
+export interface AnalyticsProvider {
+  /** Provider identifier (e.g. 'umami', 'plausible'). */
+  readonly name: string;
+  /**
+   * Generates the HTML tags required for this provider.
+   *
+   * @param isProduction - Whether the current build is in production mode.
+   * @returns Array of HTML tag descriptors.
+   */
+  getHtmlTags: (isProduction: boolean) => AnalyticsHtmlTag[];
+}
+
+/**
+ * Key-value mapping for analytics event metadata.
+ */
+export type AnalyticsEventData = Record<string, string | number | boolean>;
diff --git a/packages/ssg/src/lib/config/analytics/umami.ts b/packages/ssg/src/lib/config/analytics/umami.ts
new file mode 100644
index 0000000..a1e3c91
--- /dev/null
+++ b/packages/ssg/src/lib/config/analytics/umami.ts
@@ -0,0 +1,99 @@
+import type { AnalyticsHtmlTag, AnalyticsProvider } from './types.js';
+
+/**
+ * Configuration options for the Umami Analytics provider.
+ */
+export interface UmamiAnalyticsOptions {
+  /** Base URL of the Umami server (e.g., 'https://umami.ermnvldmr.com'). */
+  serverUrl: string;
+  /** Unique website ID UUID assigned by Umami. */
+  websiteId: string;
+  /** Comma-separated list of allowed domains (e.g., 'ermnvldmr.com,www.ermnvldmr.com'). */
+  domains?: string;
+  /** Custom tracker script name. Defaults to 'script.js'. */
+  scriptName?: string;
+  /** Whether to respect the browser's Do Not Track setting. Defaults to true. */
+  doNotTrack?: boolean;
+  /** Optional data tag for event categorization. */
+  tag?: string;
+  /** Optional custom host URL for event endpoint. */
+  hostUrl?: string;
+  /** Whether to auto-track page views. Defaults to true. */
+  autoTrack?: boolean;
+  /** Whether to force tag injection in non-production builds. Defaults to false. */
+  force?: boolean;
+}
+
+/**
+ * Creates an Umami Analytics provider for SSG service configurations.
+ *
+ * Automatically produces `<script>` tags in production builds and suppresses
+ * injection in development to keep analytics clean.
+ *
+ * @param options - Umami configuration options.
+ * @returns An AnalyticsProvider instance for Umami.
+ *
+ * @example
+ * ```typescript
+ * import { defineSSGServiceConfig, umamiAnalytics } from '@ermnvldmr/ssg/dev';
+ *
+ * export default defineSSGServiceConfig({
+ *   analytics: [
+ *     umamiAnalytics({
+ *       serverUrl: 'https://umami.ermnvldmr.com',
+ *       websiteId: '4fca5ac2-4fe4-4626-b708-933c37bfe918',
+ *       domains: 'ermnvldmr.com,www.ermnvldmr.com',
+ *       doNotTrack: true,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export function umamiAnalytics(options: UmamiAnalyticsOptions): AnalyticsProvider {
+  return {
+    name: 'umami',
+    getHtmlTags: (isProduction: boolean): AnalyticsHtmlTag[] => {
+      if (!isProduction && !options.force) {
+        return [];
+      }
+
+      const serverUrl = options.serverUrl.replace(/\/+$/, '');
+      const scriptName = options.scriptName ?? 'script.js';
+      const scriptSrc = `${serverUrl}/${scriptName}`;
+
+      const attrs: Record<string, string | boolean | undefined> = {
+        defer: true,
+        src: scriptSrc,
+        'data-website-id': options.websiteId,
+      };
+
+      if (options.domains) {
+        attrs['data-domains'] = options.domains;
+      }
+
+      if (options.doNotTrack !== false) {
+        attrs['data-do-not-track'] = 'true';
+      }
+
+      if (options.tag) {
+        attrs['data-tag'] = options.tag;
+      }
+
+      if (options.hostUrl) {
+        attrs['data-host-url'] = options.hostUrl;
+      }
+
+      if (options.autoTrack === false) {
+        attrs['data-auto-track'] = 'false';
+      }
+
+      return [
+        {
+          tag: 'script',
+          attrs,
+          head: true,
+        },
+      ];
+    },
+  };
+}
diff --git a/packages/ssg/src/lib/config/ssgServiceConfig.ts b/packages/ssg/src/lib/config/ssgServiceConfig.ts
index 9fbf3c5..0cd7d24 100644
--- a/packages/ssg/src/lib/config/ssgServiceConfig.ts
+++ b/packages/ssg/src/lib/config/ssgServiceConfig.ts
@@ -1,26 +1,62 @@
 import { defineServiceConfig, mergeConfig } from '@ermnvldmr/rsbuild-config/dev';
-import { type RsbuildConfig } from '@rsbuild/core';
 
 import { ssgPlugin } from './ssg.js';
 
+import type { AnalyticsProvider } from './analytics/types.js';
+import type { RsbuildConfig } from '@rsbuild/core';
+
+/**
+ * Configuration options for SSG services, extending standard Rsbuild config.
+ */
+export interface SSGServiceConfigOptions extends RsbuildConfig {
+  /**
+   * Optional analytics integrations (e.g., Umami, Plausible).
+   * Providers generate HTML script tags that are injected into `html.tags` in production builds.
+   */
+  analytics?: AnalyticsProvider[];
+}
+
 /**
  * Defines a complete Rsbuild configuration for SSG services.
  *
- * Wraps `defineServiceConfig` from `@ermnvldmr/rsbuild-config` and pre-injects
- * `ssgPlugin()` so consumers do not need to wire it manually.
+ * Wraps `defineServiceConfig` from `@ermnvldmr/rsbuild-config`, pre-injects
+ * `ssgPlugin()`, and automatically resolves analytics provider HTML tags for production builds.
  *
- * @param config - Optional Rsbuild configuration overrides.
+ * @param config - Optional Rsbuild configuration overrides with analytics integrations.
  * @returns A complete Rsbuild configuration object.
  *
  * @example
  * ```typescript
- * import { defineSSGServiceConfig, discoverEntries } from '@ermnvldmr/ssg/dev';
+ * import { defineSSGServiceConfig, discoverEntries, umamiAnalytics } from '@ermnvldmr/ssg/dev';
  *
  * export default defineSSGServiceConfig({
  *   source: { entry: discoverEntries(import.meta.dirname, './src/app/**\/*.tsx') },
+ *   analytics: [
+ *     umamiAnalytics({
+ *       serverUrl: 'https://umami.ermnvldmr.com',
+ *       websiteId: '4fca5ac2-4fe4-4626-b708-933c37bfe918',
+ *       domains: 'ermnvldmr.com,www.ermnvldmr.com',
+ *     }),
+ *   ],
  * });
  * ```
  */
-export function defineSSGServiceConfig(config: RsbuildConfig = {}): RsbuildConfig {
-  return defineServiceConfig(mergeConfig(config, { plugins: [ssgPlugin()] }));
+export function defineSSGServiceConfig(config: SSGServiceConfigOptions = {}): RsbuildConfig {
+  const { analytics, ...rsbuildConfig } = config;
+  const isProduction = process.env.NODE_ENV === 'production';
+
+  const analyticsTags = analytics?.flatMap((provider) => provider.getHtmlTags(isProduction)) ?? [];
+
+  const analyticsConfig: RsbuildConfig =
+    analyticsTags.length > 0
+      ? {
+          html: {
+            tags: analyticsTags,
+          },
+        }
+      : {};
+
+  const baseConfigWithPlugins = mergeConfig(rsbuildConfig, { plugins: [ssgPlugin()] });
+
+  return defineServiceConfig(mergeConfig(baseConfigWithPlugins, analyticsConfig));
 }
diff --git a/packages/ssg/src/lib/core/analytics.ts b/packages/ssg/src/lib/core/analytics.ts
new file mode 100644
index 0000000..34a6b6b
--- /dev/null
+++ b/packages/ssg/src/lib/core/analytics.ts
@@ -0,0 +1,68 @@
+import type { AnalyticsEventData } from '../config/analytics/types.js';
+
+declare global {
+  /**
+   * Browser window global augmentation.
+   */
+  interface Window {
+    /**
+     * Umami Analytics tracker instance.
+     */
+    umami?: {
+      /**
+       * Tracks a custom event.
+       *
+       * @param eventName - Name of the custom event.
+       * @param eventData - Optional key-value payload.
+       */
+      track: (eventName: string, eventData?: Record<string, string | number | boolean>) => void;
+      /**
+       * Identifies the current session with custom session properties.
+       *
+       * @param sessionData - Key-value session data.
+       */
+      identify: (sessionData: Record<string, string | number | boolean>) => void;
+    };
+  }
+}
+
+/**
+ * Safely tracks a custom event across active client-side analytics providers (e.g., Umami).
+ *
+ * If no analytics provider is loaded (e.g. during local dev, SSR, or ad-blocked), this is a safe no-op.
+ *
+ * @param eventName - Name of the event to track.
+ * @param eventData - Optional key-value metadata object.
+ *
+ * @example
+ * ```typescript
+ * import { trackEvent } from '@ermnvldmr/ssg';
+ *
+ * trackEvent('switch-locale', { locale: 'ru' });
+ * ```
+ */
+export function trackEvent(eventName: string, eventData?: AnalyticsEventData): void {
+  if (typeof window !== 'undefined' && typeof window.umami?.track === 'function') {
+    window.umami.track(eventName, eventData);
+  }
+}
+
+/**
+ * Safely identifies the session with custom attributes across active analytics providers.
+ *
+ * If no analytics provider is loaded (e.g. during local dev, SSR, or ad-blocked), this is a safe no-op.
+ *
+ * @param sessionData - Key-value session metadata.
+ *
+ * @example
+ * ```typescript
+ * import { identifySession } from '@ermnvldmr/ssg';
+ *
+ * identifySession({ theme: 'dark', locale: 'en' });
+ * ```
+ */
+export function identifySession(sessionData: AnalyticsEventData): void {
+  if (typeof window !== 'undefined' && typeof window.umami?.identify === 'function') {
+    window.umami.identify(sessionData);
+  }
+}
diff --git a/packages/ssg/src/lib/dev.ts b/packages/ssg/src/lib/dev.ts
index 62d3ac9..b7c8ebe 100644
--- a/packages/ssg/src/lib/dev.ts
+++ b/packages/ssg/src/lib/dev.ts
@@ -1,4 +1,5 @@
 export * from './config/ssg.js';
 export * from './config/entries.js';
 export * from './config/ssgServiceConfig.js';
+export * from './config/analytics/index.js';
 export { mergeConfig } from '@ermnvldmr/rsbuild-config/dev';
diff --git a/packages/ssg/src/lib/index.ts b/packages/ssg/src/lib/index.ts
index 0430771..ec05526 100644
--- a/packages/ssg/src/lib/index.ts
+++ b/packages/ssg/src/lib/index.ts
@@ -1 +1,2 @@
 export * from './core/createPage.js';
+export * from './core/analytics.js';
diff --git a/packages/stl/src/lib/react/filterDataAttributes/filterDataAttributes.test.ts b/packages/stl/src/lib/react/filterDataAttributes/filterDataAttributes.test.ts
new file mode 100644
index 0000000..f776d75
--- /dev/null
+++ b/packages/stl/src/lib/react/filterDataAttributes/filterDataAttributes.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+
+import { filterDataAttributes } from './filterDataAttributes';
+
+describe('filterDataAttributes', () => {
+  it('extracts all data-* attributes correctly', () => {
+    const props = {
+      id: 'button-1',
+      className: 'btn',
+      'data-testid': 'my-test-id',
+      'data-umami-event': 'click-me',
+      'data-umami-event-target': 'hero',
+      onClick: () => {},
+    };
+
+    const result = filterDataAttributes(props);
+    expect(result).toEqual({
+      'data-testid': 'my-test-id',
+      'data-umami-event': 'click-me',
+      'data-umami-event-target': 'hero',
+    });
+  });
+
+  it('returns an empty object when no data-* attributes are present', () => {
+    const props = {
+      id: 'header-1',
+      className: 'header',
+    };
+
+    const result = filterDataAttributes(props);
+    expect(result).toEqual({});
+  });
+});
diff --git a/packages/stl/src/lib/react/filterDataAttributes/filterDataAttributes.ts b/packages/stl/src/lib/react/filterDataAttributes/filterDataAttributes.ts
new file mode 100644
index 0000000..6c887bd
--- /dev/null
+++ b/packages/stl/src/lib/react/filterDataAttributes/filterDataAttributes.ts
@@ -0,0 +1,32 @@
+import type { DataAttributes } from '../../types/dataAttributes.js';
+
+/**
+ * Filters and extracts all `data-*` attributes from a props object.
+ *
+ * @param props - Source props object.
+ * @returns An object containing only the `data-*` attributes.
+ *
+ * @example
+ * ```typescript
+ * const dataAttrs = filterDataAttributes(props);
+ * ```
+ */
+export function filterDataAttributes<T extends object>(props: T): DataAttributes {
+  const result: DataAttributes = {};
+  for (const key in props) {
+    if (Object.prototype.hasOwnProperty.call(props, key) && key.startsWith('data-')) {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const value: unknown = (props as Record<string, unknown>)[key];
+      if (
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean' ||
+        value === undefined
+      ) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        result[key as `data-${string}`] = value;
+      }
+    }
+  }
+  return result;
+}
diff --git a/packages/stl/src/lib/react/index.ts b/packages/stl/src/lib/react/index.ts
index 3790197..1d102e5 100644
--- a/packages/stl/src/lib/react/index.ts
+++ b/packages/stl/src/lib/react/index.ts
@@ -1,6 +1,7 @@
 export { castRef } from './castRef/castRef';
 export { castMutableRef } from './castRef/castMutableRef';
 export { genericMemo } from './genericMemo/genericMemo';
+export { filterDataAttributes } from './filterDataAttributes/filterDataAttributes';
 export { useResizeObserver } from './useResizeObserver/useResizeObserver';
 export { useIntersectionObserver } from './useIntersectionObserver/useIntersectionObserver';
 export { useScroll } from './useScroll/useScroll';
diff --git a/packages/stl/src/lib/types/dataAttributes.ts b/packages/stl/src/lib/types/dataAttributes.ts
new file mode 100644
index 0000000..4d90fb2
--- /dev/null
+++ b/packages/stl/src/lib/types/dataAttributes.ts
@@ -0,0 +1,11 @@
+/**
+ * Type allowing arbitrary `data-*` attributes on component props.
+ *
+ * @example
+ * ```typescript
+ * interface ButtonProps extends DataAttributes {
+ *   children: React.ReactNode;
+ * }
+ * ```
+ */
+export type DataAttributes = Record<`data-${string}`, string | number | boolean | undefined>;
diff --git a/packages/stl/src/lib/types/index.ts b/packages/stl/src/lib/types/index.ts
index 1183b4d..4edd5d9 100644
--- a/packages/stl/src/lib/types/index.ts
+++ b/packages/stl/src/lib/types/index.ts
@@ -3,4 +3,5 @@
  */
 
 export type { ClassNameProps } from './classNameProps';
+export type { DataAttributes } from './dataAttributes';
 export type { TestIdProps } from './testIdProps';
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 50a4f2a..6bb741a 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -1,9 +1,9 @@
-import { cn, castRef, genericMemo } from '@ermnvldmr/stl';
+import { cn, castRef, filterDataAttributes, genericMemo } from '@ermnvldmr/stl';
 import { cva } from 'class-variance-authority';
 import React, { forwardRef, useRef } from 'react';
 import { useButton, useLink, useFocusRing, useHover } from 'react-aria';
 
-import type { ClassNameProps, TestIdProps } from '@ermnvldmr/stl';
+import type { ClassNameProps, DataAttributes, TestIdProps } from '@ermnvldmr/stl';
 import type { AriaButtonProps, AriaLinkOptions } from 'react-aria';
 
 /**
@@ -34,7 +34,7 @@ export type ButtonSize = 's' | 'm' | 'l';
 /**
  * Props shared by both action and link button variants.
  */
-interface BaseButtonProps extends ClassNameProps, TestIdProps {
+interface BaseButtonProps extends ClassNameProps, TestIdProps, DataAttributes {
   /** Content to be rendered inside the button */
   children?: React.ReactNode;
   /** Visual style variant */
@@ -260,12 +260,15 @@ const ButtonComponent = forwardRef<HTMLElement, ButtonProps>(function Button(pro
     </>
   );
 
+  const dataAttributes = filterDataAttributes(props);
+
   if (href) {
     return (
       <a
         {...linkProps}
         {...focusProps}
         {...hoverProps}
+        {...dataAttributes}
         ref={castRef<HTMLAnchorElement>(targetRef)}
         className={sharedClasses}
         data-testid={testId}
@@ -280,6 +283,7 @@ const ButtonComponent = forwardRef<HTMLElement, ButtonProps>(function Button(pro
       {...buttonProps}
       {...focusProps}
       {...hoverProps}
+      {...dataAttributes}
       ref={castRef<HTMLButtonElement>(targetRef)}
       className={sharedClasses}
       data-testid={testId}
diff --git a/packages/ui/src/components/Container/Container.tsx b/packages/ui/src/components/Container/Container.tsx
index bef3353..483f5cf 100644
--- a/packages/ui/src/components/Container/Container.tsx
+++ b/packages/ui/src/components/Container/Container.tsx
@@ -1,10 +1,10 @@
-import { castRef, cn, genericMemo } from '@ermnvldmr/stl';
+import { castRef, cn, filterDataAttributes, genericMemo } from '@ermnvldmr/stl';
 import { cva } from 'class-variance-authority';
 import React, { forwardRef } from 'react';
 import { usePress } from 'react-aria';
 
 import type { SpacingScale } from '../../lib/scale';
-import type { ClassNameProps, TestIdProps } from '@ermnvldmr/stl';
+import type { ClassNameProps, DataAttributes, TestIdProps } from '@ermnvldmr/stl';
 import type { PressEvents } from 'react-aria';
 
 /**
@@ -32,7 +32,7 @@ export type ContainerRounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
 /**
  * Props for the Container component.
  */
-export interface ContainerProps extends ClassNameProps, TestIdProps {
+export interface ContainerProps extends ClassNameProps, TestIdProps, DataAttributes {
   /** Content to be rendered inside the container */
   children: React.ReactNode;
   /** Background color variant */
@@ -153,7 +153,10 @@ const containerVariants = cva('overflow-hidden', {
  * borders, and width constraints while maintaining theme consistency.
  */
 const ContainerComponent = forwardRef<HTMLElement, ContainerProps>(function Container(
-  {
+  props,
+  ref
+) {
+  const {
     children,
     bg = 'base',
     padding = 0,
@@ -166,9 +169,8 @@ const ContainerComponent = forwardRef<HTMLElement, ContainerProps>(function Cont
     as: Component = 'div',
     className,
     'data-testid': testId,
-  },
-  ref
-) {
+  } = props;
+
   if (process.env.NODE_ENV !== 'production' && onPress && href) {
     console.warn('[@ermnvldmr/ui] Container cannot have both `onPress` and `href` props.');
   }
@@ -183,10 +185,12 @@ const ContainerComponent = forwardRef<HTMLElement, ContainerProps>(function Cont
 
   const interactionProps = isPressable ? pressProps : {};
   const FinalComponent = isLink ? 'a' : Component;
+  const dataAttributes = filterDataAttributes(props);
 
   return (
     <FinalComponent
       {...interactionProps}
+      {...dataAttributes}
       ref={castRef<HTMLElement>(ref)}
       className={cn(
         containerVariants({
diff --git a/packages/ui/src/components/Link/Link.tsx b/packages/ui/src/components/Link/Link.tsx
index fc1673e..b2ee3ee 100644
--- a/packages/ui/src/components/Link/Link.tsx
+++ b/packages/ui/src/components/Link/Link.tsx
@@ -1,18 +1,18 @@
 import { localePath } from '@ermnvldmr/i18n';
-import { castRef, cn } from '@ermnvldmr/stl';
+import { castRef, cn, filterDataAttributes } from '@ermnvldmr/stl';
 import React, { memo, useRef } from 'react';
 import { useLink } from 'react-aria';
 
 import { Text } from '../Text/Text';
 
 import type { TextColor, TextSize, TextType } from '../Text/Text';
-import type { ClassNameProps } from '@ermnvldmr/stl';
+import type { ClassNameProps, DataAttributes } from '@ermnvldmr/stl';
 import type { AriaLinkOptions } from 'react-aria';
 
 /**
  * Props for the Link component.
  */
-export interface LinkProps extends AriaLinkOptions, ClassNameProps {
+export interface LinkProps extends AriaLinkOptions, ClassNameProps, DataAttributes {
   /** The destination URL. Renders as an <a> tag if provided. */
   href?: string;
   /** Link content */
@@ -50,6 +50,8 @@ export const Link = memo(function Link(props: LinkProps) {
     className
   );
 
+  const dataAttributes = filterDataAttributes(props);
+
   if (href) {
     const resolvedHref = localePath(href);
     const isAutoExternal = isExternal ?? href.startsWith('http');
@@ -59,6 +61,7 @@ export const Link = memo(function Link(props: LinkProps) {
       <Text
         {...linkProps}
         {...externalProps}
+        {...dataAttributes}
         ref={ref}
         as="a"
         className={sharedClasses}
@@ -76,6 +79,7 @@ export const Link = memo(function Link(props: LinkProps) {
   return (
     <Text
       {...linkProps}
+      {...dataAttributes}
       ref={castRef<HTMLSpanElement>(ref)}
       as="span"
       className={sharedClasses}
diff --git a/packages/ui/src/components/LogProvider/LogContext.ts b/packages/ui/src/components/LogProvider/LogContext.ts
new file mode 100644
index 0000000..538bc03
--- /dev/null
+++ b/packages/ui/src/components/LogProvider/LogContext.ts
@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Function signature for telemetry and event logging.
+ */
+export type LogFn = (event: string, data?: Record<string, string | number | boolean>) => void;
+
+const noopLogger: LogFn = () => undefined;
+
+/**
+ * React context holding the active logging function.
+ */
+export const LogContext = createContext<LogFn>(noopLogger);
+
+/**
+ * Hook to access the logging function from the nearest LogProvider.
+ *
+ * Defaults to a safe no-op if rendered outside a LogProvider.
+ *
+ * @returns The active logging function.
+ *
+ * @example
+ * ```tsx
+ * const log = useLogger();
+ * log('button-click', { buttonId: 'submit' });
+ * ```
+ */
+export function useLogger(): LogFn {
+  return useContext(LogContext);
+}
diff --git a/packages/ui/src/components/LogProvider/LogProvider.stories.tsx b/packages/ui/src/components/LogProvider/LogProvider.stories.tsx
new file mode 100644
index 0000000..d79ce24
--- /dev/null
+++ b/packages/ui/src/components/LogProvider/LogProvider.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { useLogger } from './LogContext';
+import { LogProvider } from './LogProvider';
+import { Button } from '../Button/Button';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+function LogDemo(): React.JSX.Element {
+  const log = useLogger();
+  return (
+    <Button
+      variant="solid"
+      onPress={() => {
+        log('story-click', { timestamp: Date.now() });
+      }}
+    >
+      Click to Log Event
+    </Button>
+  );
+}
+
+const meta: Meta<typeof LogProvider> = {
+  title: 'Components/LogProvider',
+  component: LogProvider,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof LogProvider>;
+
+export const Default: Story = {
+  render: () => (
+    <LogProvider
+      logger={(event, data) => {
+        console.log(`[Event: ${event}]`, data);
+      }}
+    >
+      <LogDemo />
+    </LogProvider>
+  ),
+};
diff --git a/packages/ui/src/components/LogProvider/LogProvider.test.tsx b/packages/ui/src/components/LogProvider/LogProvider.test.tsx
new file mode 100644
index 0000000..54e0b39
--- /dev/null
+++ b/packages/ui/src/components/LogProvider/LogProvider.test.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useLogger } from './LogContext';
+import { LogProvider } from './LogProvider';
+
+function ConsumerComponent(): React.JSX.Element {
+  const log = useLogger();
+  return (
+    <button type="button" onClick={() => log('test-event', { key: 'value' })}>
+      Trigger Log
+    </button>
+  );
+}
+
+describe('LogProvider', () => {
+  it('defaults to no-op when outside LogProvider', () => {
+    render(<ConsumerComponent />);
+    const button = screen.getByRole('button', { name: 'Trigger Log' });
+    expect(() => button.click()).not.toThrow();
+  });
+
+  it('calls the provided logger on event dispatch', () => {
+    const loggerMock = vi.fn();
+    render(
+      <LogProvider logger={loggerMock}>
+        <ConsumerComponent />
+      </LogProvider>
+    );
+
+    const button = screen.getByRole('button', { name: 'Trigger Log' });
+    button.click();
+
+    expect(loggerMock).toHaveBeenCalledWith('test-event', { key: 'value' });
+  });
+});
diff --git a/packages/ui/src/components/LogProvider/LogProvider.tsx b/packages/ui/src/components/LogProvider/LogProvider.tsx
new file mode 100644
index 0000000..27babce
--- /dev/null
+++ b/packages/ui/src/components/LogProvider/LogProvider.tsx
@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+
+import { LogContext } from './LogContext';
+
+import type { LogFn } from './LogContext';
+
+/**
+ * Props for the LogProvider component.
+ */
+export interface LogProviderProps {
+  /** The telemetry logging function to inject into the React tree. */
+  logger?: LogFn;
+  /** Children components that will have access to the logger via useLogger. */
+  children: React.ReactNode;
+}
+
+/**
+ * Provider component for injecting analytics and telemetry loggers into the UI component tree.
+ *
+ * @param props - Component props containing optional logger and children.
+ * @returns React context provider element.
+ *
+ * @example
+ * ```tsx
+ * <LogProvider logger={trackEvent}>
+ *   <App />
+ * </LogProvider>
+ * ```
+ */
+export function LogProvider({ logger, children }: LogProviderProps): React.JSX.Element {
+  const value: LogFn = useMemo(() => logger ?? (() => undefined), [logger]);
+
+  return <LogContext.Provider value={value}>{children}</LogContext.Provider>;
+}
diff --git a/packages/ui/src/components/LogProvider/index.ts b/packages/ui/src/components/LogProvider/index.ts
new file mode 100644
index 0000000..6565153
--- /dev/null
+++ b/packages/ui/src/components/LogProvider/index.ts
@@ -0,0 +1,2 @@
+export * from './LogContext';
+export * from './LogProvider';
diff --git a/packages/ui/src/components/Stack/Stack.tsx b/packages/ui/src/components/Stack/Stack.tsx
index 5daa1cf..c36c450 100644
--- a/packages/ui/src/components/Stack/Stack.tsx
+++ b/packages/ui/src/components/Stack/Stack.tsx
@@ -1,9 +1,9 @@
-import { cn, castRef, genericMemo } from '@ermnvldmr/stl';
+import { cn, castRef, filterDataAttributes, genericMemo } from '@ermnvldmr/stl';
 import { cva } from 'class-variance-authority';
 import React, { forwardRef } from 'react';
 
 import type { SpacingScale } from '../../lib/scale';
-import type { ClassNameProps, TestIdProps } from '@ermnvldmr/stl';
+import type { ClassNameProps, DataAttributes, TestIdProps } from '@ermnvldmr/stl';
 
 /**
  * Flexbox direction values.
@@ -28,7 +28,7 @@ type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 /**
  * Props for the flexible Stack layout component.
  */
-export interface StackProps extends ClassNameProps, TestIdProps {
+export interface StackProps extends ClassNameProps, TestIdProps, DataAttributes {
   /** Content to be arranged in the stack */
   children: React.ReactNode;
   /** Flexbox direction (row, column, or their reverse variants) */
@@ -165,7 +165,10 @@ const stackVariants = cva('flex', {
  * ```
  */
 const StackComponent = forwardRef<HTMLElement, StackProps>(function Stack(
-  {
+  props,
+  ref
+) {
+  const {
     children,
     direction = 'row',
     justify = 'start',
@@ -176,11 +179,13 @@ const StackComponent = forwardRef<HTMLElement, StackProps>(function Stack(
     as: Component = 'div',
     className,
     'data-testid': testId,
-  },
-  ref
-) {
+  } = props;
+
+  const dataAttributes = filterDataAttributes(props);
+
   return (
     <Component
+      {...dataAttributes}
       ref={castRef<HTMLElement>(ref)}
       className={cn(
         stackVariants({ direction, justify, align, wrap, gap, scrollable }),
diff --git a/packages/ui/src/components/Switch/Switch.tsx b/packages/ui/src/components/Switch/Switch.tsx
index bb6ab2f..056df29 100644
--- a/packages/ui/src/components/Switch/Switch.tsx
+++ b/packages/ui/src/components/Switch/Switch.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@ermnvldmr/stl';
+import { cn, filterDataAttributes } from '@ermnvldmr/stl';
 import { cva } from 'class-variance-authority';
 import React, { useRef } from 'react';
 import { useSwitch, useFocusRing, VisuallyHidden } from 'react-aria';
@@ -6,6 +6,7 @@ import { useToggleState } from 'react-stately';
 
 import { Text } from '../Text/Text';
 
+import type { ClassNameProps, DataAttributes } from '@ermnvldmr/stl';
 import type { AriaSwitchProps } from 'react-aria';
 
 /**
@@ -31,7 +32,7 @@ export type SwitchColor =
 /**
  * Props for the Switch component.
  */
-export interface SwitchProps extends AriaSwitchProps {
+export interface SwitchProps extends AriaSwitchProps, ClassNameProps, DataAttributes {
   /** Optional class name for the outer container */
   className?: string;
   /** Optional label for the switch */
@@ -220,9 +221,11 @@ export function Switch(props: SwitchProps): React.JSX.Element {
   const ref = useRef<HTMLInputElement>(null);
   const { inputProps } = useSwitch(props, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
+  const dataAttributes = filterDataAttributes(props);
 
   return (
     <label
+      {...dataAttributes}
       className={cn(
         'group inline-flex items-center cursor-pointer select-none gap-3',
         props.isDisabled && 'opacity-50 cursor-not-allowed',
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 2102ab7..a31e3f5 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -10,6 +10,7 @@ export * from './Icon/index';
 export * from './Image/Image';
 export * from './Link/Link';
 export * from './List/List';
+export * from './LogProvider/index';
 export * from './Paragraph/Paragraph';
 export * from './Separator/Separator';
 export * from './Stack/Stack';
diff --git a/services/docs/hugo.yaml b/services/docs/hugo.yaml
index fa2cadd..78edc6e 100644
--- a/services/docs/hugo.yaml
+++ b/services/docs/hugo.yaml
@@ -45,6 +45,14 @@ params:
     email: personal@ermnvldmr.com
   description: 'Documentation for ermnvldmr.com services and infrastructure'
 
+  # Analytics configuration
+  analytics:
+    umami:
+      serverURL: 'https://umami.ermnvldmr.com'
+      websiteID: 'fbdadf3f-3484-4186-a2c2-cedcf76cf44f'
+      domains: 'docs.ermnvldmr.com'
+      doNotTrack: 'true'
+
   # Search configuration
   search:
     enable: true
diff --git a/services/static/rsbuild.config.ts b/services/static/rsbuild.config.ts
index 0d5ccd0..925de1b 100644
--- a/services/static/rsbuild.config.ts
+++ b/services/static/rsbuild.config.ts
@@ -1,7 +1,17 @@
-import { defineSSGServiceConfig, discoverEntries } from '@ermnvldmr/ssg/dev';
+import { defineSSGServiceConfig, discoverEntries, umamiAnalytics } from '@ermnvldmr/ssg/dev';
 import { THEME_INIT_SCRIPT, THEME_INIT_STYLES } from '@ermnvldmr/ui/dev';
 
+const UMAMI_STATIC_WEBSITE_ID = '0831532a-2cec-4955-8f5b-452d8bba96d8';
+
 export default defineSSGServiceConfig({
+  analytics: [
+    umamiAnalytics({
+      serverUrl: 'https://umami.ermnvldmr.com',
+      websiteId: UMAMI_STATIC_WEBSITE_ID,
+      domains: 'static.ermnvldmr.com',
+      doNotTrack: true,
+    }),
+  ],
   source: {
     entry: discoverEntries(import.meta.dirname, './src/app/**/*.tsx'),
     preEntry: ['./src/static/global.css'],
diff --git a/services/static/src/components/layouts/IndexLayout/IndexLayout.tsx b/services/static/src/components/layouts/IndexLayout/IndexLayout.tsx
index 20ab42f..0750b4b 100644
--- a/services/static/src/components/layouts/IndexLayout/IndexLayout.tsx
+++ b/services/static/src/components/layouts/IndexLayout/IndexLayout.tsx
@@ -1,5 +1,6 @@
 import { PageRoot, ThemeSwitch } from '@ermnvldmr/kits';
-import { Container, HStack, Icon, Separator, Text, VStack } from '@ermnvldmr/ui';
+import { trackEvent } from '@ermnvldmr/ssg';
+import { Container, HStack, Icon, LogProvider, Separator, Text, VStack } from '@ermnvldmr/ui';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import React from 'react';
 
@@ -25,25 +26,27 @@ export function IndexLayout({ children }: IndexLayoutProps): React.JSX.Element {
   const currentYear = new Date().getFullYear();
 
   return (
-    <PageRoot className="flex flex-col justify-between">
-      <main className="flex-1 w-full">{children}</main>
-      <VStack as="footer" className="w-full" gap={0}>
-        <Separator thinned="none" />
-        <Container className="w-full" padding={12}>
-          <HStack align="center" className="w-full" justify="between">
-            <VStack align="start" gap={1}>
-              <Text color="muted" size="s">
-                © {currentYear} Vladimir Eremin
-              </Text>
-            </VStack>
-            <ThemeSwitch
-              darkIcon={<Icon icon={Moon} />}
-              lightIcon={<Icon icon={Sun} />}
-              systemIcon={<Icon icon={Monitor} />}
-            />
-          </HStack>
-        </Container>
-      </VStack>
-    </PageRoot>
+    <LogProvider logger={trackEvent}>
+      <PageRoot className="flex flex-col justify-between">
+        <main className="flex-1 w-full">{children}</main>
+        <VStack as="footer" className="w-full" gap={0}>
+          <Separator thinned="none" />
+          <Container className="w-full" padding={12}>
+            <HStack align="center" className="w-full" justify="between">
+              <VStack align="start" gap={1}>
+                <Text color="muted" size="s">
+                  © {currentYear} Vladimir Eremin
+                </Text>
+              </VStack>
+              <ThemeSwitch
+                darkIcon={<Icon icon={Moon} />}
+                lightIcon={<Icon icon={Sun} />}
+                systemIcon={<Icon icon={Monitor} />}
+              />
+            </HStack>
+          </Container>
+        </VStack>
+      </PageRoot>
+    </LogProvider>
   );
 }
diff --git a/services/www/rsbuild.config.ts b/services/www/rsbuild.config.ts
index 85ac80e..6cc1083 100644
--- a/services/www/rsbuild.config.ts
+++ b/services/www/rsbuild.config.ts
@@ -1,6 +1,11 @@
 import { createReadStream, existsSync } from 'node:fs';
 import { extname, join, sep } from 'node:path';
-import { defineSSGServiceConfig, discoverEntries, mergeConfig } from '@ermnvldmr/ssg/dev';
+import {
+  defineSSGServiceConfig,
+  discoverEntries,
+  mergeConfig,
+  umamiAnalytics,
+} from '@ermnvldmr/ssg/dev';
 import { THEME_INIT_SCRIPT, THEME_INIT_STYLES } from '@ermnvldmr/ui/dev';
 import { localeRsbuildConfig } from '@ermnvldmr/i18n/dev';
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
@@ -26,11 +31,20 @@ const MIME: Record<string, string> = {
   '.txt': 'text/plain',
 };
 
+const UMAMI_WWW_WEBSITE_ID = '4fca5ac2-4fe4-4626-b708-933c37bfe918';
 const locale = process.env.LOCALE ?? 'en';
 const fontBase = `/${locale}/static/font`;
 
 export default defineSSGServiceConfig(
   mergeConfig(localeRsbuildConfig(), {
+    analytics: [
+      umamiAnalytics({
+        serverUrl: 'https://umami.ermnvldmr.com',
+        websiteId: UMAMI_WWW_WEBSITE_ID,
+        domains: 'ermnvldmr.com,www.ermnvldmr.com',
+        doNotTrack: true,
+      }),
+    ],
     dev: {
       // Serve public/static/* at /static/* directly, bypassing server.base.
       // Without this, server.base (e.g. /en) would push the public dir to
diff --git a/services/www/src/components/Layout/IndexLayout/IndexLayout.tsx b/services/www/src/components/Layout/IndexLayout/IndexLayout.tsx
index c3ae7eb..0b88bef 100644
--- a/services/www/src/components/Layout/IndexLayout/IndexLayout.tsx
+++ b/services/www/src/components/Layout/IndexLayout/IndexLayout.tsx
@@ -1,4 +1,6 @@
 import { PageRoot } from '@ermnvldmr/kits';
+import { trackEvent } from '@ermnvldmr/ssg';
+import { LogProvider } from '@ermnvldmr/ui';
 import React from 'react';
 
 /**
@@ -27,9 +29,11 @@ export interface IndexLayoutProps {
  */
 export function IndexLayout({ children, footer }: IndexLayoutProps): React.JSX.Element {
   return (
-    <PageRoot>
-      <div className="min-h-[calc(100vh-4px)] flex flex-col pb-24 max-sm:pb-12">{children}</div>
-      {footer}
-    </PageRoot>
+    <LogProvider logger={trackEvent}>
+      <PageRoot>
+        <div className="min-h-[calc(100vh-4px)] flex flex-col pb-24 max-sm:pb-12">{children}</div>
+        {footer}
+      </PageRoot>
+    </LogProvider>
   );
 }
diff --git a/services/www/src/components/LocaleSwitch/LocaleSwitch.tsx b/services/www/src/components/LocaleSwitch/LocaleSwitch.tsx
index 6c0a07e..148d751 100644
--- a/services/www/src/components/LocaleSwitch/LocaleSwitch.tsx
+++ b/services/www/src/components/LocaleSwitch/LocaleSwitch.tsx
@@ -24,6 +24,8 @@ export const LocaleSwitch: React.FC<LocaleSwitchProps> = ({ currentPath }) => {
   return (
     <Link
       className="text-neutral-400 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
+      data-umami-event="locale-switch"
+      data-umami-event-target={OTHER_LOCALE}
       href={href}
       size="s"
     >