feat: plausible for new strategy flow (#4057)

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<Element>();
     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}

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 (
-        <StyledCard to={createStrategyPath}>
+        <StyledCard to={createStrategyPath} onClick={openStrategyCreationModal}>
             <StyledIcon>
                 <StrategyIcon />
             </StyledIcon>

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);

src/server-dev.ts

@@ -40,6 +40,7 @@ process.nextTick(async () => {
                         strategyImprovements: true,
                         segmentContextFieldUsage: true,
                         advancedPlayground: true,
+                        strategySplittedButton: true,
                     },
                 },
                 authentication: {