Add PostHog analytics event for new UI access (Vibe Kanban) (#1895)

* Done. I've added PostHog analytics tracking to `NewDesignScope.tsx` that fires a `ui_new_accessed` event once per session when users visit any `/workspaces` route.

The implementation:
- Fires the event only once per session (using a `useRef` that resets on page refresh)
- Respects the user's analytics opt-in/opt-out preferences (handled by PostHog SDK)
- Located in `NewDesignScope` which wraps all new UI routes

* Use sessionStorage for true once-per-session tracking

The useRef approach only prevented duplicates within a single mount
lifecycle. If the user navigated away from /workspaces and back, the
component would remount and the ref would reset, firing the event again.

sessionStorage persists for the entire browser tab lifetime, ensuring
the event fires exactly once per session.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Revert to useRef for tracking

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Louis Knight-Webb
2026-01-10 12:02:09 +00:00
committed by GitHub
parent 4120678cf7
commit d3dc1439cc

View File

@@ -1,4 +1,5 @@
import { ReactNode, useRef } from 'react'; import { ReactNode, useRef, useEffect } from 'react';
import { usePostHog } from 'posthog-js/react';
import { PortalContainerContext } from '@/contexts/PortalContainerContext'; import { PortalContainerContext } from '@/contexts/PortalContainerContext';
import { import {
WorkspaceProvider, WorkspaceProvider,
@@ -29,6 +30,16 @@ function ExecutionProcessesProviderWrapper({
export function NewDesignScope({ children }: NewDesignScopeProps) { export function NewDesignScope({ children }: NewDesignScopeProps) {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const posthog = usePostHog();
const hasTracked = useRef(false);
useEffect(() => {
if (!hasTracked.current) {
posthog?.capture('ui_new_accessed');
hasTracked.current = true;
}
}, [posthog]);
return ( return (
<div ref={ref} className="new-design h-full"> <div ref={ref} className="new-design h-full">
<PortalContainerContext.Provider value={ref}> <PortalContainerContext.Provider value={ref}>