Add os preference tracking (#20740)

* Set cookie on os switch

* Set os based on cookie value

* Add os preference schema details

* Send os preference on page request

* Send os preference on os switch

components/lib/display-platform-specific-content.ts

@@ -1,4 +1,7 @@
+import Cookies from 'js-cookie'
 import parseUserAgent from './user-agent'
+import { sendEvent, EventType } from './events'
+
 const supportedPlatforms = ['mac', 'windows', 'linux']
 const detectedPlatforms = new Set()
 
@@ -35,6 +38,18 @@ export default function displayPlatformSpecificContent() {
       const target = event.target as HTMLElement
       setActiveSwitcherLinks(target.dataset.platform || '')
       showPlatformSpecificContent(target.dataset.platform || '')
+
+      Cookies.set('osPreferred', target.dataset.platform || '', {
+        sameSite: 'strict',
+        secure: true,
+      })
+
+      // Send event data
+      sendEvent({
+        type: EventType.preference,
+        preference_name: 'os',
+        preference_value: target.dataset.platform,
+      })
     })
   })
 }
@@ -108,6 +123,8 @@ function detectPlatforms(el: HTMLElement) {
 }
 
 function getDefaultPlatform() {
+  if (Cookies.get('osPreferred')) return Cookies.get('osPreferred')
+
   const el = document.querySelector('[data-default-platform]') as HTMLElement
   if (el) return el.dataset.defaultPlatform
 }

components/lib/events.ts

@@ -100,6 +100,7 @@ export function sendEvent({ type, version = '1.0.0', ...props }: SendEventProps)
       // Preference information
       application_preference: Cookies.get('toolPreferred'),
       color_mode_preference: getColorModePreference(),
+      os_preference: Cookies.get('osPreferred'),
     },
 
     ...props,

lib/schema-event.js

@@ -107,10 +107,11 @@ const context = {
     },
 
     // Preference information
-    /* os_preference: {
+    os_preference: {
       type: 'string',
-      description: 'The os for examples selected by the user.'
-    }, */
+      enum: ['linux', 'mac', 'windows'],
+      description: 'The os for examples selected by the user.',
+    },
     application_preference: {
       type: 'string',
       enum: ['webui', 'cli', 'desktop', 'curl'],
@@ -360,13 +361,26 @@ const preferenceSchema = {
     },
     preference_name: {
       type: 'string',
-      enum: ['application', 'color_mode'], // os
+      enum: ['application', 'color_mode', 'os'],
       description: 'The preference name, such as os, application, or color_mode',
     },
     preference_value: {
       type: 'string',
-      enum: ['webui', 'cli', 'desktop', 'curl', 'dark', 'light', 'auto', 'auto:dark', 'auto:light'],
-      description: 'The application or color_mode selected by the user.',
+      enum: [
+        'webui',
+        'cli',
+        'desktop',
+        'curl',
+        'dark',
+        'light',
+        'auto',
+        'auto:dark',
+        'auto:light',
+        'linux',
+        'mac',
+        'windows',
+      ],
+      description: 'The application, color_mode, or os selected by the user.',
     },
   },
 }