Erstatter amplitude med Umami hvis det finnes en umami_id

.env.example

@@ -6,4 +6,5 @@ NAIS_CLUSTER_NAME="dev-gcp"
 USE_MSW="true"
 SANITY_DATASETT="development"
 FARO_URL="http://localhost:12347/collect"
-GITHUB_SHA="local"
+GITHUB_SHA="local"
+UMAMI_ID="24bd3b5d-f1e6-446c-a551-0bf556592157"

.nais/nais.demo.yaml

@@ -51,9 +51,11 @@ spec:
     - name: FARO_URL
       value: {{faro_url}}
     - name: RUNTIME_ENVIRONMENT
-      value: {{RUNTIME_ENVIRONMENT}}
+      value: {{runtime_environment}}
     - name: SANITY_DATASETT
       value: {{sanity_datasett}}
+    - name: UMAMI_ID
+      value: {{umami_id}}
   accessPolicy:
     outbound:
       external:

.nais/nais.yaml

@@ -51,6 +51,8 @@ spec:
       value: {{faro_url}}
     - name: SANITY_DATASETT
       value: {{sanity_datasett}}
+    - name: UMAMI_ID
+      value: {{umami_id}}
   accessPolicy:
     outbound:
       external:

.nais/vars-demo.yaml

@@ -6,5 +6,6 @@ dekorator:
   url: https://dekoratoren.dev.nav.no/
   env: dev
 faro_url: "https://telemetry.ekstern.dev.nav.no/collect"
-RUNTIME_ENVIRONMENT: "demo"
+runtime_environment: "demo"
 sanity_datasett: "production"
+umami_id: "24bd3b5d-f1e6-446c-a551-0bf556592157"

.nais/vars-dev.yaml

@@ -9,6 +9,7 @@ dekorator:
   env: dev
 faro_url: "https://telemetry.ekstern.dev.nav.no/collect"
 sanity_datasett: "development"
+umami_id: "ccee3ffe-f3c3-4ef6-8e01-742756847782"
 replicas:
   min: 2
   max: 2

.nais/vars-prod.yaml

@@ -9,6 +9,7 @@ dekorator:
   env: prod
 faro_url: "https://telemetry.nav.no/collect"
 sanity_datasett: "production"
+umami_id: "feb08edd-87bf-4617-a22f-363ce00d48f6"
 replicas:
   min: 2
-  max: 2
+  max: 2

app/components/Kvittering.tsx

@@ -5,7 +5,7 @@ import { AktivitetOppsummering } from "~/components/aktivitet-oppsummering/Aktiv
 import { Kalender } from "~/components/kalender/Kalender";
 import navigasjonStyles from "~/components/navigasjon-container/NavigasjonContainer.module.css";
 import { RemixLink } from "~/components/RemixLink";
-import { useAmplitude } from "~/hooks/useAmplitude";
+import { useAnalytics } from "~/hooks/useAnalytics";
 import { useLocale } from "~/hooks/useLocale";
 import { useSanity } from "~/hooks/useSanity";
 import { useUXSignals } from "~/hooks/useUXSignals";
