diff --git a/components/lib/display-platform-specific-content.ts b/components/lib/display-platform-specific-content.ts index c59affdc73..18918e5eff 100644 --- a/components/lib/display-platform-specific-content.ts +++ b/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 } diff --git a/components/lib/events.ts b/components/lib/events.ts index 620e6125bb..ccdc0045c4 100644 --- a/components/lib/events.ts +++ b/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, diff --git a/lib/schema-event.js b/lib/schema-event.js index 8abd02bd09..498b1c8c71 100644 --- a/lib/schema-event.js +++ b/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.', }, }, }