Add tracking to recategorisation preview (l2beat#6481)

morph-l2 · Jan 23, 2025 · f678528 · f678528
1 parent 0d8a229
commit f678528
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 17 deletions.
diff --git a/packages/frontend/src/app/layout.tsx b/packages/frontend/src/app/layout.tsx
@@ -46,23 +46,23 @@ export default async function RootLayout({
             storageKey="l2beat-theme"
             disableTransitionOnChange
           >
-            <PlausibleProvider>
-              <TooltipProvider delayDuration={300} disableHoverableContent>
-                <GlossaryContextProvider
-                  terms={terms.map((term) => ({
-                    id: term.id,
-                    matches: [term.data.term, ...(term.data.match ?? [])],
-                  }))}
-                >
-                  <SearchBarContextProvider projects={searchBarProjects}>
-                    <RecategorisationPreviewContextProvider>
+            <RecategorisationPreviewContextProvider>
+              <PlausibleProvider>
+                <TooltipProvider delayDuration={300} disableHoverableContent>
+                  <GlossaryContextProvider
+                    terms={terms.map((term) => ({
+                      id: term.id,
+                      matches: [term.data.term, ...(term.data.match ?? [])],
+                    }))}
+                  >
+                    <SearchBarContextProvider projects={searchBarProjects}>
                       {children}
-                    </RecategorisationPreviewContextProvider>
-                  </SearchBarContextProvider>
-                  <ProgressBar />
-                </GlossaryContextProvider>
-              </TooltipProvider>
-            </PlausibleProvider>
+                    </SearchBarContextProvider>
+                    <ProgressBar />
+                  </GlossaryContextProvider>
+                </TooltipProvider>
+              </PlausibleProvider>
+            </RecategorisationPreviewContextProvider>
           </ThemeProvider>
         </TRPCReactProvider>
       </body>

diff --git a/packages/frontend/src/components/core/switch.tsx b/packages/frontend/src/components/core/switch.tsx
@@ -2,19 +2,30 @@
 
 import * as SwitchPrimitives from '@radix-ui/react-switch'
 import * as React from 'react'
+import { useTracking } from '~/hooks/use-custom-event'
 import { cn } from '~/utils/cn'
 
 function Switch({
   className,
   ...props
-}: React.ComponentProps<typeof SwitchPrimitives.Root>) {
+}: React.ComponentProps<typeof SwitchPrimitives.Root> & { name: string }) {
+  const { track } = useTracking()
   return (
     <SwitchPrimitives.Root
       className={cn(
         'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=unchecked]:bg-surface-tertiary',
         className,
       )}
       {...props}
+      onCheckedChange={(checked) => {
+        props.onCheckedChange?.(checked)
+        track('switchChanged', {
+          props: {
+            name: props.name,
+            value: checked.toString(),
+          },
+        })
+      }}
     >
       <SwitchPrimitives.Thumb
         className={cn(

diff --git a/...ages/frontend/src/components/recategorisation-preview/recategorisation-preview-switch.tsx b/...ages/frontend/src/components/recategorisation-preview/recategorisation-preview-switch.tsx
@@ -14,6 +14,7 @@ export function RecategorisationPreviewSwitch({
     <div className={cn('flex items-center gap-3 font-semibold', className)}>
       <span className="text-sm">Preview Recategorisation</span>
       <Switch
+        name="recategorisationPreview"
         checked={checked}
         onCheckedChange={(checked) => setChecked(!!checked)}
       />

diff --git a/packages/frontend/src/hooks/use-custom-event.tsx b/packages/frontend/src/hooks/use-custom-event.tsx
@@ -1,6 +1,7 @@
 import { usePlausible } from 'next-plausible'
 
 type MyEvents = {
+  switchChanged: { name: string; value: string }
   filterChanged: { name: string; value: string }
   checkboxChanged: { name: string; value: string }
   radioGroupChanged: { name: string; value: string }

diff --git a/packages/frontend/src/providers/plausible-provider.tsx b/packages/frontend/src/providers/plausible-provider.tsx
@@ -2,17 +2,20 @@
 
 import NextPlausibleProvider from 'next-plausible'
 import { useTheme } from 'next-themes'
+import { useRecategorisationPreviewContext } from '~/components/recategorisation-preview/recategorisation-preview-provider'
 import { env } from '~/env'
 
 export function PlausibleProvider({ children }: { children: React.ReactNode }) {
   const { resolvedTheme } = useTheme()
+  const { checked } = useRecategorisationPreviewContext()
 
   return (
     <NextPlausibleProvider
       domain={env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
       enabled={env.NEXT_PUBLIC_PLAUSIBLE_ENABLED}
       pageviewProps={{
         theme: resolvedTheme ?? 'light',
+        recategorisationPreview: checked.toString(),
       }}
       hash
       taggedEvents