feat: context/segment usage plausible (#3956)

frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { formatStrategyName } from 'utils/strategyNames';
 import { useStrategiesByContext } from 'hooks/api/getters/useStrategiesByContext/useStrategiesByContext';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledUl = styled('ul')(({ theme }) => ({
     listStyle: 'none',
@@ -22,6 +23,15 @@ interface IContextFieldUsageProps {
 export const ContextFieldUsage = ({ contextName }: IContextFieldUsageProps) => {
     const { strategies } = useStrategiesByContext(contextName);
     const { projects } = useProjects();
+    const { trackEvent } = usePlausibleTracker();
+
+    const trackClick = () => {
+        trackEvent('context-usage', {
+            props: {
+                eventType: 'context usage viewed',
+            },
+        });
+    };
 
     const projectsUsed = Array.from(
         new Set<string>(
@@ -32,7 +42,7 @@ export const ContextFieldUsage = ({ contextName }: IContextFieldUsageProps) => {
     const projectList = (
         <StyledUl>
             {projectsUsed.map(projectId => (
-                <li key={projectId}>
+                <li key={projectId} onClick={trackClick}>
                     <Link
                         to={`/projects/${projectId}`}
                         target="_blank"

frontend/src/component/segments/SegmentProjectAlert.tsx

@@ -4,6 +4,7 @@ import { IProjectCard } from 'interfaces/project';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import { Link } from 'react-router-dom';
 import { formatStrategyName } from 'utils/strategyNames';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledUl = styled('ul')(({ theme }) => ({
     listStyle: 'none',
@@ -27,10 +28,19 @@ export const SegmentProjectAlert = ({
     projectsUsed,
     availableProjects,
 }: ISegmentProjectAlertProps) => {
+    const { trackEvent } = usePlausibleTracker();
+
+    const trackClick = () => {
+        trackEvent('segment-usage', {
+            props: {
+                eventType: 'segment usage viewed',
+            },
+        });
+    };
     const projectList = (
         <StyledUl>
             {Array.from(projectsUsed).map(projectId => (
-                <li key={projectId}>
+                <li key={projectId} onClick={trackClick}>
                     <Link
                         to={`/projects/${projectId}`}
                         target="_blank"

frontend/src/hooks/usePlausibleTracker.ts

@@ -37,7 +37,9 @@ export type CustomEvents =
     | 'demo-view-demo-link'
     | 'demo-start-topic'
     | 'demo-ask-questions'
-    | 'demo-open-demo-web';
+    | 'demo-open-demo-web'
+    | 'context-usage'
+    | 'segment-usage';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);