@@ -27,7 +27,7 @@ interface Ikvittering {
 export function Kvittering({ tittel, periode, harNestePeriode }: Ikvittering) {
   const { getAppText, getLink } = useSanity();
   const { locale } = useLocale();
-  const { trackNavigere } = useAmplitude();
+  const { trackNavigere } = useAnalytics();
 
   if (typeof window !== "undefined" && window["hj"]) {
     window.hj("trigger", "nyttmeldekortDP");

app/components/LesMer.tsx

@@ -2,7 +2,7 @@ import { Checkbox, CheckboxGroup, ReadMore } from "@navikt/ds-react";
 import { PortableText } from "@portabletext/react";
 import { useState } from "react";
 
-import { useAmplitude } from "~/hooks/useAmplitude";
+import { useAnalytics } from "~/hooks/useAnalytics";
 import { useSanity } from "~/hooks/useSanity";
 import { AktivitetType, aktivitetTypeMap } from "~/utils/aktivitettype.utils";
 
@@ -33,9 +33,10 @@ export const lesMerInnhold = [
 
 export function LesMer({ periodeId }: IProps) {
   const { getRichText, getAppText } = useSanity();
-  const { trackAccordionApnet, trackAccordionLukket } = useAmplitude();
+  const { trackAccordionApnet, trackAccordionLukket, trackLesMerFilter } = useAnalytics();
 
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [timer, setTimer] = useState<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const tekstId = "rapportering-les-mer-hva-skal-rapporteres-tittel";
   const header = getAppText(tekstId);
@@ -48,8 +49,30 @@ export function LesMer({ periodeId }: IProps) {
     }
   }
 
+  function debounce(fn: () => void, timeout = 3000) {
+    if (timer) {
+      clearTimeout(timer);
+      setTimer(undefined);
+    }
+
+    setTimer(
+      setTimeout(() => {
+        fn();
+      }, timeout),
+    );
+  }
+
   function handleCheckboxChange(values: string[]) {
     setSelectedValues(values);
+
+    debounce(() => {
+      trackLesMerFilter({
+        arbeid: values.includes(AktivitetType.Arbeid),
+        syk: values.includes(AktivitetType.Syk),
+        fravaer: values.includes(AktivitetType.Fravaer),
+        utdanning: values.includes(AktivitetType.Utdanning),
+      });
+    });
   }
 
   const filtrertInnhold = lesMerInnhold.filter(

app/components/aktivitet-checkbox/AktivitetCheckboxes.tsx

@@ -3,7 +3,7 @@ import { PortableText } from "@portabletext/react";
 import classNames from "classnames";
 import { useField } from "remix-validated-form";
 
-import { useAmplitude } from "~/hooks/useAmplitude";
+import { useAnalytics } from "~/hooks/useAnalytics";
 import { type GetAppText, useSanity } from "~/hooks/useSanity";
 import { AktivitetType, aktivitetTypeMap, IAktivitet } from "~/utils/aktivitettype.utils";
 import { periodeSomTimer } from "~/utils/periode.utils";
@@ -66,7 +66,7 @@ export function AktivitetCheckboxes({
 }: IProps) {
   const { error } = useField(name);
   const { getAppText, getRichText } = useSanity();
-  const { trackAccordionApnet, trackAccordionLukket } = useAmplitude();
+  const { trackAccordionApnet, trackAccordionLukket } = useAnalytics();
 
   const tekstId = "rapportering-aktivitet-jobb-prosentstilling-tittel";
   const header = getAppText(tekstId);

app/components/aktivitet-modal/AktivitetModal.tsx

@@ -1,8 +1,10 @@
 import { Alert, Button, Heading, Modal } from "@navikt/ds-react";
 import { useActionData, useFetcher, useNavigation } from "@remix-run/react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ValidatedForm } from "remix-validated-form";
+import { uuidv7 } from "uuidv7";
 
+import { useAnalytics } from "~/hooks/useAnalytics";
 import { useLocale } from "~/hooks/useLocale";
 import { useSanity } from "~/hooks/useSanity";
 import type { IRapporteringsperiode } from "~/models/rapporteringsperiode.server";
@@ -37,15 +39,42 @@ export function AktivitetModal({
 
   const { getAppText } = useSanity();
   const actionData = useActionData<typeof rapporteringAction>();
+  const [sesjonId, setSesjonId] = useState<string>("");
+  const modalId = "aktivitet-modal";
 
   const dag = periode.dager.find((dag) => dag.dato === valgtDato);
 
   const fetcher = useFetcher();
   const navigation = useNavigation();
   const isSubmitting = useIsSubmitting(navigation);
   const modalRef = useRef<HTMLDivElement>(null);
+  const { trackModalApnet, trackModalLukket } = useAnalytics();
+  const [harLoggetLukket, setHarLoggetLukket] = useState<boolean>(false);
 
-  const slettHandler = () => {
+  function loggModalLukket(knapp: string, antallAktiviteter: number) {
+    if (harLoggetLukket) return;
+
+    /**
+     * onClose kalles ved alle handlinger som lukker modalen, men er også den
+     * eneste metoden vi har for å lytte på avbryt-knappen. onClose er den siste
+     * metoden som blir kalt, så her sørger vi for at bare én logg blir sendt per
+     * 100ms
+     */
+    setHarLoggetLukket(true);
+    setTimeout(() => {
+      setHarLoggetLukket(false);
+    }, 100);
+
+    trackModalLukket({
+      skjemaId: periode.id,
+      modalId,
+      sesjonId,
+      knapp,
+      antallAktiviteter,
+    });
+  }
+
+  function slettHandler() {
     fetcher.submit(
       {
         rapporteringsperiodeId: periode.id,
@@ -54,12 +83,25 @@ export function AktivitetModal({
       { method: "post", action: "/api/slett" },
     );
 
+    loggModalLukket("slett", 0);
     lukkModal();
-  };
+  }
+
+  function onClose() {
+    loggModalLukket("lukk", 0);
+    lukkModal();
+  }
+
+  function onSubmit(data: { type: string[]; timer?: number }) {
+    loggModalLukket("lagre", data.type?.length ?? 0);
+  }
 
   useEffect(() => {
     if (modalAapen) {
       modalRef?.current?.scrollTo({ top: 0 });
+      const id = uuidv7();
+      setSesjonId(id);
+      trackModalApnet({ skjemaId: periode.id, modalId, sesjonId: id });
     }
   }, [modalAapen]);
 
@@ -68,7 +110,7 @@ export function AktivitetModal({
       className={styles.modal}
       aria-labelledby="aktivitet-modal-heading"
       open={modalAapen}
-      onClose={lukkModal}
+      onClose={onClose}
     >
       <Modal.Header>
         <Heading
@@ -83,7 +125,12 @@ export function AktivitetModal({
       </Modal.Header>
       <Modal.Body ref={modalRef}>
         {dag && (
-          <ValidatedForm method="post" key="lagre-ny-aktivitet" validator={validator()}>
+          <ValidatedForm
+            method="post"
+            key="lagre-ny-aktivitet"
+            validator={validator()}
+            onSubmit={onSubmit}
+          >
             <input type="hidden" name="dato" defaultValue={valgtDato} />
             <input type="hidden" name="dag" defaultValue={JSON.stringify(dag)} />
 
@@ -108,7 +155,7 @@ export function AktivitetModal({
             )}
 
             <div className={styles.knappKontainer}>
-              <Button variant="secondary" type="button" name="submit" onClick={slettHandler}>
+              <Button variant="secondary" type="button" onClick={slettHandler}>
                 {getAppText("rapportering-slett")}
               </Button>
               <Button type="submit" name="submit" value="lagre" disabled={isSubmitting}>

app/components/analytics/Umami.tsx

@@ -0,0 +1,38 @@
+import { awaitDecoratorData, getCurrentConsent } from "@navikt/nav-dekoratoren-moduler";
+import { useEffect, useState } from "react";
+
+import { getEnv } from "~/utils/env.utils";
+
+interface Consent {
+  analytics: boolean;
+  surveys: boolean;
+}
+
+async function getConsent(callback: (consent: Consent) => void) {
+  await awaitDecoratorData();
+  const { consent } = getCurrentConsent();
+  callback(consent);
+}
+
+export function Umami(): JSX.Element {
+  const umamiId = getEnv("UMAMI_ID");
+  const [userConsent, setUserConsent] = useState<Consent>({ analytics: false, surveys: false });
+
+  useEffect(() => {
+    getConsent(setUserConsent);
+  }, []);
+
+  return (
+    <>
+      {umamiId && (
+        <script
+          defer
+          src="https://cdn.nav.no/team-researchops/sporing/sporing-uten-uuid.js"
+          data-host-url="https://umami.nav.no"
+          data-website-id={umamiId}
+          data-auto-track={userConsent.analytics}
+        ></script>
+      )}
+    </>
+  );
+}

app/components/error-boundary/GeneralErrorBoundary.tsx

@@ -4,7 +4,7 @@ import { ErrorResponse, isRouteErrorResponse } from "@remix-run/react";
 import { useEffect } from "react";
 
 import navigasjonStyles from "~/components/navigasjon-container/NavigasjonContainer.module.css";
-import { useAmplitude } from "~/hooks/useAmplitude";
+import { useAnalytics } from "~/hooks/useAnalytics";
 import { foundAppText, foundRichText, useSanity } from "~/hooks/useSanity";
 import { setBreadcrumbs } from "~/utils/dekoratoren.utils";
 
@@ -76,7 +76,7 @@ export function useGetErrorText(error: unknown | IError): {
 export function GeneralErrorBoundary({ error }: IProps) {
   const { getAppText, getLink } = useSanity();
   const { titleId, descriptionId, title, description } = useGetErrorText(error);
-  const { trackFeilmelding } = useAmplitude();
+  const { trackFeilmelding } = useAnalytics();
 
   useEffect(() => {
     setBreadcrumbs([], getAppText);

app/components/kalender/Endringslenke.tsx

@@ -1,4 +1,4 @@
-import { useAmplitude } from "~/hooks/useAmplitude";
+import { useAnalytics } from "~/hooks/useAnalytics";
 import { useSanity } from "~/hooks/useSanity";
 
 import { RemixLink } from "../RemixLink";
@@ -11,7 +11,7 @@ interface IProps {
 export function EndringsLenke(props: IProps) {
   const { getAppText } = useSanity();
 
-  const { trackSkjemaStartet, trackNavigere } = useAmplitude();
+  const { trackSkjemaStartet, trackNavigere } = useAnalytics();
 
   const sti = "endre";
   const linkId = "rapportering-redigeringslenke-endre";

app/components/kalender/Uke.tsx

@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import { format } from "date-fns";
 
-import { useAmplitude } from "~/hooks/useAmplitude";
 import { useSanity } from "~/hooks/useSanity";
 import type { IRapporteringsperiodeDag } from "~/models/rapporteringsperiode.server";
 import { AktivitetType } from "~/utils/aktivitettype.utils";
@@ -19,9 +18,8 @@ interface IProps {
 }
 
 export function Uke(props: IProps) {
-  const { rapporteringUke, readonly, aapneModal, locale = DecoratorLocale.NB, periodeId } = props;
+  const { rapporteringUke, readonly, aapneModal, locale = DecoratorLocale.NB } = props;
   const { getAppText } = useSanity();
-  const { trackModalApnet } = useAmplitude();
 
   function erAktivStil(dag: IRapporteringsperiodeDag, typer: AktivitetType[]): boolean {
     const dagenHarAktivitet = dag.aktiviteter.length > 0;
@@ -78,7 +76,6 @@ export function Uke(props: IProps) {
                 className={classNames(styles.dato, dagKnappStyle)}
                 aria-label={hentSkjermleserDatoTekst(dag, getAppText, locale)}
                 onClick={() => {
-                  trackModalApnet(periodeId);
                   aapneModal(dag.dato);
                 }}
               >