diff --git a/packages/docs/src/components/layout/SideNav/ThemeDialog.tsx b/packages/docs/src/components/layout/SideNav/ThemeDialog.tsx index 7a6955361f..59c60eda35 100644 --- a/packages/docs/src/components/layout/SideNav/ThemeDialog.tsx +++ b/packages/docs/src/components/layout/SideNav/ThemeDialog.tsx @@ -3,10 +3,13 @@ import { Button, Dropdown } from '@cmsgov/design-system'; import { FilterDialog } from '../FilterDialog/index'; import { getThemeOptions } from './themeVersionData'; import { setQueryParam } from '../../../helpers/urlUtils'; +import { sendFilterAppliedEvent } from '../../../helpers/analytics'; +import { getVersionEquivalent } from './themeVersionData'; export interface ThemeVersionDialogProps { theme: string; isOpen?: boolean; + version: string; onExit(...args: any[]): void; } @@ -14,6 +17,12 @@ export const ThemeVersionDialog = (props: ThemeVersionDialogProps) => { const [theme, setTheme] = useState(props.theme); function handleUpdate() { + const currentVersion = getVersionEquivalent(theme, props.theme, props.version); + const filterCategoriesUsed = { theme: theme, version: currentVersion }; + const filterCategoriesUsedString = JSON.stringify(filterCategoriesUsed); + + sendFilterAppliedEvent({ filterCategoriesUsedString }); + if (theme !== props.theme) { setQueryParam('theme', theme, true); } diff --git a/packages/docs/src/components/layout/SideNav/ThemeVersionSection.tsx b/packages/docs/src/components/layout/SideNav/ThemeVersionSection.tsx index 9fc7fbc577..66a1359e97 100644 --- a/packages/docs/src/components/layout/SideNav/ThemeVersionSection.tsx +++ b/packages/docs/src/components/layout/SideNav/ThemeVersionSection.tsx @@ -30,6 +30,7 @@ export const ThemeVersionSection = () => { { themeDialogProps.closeClick(); diff --git a/packages/docs/src/components/layout/SideNav/VersionDialog.tsx b/packages/docs/src/components/layout/SideNav/VersionDialog.tsx index 044e731d96..7fad6c98d1 100644 --- a/packages/docs/src/components/layout/SideNav/VersionDialog.tsx +++ b/packages/docs/src/components/layout/SideNav/VersionDialog.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { Button, Dropdown } from '@cmsgov/design-system'; import { FilterDialog } from '../FilterDialog'; import { getVersionOptions, getVersionEquivalent } from './themeVersionData'; +import { sendFilterAppliedEvent } from '../../../helpers/analytics'; export interface ThemeVersionDialogProps { theme: string; @@ -14,6 +15,11 @@ export const ThemeVersionDialog = (props: ThemeVersionDialogProps) => { const [version, setVersion] = useState(props.version); function handleUpdate() { + const filterCategoriesUsed = { theme: props.theme, version: version }; + const filterCategoriesUsedString = JSON.stringify(filterCategoriesUsed); + + sendFilterAppliedEvent({ filterCategoriesUsedString }); + if (version !== props.version) { // Since the version changed, we need to navigate to that version of the // doc site, which is archived under design.cms.gov/v/ diff --git a/packages/docs/src/helpers/analytics.ts b/packages/docs/src/helpers/analytics.ts index afb71deff7..c96500e870 100644 --- a/packages/docs/src/helpers/analytics.ts +++ b/packages/docs/src/helpers/analytics.ts @@ -7,3 +7,14 @@ export function sendSearchInitiatedEvent(searchTerm: string) { search_term_type: 'user_initiated', } as any); } + +export function sendFilterAppliedEvent({ + filterCategoriesUsedString, +}: { + filterCategoriesUsedString: string; +}) { + sendLinkEvent({ + event_name: 'filters_applied', + filter_categories_used: filterCategoriesUsedString, + } as any); +}