Update button click tracking

digitalservicebund · May 2, 2024 · 372a936 · 372a936
1 parent 85dcb37
commit 372a936
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 23 deletions.
diff --git a/packages/shared/components/Button.tsx b/packages/shared/components/Button.tsx
@@ -1,21 +1,18 @@
 import classNames from "classnames";
 import { cloneElement, type ReactElement } from "react";
 import { Link } from "react-router-dom";
-import { z } from "zod";
-import { trackButtonClick } from "../../tool-finder/src/services/tracking";
 
-export const ButtonPropsSchema = z.object({
-  text: z.string().optional(),
-  look: z.enum(["primary", "secondary", "tertiary", "ghost"]).optional(),
-  size: z.enum(["large", "medium", "small"]).optional(),
-  href: z.string().optional(),
-  iconLeft: z.custom<ReactElement>().optional(),
-  iconRight: z.custom<ReactElement>().optional(),
-  fullWidth: z.boolean().optional(),
-  onClickCallback: z.function().optional(),
-});
-
-type Props = z.infer<typeof ButtonPropsSchema>;
+type Props = {
+  text?: string;
+  look?: "primary" | "secondary" | "tertiary" | "ghost";
+  size?: "large" | "medium" | "small";
+  href?: string;
+  iconLeft?: ReactElement;
+  iconRight?: ReactElement;
+  fullWidth?: boolean;
+  trackButtonClick?: (id?: string, href?: string) => void;
+  onClickCallback?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+};
 
 export interface ButtonProps
   extends React.ComponentPropsWithoutRef<"button">,
@@ -40,6 +37,7 @@ function Button({
   look,
   size,
   href,
+  trackButtonClick,
   onClickCallback,
   ...props
 }: ButtonProps | ButtonLinkProps) {
@@ -74,7 +72,9 @@ function Button({
   };
 
   const onClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    trackButtonClick(id, href);
+    if (trackButtonClick) {
+      trackButtonClick(id, href);
+    }
     if (onClickCallback) {
       onClickCallback(event);
     }

diff --git a/packages/shared/components/FeedbackForm.tsx b/packages/shared/components/FeedbackForm.tsx
@@ -1,4 +1,3 @@
-import { trackFeedbackClick } from "../../tool-finder/src/services/tracking";
 import Background from "./Background";
 import Box from "./Box";
 import Container from "./Container";
@@ -82,10 +81,18 @@ export default function FeedbackForm({
   ressort,
   object,
   reason,
+  trackFeedbackClick,
 }: Readonly<{
   ressort: string;
   object: string;
   reason: string;
+  trackFeedbackClick: (
+    name: string,
+    value: number,
+    ressort: string,
+    object: string,
+    reason: string,
+  ) => void;
 }>) {
   function sendFeedback(name: string, value: number) {
     trackFeedbackClick(name, value, ressort, object, reason);

diff --git a/packages/tool-finder/src/routes/DecisionTree.tsx b/packages/tool-finder/src/routes/DecisionTree.tsx
@@ -4,6 +4,7 @@ import Container from "@digitalcheck/shared/components/Container";
 import Header from "@digitalcheck/shared/components/Header";
 import useTitle from "services/useTitle";
 
+import { trackButtonClick } from "services/tracking";
 import { PATH_RESULT } from "./";
 
 function DecisionTree() {
@@ -36,6 +37,7 @@ function DecisionTree() {
               id: "diagram-guide-page-back-button",
               text: "Zurück",
               href: PATH_RESULT,
+              trackButtonClick,
             },
           ]}
         ></Box>

diff --git a/packages/tool-finder/src/routes/Diagram.tsx b/packages/tool-finder/src/routes/Diagram.tsx
@@ -4,6 +4,7 @@ import Container from "@digitalcheck/shared/components/Container";
 import Header from "@digitalcheck/shared/components/Header";
 import useTitle from "services/useTitle";
 
+import { trackButtonClick } from "services/tracking";
 import { PATH_RESULT } from "./";
 
 function Diagram() {
@@ -36,6 +37,7 @@ function Diagram() {
               id: "diagram-guide-page-back-button",
               text: "Zurück",
               href: PATH_RESULT,
+              trackButtonClick,
             },
           ]}
         ></Box>

diff --git a/packages/tool-finder/src/routes/Flowchart.tsx b/packages/tool-finder/src/routes/Flowchart.tsx
@@ -2,6 +2,7 @@ import Background from "@digitalcheck/shared/components/Background";
 import Box from "@digitalcheck/shared/components/Box";
 import Container from "@digitalcheck/shared/components/Container";
 import Header from "@digitalcheck/shared/components/Header";
+import { trackButtonClick } from "services/tracking";
 import useTitle from "services/useTitle";
 
 import Button from "@digitalcheck/shared/components/Button";
@@ -104,11 +105,10 @@ Der Start mag Ihnen leichter fallen, wenn Sie als Basis eine zeitliche Abfolge w
       <Container paddingTop="0" paddingBottom="48">
         <ButtonContainer>
           <Button
-            {...{
-              id: "flowchart-guide-page-back-button",
-              text: "Zurück",
-              href: PATH_RESULT,
-            }}
+            id="flowchart-guide-page-back-button"
+            text="Zurück"
+            href={PATH_RESULT}
+            trackButtonClick={trackButtonClick}
           />
         </ButtonContainer>
       </Container>

diff --git a/packages/tool-finder/src/routes/InfoPage.tsx b/packages/tool-finder/src/routes/InfoPage.tsx
@@ -3,6 +3,7 @@ import BetaBanner from "@digitalcheck/shared/components/BetaBanner";
 import Box from "@digitalcheck/shared/components/Box";
 import Container from "@digitalcheck/shared/components/Container";
 import Header from "@digitalcheck/shared/components/Header";
+import { trackButtonClick } from "services/tracking";
 import useTitle from "services/useTitle";
 import { PATH_QUIZ } from ".";
 
@@ -41,6 +42,7 @@ function InfoPage() {
               text: "Werkzeug finden",
               href: PATH_QUIZ,
               size: "large",
+              trackButtonClick,
             },
           ]}
         ></Box>

