Track answers in matomo (#613)

src/components/AnnotateLogoModal.tsx

@@ -8,6 +8,7 @@ import LogoForm from "./LogoForm";
 import LogoGrid from "./LogoGrid";
 import robotoff from "../robotoff";
 import { IS_DEVELOPMENT_MODE } from "../const";
+import { useMatomoTrackAnswerQuestion } from "../hooks/matomoEvents";
 
 const AnnotateLogoModal = (props) => {
   const {
@@ -18,8 +19,12 @@ const AnnotateLogoModal = (props) => {
     afterAnnotation,
     value = "",
     type = "",
+    game = "unknown",
   } = props;
 
+  const { annotateLogo: matomoTrackLogoAnnotation } =
+    useMatomoTrackAnswerQuestion();
+
   const sendAnnotation = async ({ type, value }) => {
     try {
       if (!IS_DEVELOPMENT_MODE) {
@@ -32,6 +37,12 @@ const AnnotateLogoModal = (props) => {
               type,
             }))
         );
+        matomoTrackLogoAnnotation({
+          game,
+          type,
+          value,
+          number: logos.filter((logo) => logo.selected).length,
+        });
       }
       logos
         .filter((logo) => logo.selected)

src/hooks/matomoEvents.ts

@@ -10,7 +10,20 @@ const mapValueToAction = {
 export const useMatomoTrackAnswerQuestion = () => {
   const { trackEvent } = useMatomo();
 
-  return (answer: -1 | 0 | 1) => {
-    trackEvent({ category: "question-page", action: mapValueToAction[answer] });
+  return {
+    answerQuestions: (answer: -1 | 0 | 1) => {
+      trackEvent({
+        category: "question-page",
+        action: mapValueToAction[answer],
+      });
+    },
+    annotateLogo: ({ game, type, value, number }) => {
+      trackEvent({
+        category: "logo",
+        action: "annotation",
+        name: `${game} - ${type} - ${value}`,
+        value: number,
+      });
+    },
   };
 };

src/pages/logos/LogoAnnotation.jsx

@@ -364,6 +364,7 @@ export default function LogoAnnotation() {
       </Box>
 
       <AnnotateLogoModal
+        game="logoAnnotation"
         value={logoState.referenceLogo.annotation_value ?? ""}
         type={logoState.referenceLogo.annotation_type ?? ""}
         isOpen={isAnnotationOpen}

src/pages/logos/LogoDeepSearch.jsx

@@ -397,6 +397,7 @@ export default function LogoSearch() {
       </Paper>
 
       <AnnotateLogoModal
+        game="logoDeepSearch"
         isOpen={isAnnotationOpen}
         logos={logosToAnnotate}
         closeAnnotation={closeAnnotation}

src/pages/logos/ProductLogoAnnotations.jsx

@@ -295,6 +295,7 @@ export default function AnnotateLogosFromProducts() {
             </Stack>
           </Paper>
           <AnnotateLogoModal
+            game="logoProductAnnotation"
             isOpen={isAnnotationOpen}
             logos={logos}
             closeAnnotation={closeAnnotation}

src/pages/questions/QuestionDisplay.jsx

@@ -25,6 +25,7 @@ import {
   updateFilter,
   answerQuestion as answerQuestionAction,
 } from "./store";
+import { useMatomoTrackAnswerQuestion } from "../../hooks/matomoEvents";
 import {
   getFullSizeImage,
   getValueTagExamplesURL,
@@ -119,15 +120,20 @@ const useKeyboardShortcuts = (question, answerQuestion) => {
 const QuestionDisplay = ({ question, productData }) => {
   const { t } = useTranslation();
 
+  const { answerQuestions: matomoTrackAnswerQuestions } =
+    useMatomoTrackAnswerQuestion();
+
   const filterState = useSelector(filterStateSelector);
   const isLoading = useSelector(isLoadingSelector);
   const dispatch = useDispatch();
 
   const resetFilters = () => dispatch(updateFilter(DEFAULT_FILTER_STATE));
   const answerQuestion = React.useCallback(
-    ({ insight_id, value }) =>
-      dispatch(answerQuestionAction({ insight_id, value })),
-    [dispatch]
+    ({ insight_id, value }) => {
+      dispatch(answerQuestionAction({ insight_id, value }));
+      matomoTrackAnswerQuestions(value);
+    },
+    [dispatch, matomoTrackAnswerQuestions]
   );
 
   const valueTagQuestionsURL = getValueTagQuestionsURL(filterState, question);