Add event tracking to code annotations (github#41204)

heiskr · web-flow · commit c007698fdab2 · 2023-08-22T16:31:22.000Z
diff --git a/components/lib/toggle-annotations.ts b/components/lib/toggle-annotations.ts
@@ -1,4 +1,5 @@
 import Cookies from 'components/lib/cookies'
+import { sendEvent, EventType } from 'src/events/components/events'
 
 enum annotationMode {
   Beside = 'beside',
@@ -48,6 +49,11 @@ export default function toggleAnnotation() {
       // validate the annotation mode and set the cookie with the valid mode
       const validMode = validateMode(annotationBtn.getAttribute('value')!)
       Cookies.set('annotate-mode', validMode!)
+      sendEvent({
+        type: EventType.preference,
+        preference_name: 'code_display',
+        preference_value: validMode,
+      })
 
       // set and display the annotation mode
       setActive(annotationButtons, validMode)
diff --git a/src/events/components/events.ts b/src/events/components/events.ts
@@ -169,6 +169,7 @@ export function sendEvent<T extends EventType>({
       application_preference: Cookies.get('toolPreferred'),
       color_mode_preference: getColorModePreference(),
       os_preference: Cookies.get('osPreferred'),
+      code_display_preference: Cookies.get('annotate-mode'),
     },
 
     ...props,
diff --git a/src/events/lib/schema.js b/src/events/lib/schema.js
@@ -156,6 +156,10 @@ const context = {
       enum: ['dark', 'light', 'auto', 'auto:dark', 'auto:light'],
       description: 'The color mode selected by the user.',
     },
+    code_display_preference: {
+      enum: ['beside', 'inline'],
+      description: 'How the user prefers to view code examples.',
+    },
   },
 }
 
@@ -439,22 +443,29 @@ const preference = {
     },
     preference_name: {
       type: 'string',
-      enum: ['application', 'color_mode', 'os'],
+      enum: ['application', 'color_mode', 'os', 'code_display'],
       description: 'The preference name, such as os, application, or color_mode',
     },
     preference_value: {
       type: 'string',
-      enum: Object.keys(allTools).concat(
+      enum: [
+        // application
+        ...Object.keys(allTools),
+        // color_mode
         'dark',
         'light',
         'auto',
         'auto:dark',
         'auto:light',
+        // os
         'linux',
         'mac',
         'windows',
-      ),
-      description: 'The application, color_mode, or os selected by the user.',
+        // code_display
+        'beside',
+        'inline',
+      ],
+      description: 'The application, color_mode, os, or code_display selected by the user.',
     },
   },
 }
