diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx index 2a763bc361..b75b04829c 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx @@ -8,6 +8,7 @@ import { Popover, styled } from '@mui/material'; import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards'; import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrategyCreate'; import { MoreVert } from '@mui/icons-material'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; interface IFeatureStrategyMenuProps { label: string; @@ -40,6 +41,7 @@ export const FeatureStrategyMenu = ({ }: IFeatureStrategyMenuProps) => { const [anchor, setAnchor] = useState(); const navigate = useNavigate(); + const { trackEvent } = usePlausibleTracker(); const isPopoverOpen = Boolean(anchor); const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined; @@ -47,7 +49,16 @@ export const FeatureStrategyMenu = ({ setAnchor(undefined); }; - const onClick = (event: React.SyntheticEvent) => { + const openDefaultStrategyCreationModal = (event: React.SyntheticEvent) => { + trackEvent('strategy-add', { + props: { + buttonTitle: label, + }, + }); + navigate(createStrategyPath); + }; + + const openMoreStrategies = (event: React.SyntheticEvent) => { setAnchor(event.currentTarget); }; @@ -65,7 +76,7 @@ export const FeatureStrategyMenu = ({ permission={CREATE_FEATURE_STRATEGY} projectId={projectId} environmentId={environmentId} - onClick={() => navigate(createStrategyPath)} + onClick={openDefaultStrategyCreationModal} aria-labelledby={popoverId} variant={variant} size={size} @@ -78,7 +89,7 @@ export const FeatureStrategyMenu = ({ permission={CREATE_FEATURE_STRATEGY} projectId={projectId} environmentId={environmentId} - onClick={onClick} + onClick={openMoreStrategies} aria-labelledby={popoverId} variant="outlined" size={size} diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx index f3f900ac72..ddcf72bfb0 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx @@ -7,6 +7,7 @@ import { import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { styled } from '@mui/material'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; interface IFeatureStrategyMenuCardProps { projectId: string; @@ -66,6 +67,7 @@ export const FeatureStrategyMenuCard = ({ }: IFeatureStrategyMenuCardProps) => { const StrategyIcon = getFeatureStrategyIcon(strategy.name); const strategyName = formatStrategyName(strategy.name); + const { trackEvent } = usePlausibleTracker(); const createStrategyPath = formatCreateStrategyPath( projectId, @@ -75,8 +77,16 @@ export const FeatureStrategyMenuCard = ({ defaultStrategy ); + const openStrategyCreationModal = () => { + trackEvent('strategy-add', { + props: { + buttonTitle: strategy.displayName || strategyName, + }, + }); + }; + return ( - + diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index 2460a42bf1..8c4b9eff42 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -39,7 +39,8 @@ export type CustomEvents = | 'demo-ask-questions' | 'demo-open-demo-web' | 'context-usage' - | 'segment-usage'; + | 'segment-usage' + | 'strategy-add'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext); diff --git a/src/server-dev.ts b/src/server-dev.ts index 7ffd45e4cf..77643d229a 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -40,6 +40,7 @@ process.nextTick(async () => { strategyImprovements: true, segmentContextFieldUsage: true, advancedPlayground: true, + strategySplittedButton: true, }, }, authentication: {