diff --git a/packages/tool-finder/src/routes/QuizPage.tsx b/packages/tool-finder/src/routes/QuizPage.tsx
@@ -19,7 +19,7 @@ import {
 import { ChangeEvent, Dispatch, SetStateAction } from "react";
 import { UseFormReturn, useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
-import { trackSelection } from "services/tracking";
+import { trackButtonClick, trackSelection } from "services/tracking";
 import useTitle from "services/useTitle";
 import { PATH_RESULT } from ".";
 
@@ -165,10 +165,11 @@ function QuizPage({
           <Container paddingTop="0" paddingBottom="80">
             <ButtonContainer>
               <Button
+                id={"quiz-find-tool"}
                 text={"Werkzeug suchen"}
                 size={"large"}
-                id={"quiz-find-tool"}
                 type={"submit"}
+                trackButtonClick={trackButtonClick}
               />
             </ButtonContainer>
           </Container>

diff --git a/packages/tool-finder/src/routes/ResultPage.tsx b/packages/tool-finder/src/routes/ResultPage.tsx
@@ -10,6 +10,7 @@ import type { VisualisationObject } from "models/VisualisationObject";
 import { findResultByObjectAndRessort } from "persistance/repository";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { trackButtonClick, trackFeedbackClick } from "services/tracking";
 import useTitle from "services/useTitle";
 import { PATH_QUIZ } from ".";
 
@@ -69,6 +70,7 @@ function ResultPage({ ressort, object, reason }: ResultPageProps) {
                     href: `/${result.cluster.id}`,
                     size: "small",
                     look: "tertiary",
+                    trackButtonClick,
                   },
                 ]}
               ></Box>
@@ -110,6 +112,7 @@ function ResultPage({ ressort, object, reason }: ResultPageProps) {
               size: "small",
               look: "tertiary",
               href: PATH_QUIZ,
+              trackButtonClick,
             },
           ]}
         ></Box>
@@ -118,6 +121,7 @@ function ResultPage({ ressort, object, reason }: ResultPageProps) {
         ressort={ressort.name}
         object={object.name}
         reason={reason.name}
+        trackFeedbackClick={trackFeedbackClick}
       />
     </>
   ) : (
@@ -137,6 +141,7 @@ function ResultPage({ ressort, object, reason }: ResultPageProps) {
             id: "result-error-page-back-button",
             text: "Zurück",
             href: PATH_QUIZ,
+            trackButtonClick,
           },
         ]}
       ></Box>