diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx index edac39130ece..103ade14481b 100644 --- a/front/components/sparkle/AppLayout.tsx +++ b/front/components/sparkle/AppLayout.tsx @@ -24,6 +24,7 @@ import type { } from "@app/components/sparkle/navigation"; import { topNavigation } from "@app/components/sparkle/navigation"; import WorkspacePicker from "@app/components/WorkspacePicker"; +import { getBrowserClient } from "@app/lib/amplitude/browser"; import { useUser } from "@app/lib/swr"; import { classNames } from "@app/lib/utils"; @@ -243,11 +244,24 @@ export default function AppLayout({ }) { const { sidebarOpen, setSidebarOpen } = useContext(SidebarContext); const [loaded, setLoaded] = useState(false); + const router = useRouter(); + const user = useUser(); useEffect(() => { setLoaded(true); }, []); + useEffect(() => { + const amplitude = getBrowserClient(); + if (user?.user?.id) { + const userId = `user-${user?.user?.id}`; + amplitude.identify(userId); + amplitude.pageViewed({ + pathname: router.pathname, + }); + } + }, [router.pathname, user?.user?.id]); + return ( <> diff --git a/front/lib/amplitude/browser/ampli.json b/front/lib/amplitude/browser/ampli.json index 0ba9a64fca88..37ea8e8b0a1e 100644 --- a/front/lib/amplitude/browser/ampli.json +++ b/front/lib/amplitude/browser/ampli.json @@ -11,4 +11,4 @@ "Language": "TypeScript", "SDK": "@amplitude/analytics-browser@^1.0", "Path": "./generated" -} +} \ No newline at end of file diff --git a/front/lib/amplitude/browser/generated/index.ts b/front/lib/amplitude/browser/generated/index.ts index fdc90fb9f742..dca93a2245ab 100644 --- a/front/lib/amplitude/browser/generated/index.ts +++ b/front/lib/amplitude/browser/generated/index.ts @@ -17,12 +17,12 @@ * [Full Setup Instructions](https://data.amplitude.com/dust-tt/dust-prod/implementation/dust-browser-prod) */ -import * as amplitude from "@amplitude/analytics-browser"; +import * as amplitude from '@amplitude/analytics-browser'; -export type Environment = "dustprod"; +export type Environment = 'dustprod'; export const ApiKey: Record = { - dustprod: "940c526d7c7c91a38c267be75c958890", + dustprod: '940c526d7c7c91a38c267be75c958890' }; /** @@ -30,44 +30,36 @@ export const ApiKey: Record = { */ export const DefaultConfiguration: BrowserOptions = { plan: { - version: "2", - branch: "main", - source: "dust-browser-prod", - versionId: "4e855190-0d49-4fdc-a164-e1e974880832", + version: '2', + branch: 'main', + source: 'dust-browser-prod', + versionId: '4e855190-0d49-4fdc-a164-e1e974880832' }, ...{ ingestionMetadata: { - sourceName: "browser-typescript-ampli", - sourceVersion: "2.0.0", - }, - }, + sourceName: 'browser-typescript-ampli', + sourceVersion: '2.0.0' + } + } }; -export interface LoadOptionsBase { - disabled?: boolean; -} +export interface LoadOptionsBase { disabled?: boolean } -export type LoadOptionsWithEnvironment = LoadOptionsBase & { - environment: Environment; - client?: { configuration?: BrowserOptions }; -}; -export type LoadOptionsWithApiKey = LoadOptionsBase & { - client: { apiKey: string; configuration?: BrowserOptions }; -}; -export type LoadOptionsWithClientInstance = LoadOptionsBase & { - client: { instance: BrowserClient }; -}; +export type LoadOptionsWithEnvironment = LoadOptionsBase & { environment: Environment; client?: { configuration?: BrowserOptions; }; }; +export type LoadOptionsWithApiKey = LoadOptionsBase & { client: { apiKey: string; configuration?: BrowserOptions; } }; +export type LoadOptionsWithClientInstance = LoadOptionsBase & { client: { instance: BrowserClient; } }; -export type LoadOptions = - | LoadOptionsWithEnvironment - | LoadOptionsWithApiKey - | LoadOptionsWithClientInstance; +export type LoadOptions = LoadOptionsWithEnvironment | LoadOptionsWithApiKey | LoadOptionsWithClientInstance; export interface IdentifyProperties { email?: string; SignupDate?: string; } +export interface PageViewedProperties { + pathname: string; +} + export interface QuickGuideViewedProperties { /** * | Rule | Value | @@ -82,15 +74,29 @@ export interface QuickGuideViewedProperties { export class Identify implements BaseEvent { event_type = amplitude.Types.SpecialEventType.IDENTIFY; - constructor(public event_properties?: IdentifyProperties) { + constructor( + public event_properties?: IdentifyProperties, + ) { + this.event_properties = event_properties; + } +} + +export class PageViewed implements BaseEvent { + event_type = 'PageViewed'; + + constructor( + public event_properties: PageViewedProperties, + ) { this.event_properties = event_properties; } } export class QuickGuideViewed implements BaseEvent { - event_type = "QuickGuideViewed"; + event_type = 'QuickGuideViewed'; - constructor(public event_properties: QuickGuideViewedProperties) { + constructor( + public event_properties: QuickGuideViewedProperties, + ) { this.event_properties = event_properties; } } @@ -212,6 +218,23 @@ export class Ampli { return this.amplitude!.track(event, undefined, options); } + /** + * PageViewed + * + * [View in Tracking Plan](https://data.amplitude.com/dust-tt/dust-prod/events/main/latest/PageViewed) + * + * Event has no description in tracking plan. + * + * @param properties The event's properties (e.g. pathname) + * @param options Amplitude event options. + */ + pageViewed( + properties: PageViewedProperties, + options?: EventOptions, + ) { + return this.track(new PageViewed(properties), options); + } + /** * QuickGuideViewed * diff --git a/front/lib/amplitude/browser/index.ts b/front/lib/amplitude/browser/index.ts index 6baa821cda10..83140e85f3fe 100644 --- a/front/lib/amplitude/browser/index.ts +++ b/front/lib/amplitude/browser/index.ts @@ -18,7 +18,13 @@ export function getBrowserClient() { client: { apiKey: AMPLITUDE_PUBLIC_API_KEY, configuration: { - defaultTracking: false, + defaultTracking: { + attribution: true, + fileDownloads: false, + formInteractions: true, + pageViews: false, + sessions: true, + }, }, }, });