From 04e26913d1a9be919c965f8cf6bf42501acaf65e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thor=20H=C3=A5kon=20Bredesen?= Date: Tue, 17 Dec 2024 14:48:08 +0100 Subject: [PATCH 01/24] Erstatter amplitude med Umami hvis det finnes en umami_id --- .env.example | 3 ++- .nais/nais.yaml | 2 ++ .nais/vars-demo.yaml | 1 + .nais/vars-dev.yaml | 1 + .nais/vars-prod.yaml | 1 + app/components/Kvittering.tsx | 4 +-- app/components/LesMer.tsx | 4 +-- .../AktivitetCheckboxes.tsx | 4 +-- .../error-boundary/GeneralErrorBoundary.tsx | 4 +-- app/components/kalender/Endringslenke.tsx | 4 +-- app/components/kalender/Uke.tsx | 4 +-- .../{useAmplitude.ts => useAnalytics.ts} | 12 +++++++-- app/root.tsx | 26 +++++++++++++++++-- app/routes/_index.tsx | 4 +-- ...e.$rapporteringsperiodeId.arbeidssoker.tsx | 4 +-- ...de.$rapporteringsperiodeId.bekreftelse.tsx | 4 +-- ...orteringsperiodeId.endring.begrunnelse.tsx | 4 +-- ...orteringsperiodeId.endring.bekreftelse.tsx | 4 +-- ...rapporteringsperiodeId.endring.fyll-ut.tsx | 4 +-- ...apporteringsperiodeId.endring.send-inn.tsx | 4 +-- ...eriode.$rapporteringsperiodeId.fyll-ut.tsx | 4 +-- ...pporteringsperiodeId.rapporteringstype.tsx | 4 +-- ...riode.$rapporteringsperiodeId.send-inn.tsx | 4 +-- .../periode.$rapporteringsperiodeId.tom.tsx | 4 +-- app/utils/env.utils.ts | 4 +++ tests/helpers/setup.ts | 4 +-- tests/hooks/useAmplitude.test.ts | 16 ++++++------ 27 files changed, 89 insertions(+), 49 deletions(-) rename app/hooks/{useAmplitude.ts => useAnalytics.ts} (93%) diff --git a/.env.example b/.env.example index e53e5423..9ee75f14 100644 --- a/.env.example +++ b/.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" \ No newline at end of file +GITHUB_SHA="local" +UMAMI_ID="24bd3b5d-f1e6-446c-a551-0bf556592157" \ No newline at end of file diff --git a/.nais/nais.yaml b/.nais/nais.yaml index 6ecf3093..26c39824 100644 --- a/.nais/nais.yaml +++ b/.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: diff --git a/.nais/vars-demo.yaml b/.nais/vars-demo.yaml index 51d7d837..e2cd6deb 100644 --- a/.nais/vars-demo.yaml +++ b/.nais/vars-demo.yaml @@ -8,3 +8,4 @@ dekorator: faro_url: "https://telemetry.ekstern.dev.nav.no/collect" RUNTIME_ENVIRONMENT: "demo" sanity_datasett: "production" +umami_id: "24bd3b5d-f1e6-446c-a551-0bf556592157" diff --git a/.nais/vars-dev.yaml b/.nais/vars-dev.yaml index 7b88b3be..7562087d 100644 --- a/.nais/vars-dev.yaml +++ b/.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 diff --git a/.nais/vars-prod.yaml b/.nais/vars-prod.yaml index 301547b6..cbeae932 100644 --- a/.nais/vars-prod.yaml +++ b/.nais/vars-prod.yaml @@ -9,6 +9,7 @@ dekorator: env: prod faro_url: "https://telemetry.nav.no/collect" sanity_datasett: "production" +umami_id: "" replicas: min: 2 max: 2 diff --git a/app/components/Kvittering.tsx b/app/components/Kvittering.tsx index cdaca5cc..7b80260d 100644 --- a/app/components/Kvittering.tsx +++ b/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"); diff --git a/app/components/LesMer.tsx b/app/components/LesMer.tsx index 6c87b707..3b4146ea 100644 --- a/app/components/LesMer.tsx +++ b/app/components/LesMer.tsx @@ -1,7 +1,7 @@ import { ReadMore } from "@navikt/ds-react"; import { PortableText } from "@portabletext/react"; -import { useAmplitude } from "~/hooks/useAmplitude"; +import { useAnalytics } from "~/hooks/useAnalytics"; import { useSanity } from "~/hooks/useSanity"; import styles from "../styles/lesMer.module.css"; @@ -12,7 +12,7 @@ interface IProps { export function LesMer({ periodeId }: IProps) { const { getRichText, getAppText } = useSanity(); - const { trackAccordionApnet, trackAccordionLukket } = useAmplitude(); + const { trackAccordionApnet, trackAccordionLukket } = useAnalytics(); const tekstId = "rapportering-les-mer-hva-skal-rapporteres-tittel"; const header = getAppText(tekstId); diff --git a/app/components/aktivitet-checkbox/AktivitetCheckboxes.tsx b/app/components/aktivitet-checkbox/AktivitetCheckboxes.tsx index 9e7f5e1d..421cc5b4 100644 --- a/app/components/aktivitet-checkbox/AktivitetCheckboxes.tsx +++ b/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); diff --git a/app/components/error-boundary/GeneralErrorBoundary.tsx b/app/components/error-boundary/GeneralErrorBoundary.tsx index 8c70bdec..7e90e1b7 100644 --- a/app/components/error-boundary/GeneralErrorBoundary.tsx +++ b/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); diff --git a/app/components/kalender/Endringslenke.tsx b/app/components/kalender/Endringslenke.tsx index 6b85eca4..cd571c5b 100644 --- a/app/components/kalender/Endringslenke.tsx +++ b/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"; diff --git a/app/components/kalender/Uke.tsx b/app/components/kalender/Uke.tsx index 21cb2811..a49fc119 100644 --- a/app/components/kalender/Uke.tsx +++ b/app/components/kalender/Uke.tsx @@ -1,7 +1,7 @@ import classNames from "classnames"; import { format } from "date-fns"; -import { useAmplitude } from "~/hooks/useAmplitude"; +import { useAnalytics } from "~/hooks/useAnalytics"; import { useSanity } from "~/hooks/useSanity"; import type { IRapporteringsperiodeDag } from "~/models/rapporteringsperiode.server"; import { AktivitetType } from "~/utils/aktivitettype.utils"; @@ -21,7 +21,7 @@ interface IProps { export function Uke(props: IProps) { const { rapporteringUke, readonly, aapneModal, locale = DecoratorLocale.NB, periodeId } = props; const { getAppText } = useSanity(); - const { trackModalApnet } = useAmplitude(); + const { trackModalApnet } = useAnalytics(); function erAktivStil(dag: IRapporteringsperiodeDag, typer: AktivitetType[]): boolean { const dagenHarAktivitet = dag.aktiviteter.length > 0; diff --git a/app/hooks/useAmplitude.ts b/app/hooks/useAnalytics.ts similarity index 93% rename from app/hooks/useAmplitude.ts rename to app/hooks/useAnalytics.ts index 5f4b6d4d..c0fa353e 100644 --- a/app/hooks/useAmplitude.ts +++ b/app/hooks/useAnalytics.ts @@ -3,6 +3,7 @@ import { useCallback } from "react"; import { IRapporteringsperiode } from "~/models/rapporteringsperiode.server"; import { DecoratorLocale } from "~/utils/dekoratoren.utils"; +import { getEnv } from "~/utils/env.utils"; import { Rapporteringstype } from "~/utils/types"; import { useLocale } from "./useLocale"; @@ -34,8 +35,15 @@ interface IFeilmelding { const skjemanavn = "dagpenger-rapportering"; -export function useAmplitude() { - const track = getAmplitudeInstance("dekoratoren"); +export function useAnalytics() { + let track = undefined; + + if (typeof window !== "undefined" && getEnv("UMAMI_ID")) { + track = window.umami.track; + } else { + track = getAmplitudeInstance("dekoratoren"); + } + const { locale: språk } = useLocale(); const trackEvent = useCallback( diff --git a/app/root.tsx b/app/root.tsx index 828d7678..39f2b742 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -23,7 +23,7 @@ import { GeneralErrorBoundary } from "./components/error-boundary/GeneralErrorBo import { ServiceMessage } from "./components/service-message/ServiceMessage"; import { getDecoratorHTML } from "./dekorator/dekorator.server"; import { DevTools } from "./devTools"; -import { useAmplitude } from "./hooks/useAmplitude"; +import { useAnalytics } from "./hooks/useAnalytics"; import { useInjectDecoratorScript } from "./hooks/useInjectDecoratorScript"; import { useSanity } from "./hooks/useSanity"; import { useTypedRouteLoaderData } from "./hooks/useTypedRouteLoaderData"; @@ -115,6 +115,7 @@ export async function loader({ request }: LoaderFunctionArgs) { RUNTIME_ENVIRONMENT: process.env.RUNTIME_ENVIRONMENT, SANITY_DATASETT: process.env.SANITY_DATASETT, GITHUB_SHA: process.env.GITHUB_SHA, + UMAMI_ID: process.env.UMAMI_ID, }, fragments, }; @@ -152,6 +153,15 @@ export function Layout({ children }: { children: React.ReactNode }) { {parse(fragments.DECORATOR_HEAD_ASSETS, { trim: true })} + {env.UMAMI_ID && ( + + )} )} From 09d5439a2e0b96cac88d3a9621e08f5fd7a26ce9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thor=20H=C3=A5kon=20Bredesen?= Date: Thu, 19 Dec 2024 08:44:08 +0100 Subject: [PATCH 03/24] =?UTF-8?q?Logg=20til=20b=C3=A5de=20Amplitude=20og?= =?UTF-8?q?=20Umami?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hooks/useAnalytics.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/app/hooks/useAnalytics.ts b/app/hooks/useAnalytics.ts index c0fa353e..4591a99f 100644 --- a/app/hooks/useAnalytics.ts +++ b/app/hooks/useAnalytics.ts @@ -36,25 +36,26 @@ interface IFeilmelding { const skjemanavn = "dagpenger-rapportering"; export function useAnalytics() { - let track = undefined; - - if (typeof window !== "undefined" && getEnv("UMAMI_ID")) { - track = window.umami.track; - } else { - track = getAmplitudeInstance("dekoratoren"); - } + const umami = typeof window !== "undefined" && getEnv("UMAMI_ID") ? window.umami.track : () => {}; + const amplitude = getAmplitudeInstance("dekoratoren"); const { locale: språk } = useLocale(); const trackEvent = useCallback( (event: string, props: T = {} as T) => { - track(event, { + umami(event, { + skjemanavn, + språk, + ...props, + }); + + amplitude(event, { skjemanavn, språk, ...props, }); }, - [track, språk], + [umami, amplitude, språk], ); const trackSkjemaStartet = useCallback( From ce35ac41d10c7906090745929dff0aaaeb8ccb19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thor=20H=C3=A5kon=20Bredesen?= Date: Mon, 6 Jan 2025 12:39:07 +0100 Subject: [PATCH 04/24] Bruker bare umami hvis vi er localhost eller demo --- app/hooks/useAnalytics.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/app/hooks/useAnalytics.ts b/app/hooks/useAnalytics.ts index 4591a99f..321c734c 100644 --- a/app/hooks/useAnalytics.ts +++ b/app/hooks/useAnalytics.ts @@ -3,7 +3,7 @@ import { useCallback } from "react"; import { IRapporteringsperiode } from "~/models/rapporteringsperiode.server"; import { DecoratorLocale } from "~/utils/dekoratoren.utils"; -import { getEnv } from "~/utils/env.utils"; +import { getEnv, isLocalOrDemo } from "~/utils/env.utils"; import { Rapporteringstype } from "~/utils/types"; import { useLocale } from "./useLocale"; @@ -43,11 +43,13 @@ export function useAnalytics() { const trackEvent = useCallback( (event: string, props: T = {} as T) => { - umami(event, { - skjemanavn, - språk, - ...props, - }); + if (isLocalOrDemo) { + umami(event, { + skjemanavn, + språk, + ...props, + }); + } amplitude(event, { skjemanavn, From 06060c2e23f6b42144d2420bda1efa00783947fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thor=20H=C3=A5kon=20Bredesen?= Date: Tue, 14 Jan 2025 09:21:36 +0100 Subject: [PATCH 05/24] =?UTF-8?q?Logger=20n=C3=A5r=20skjemasteg=20starter?= =?UTF-8?q?=20og=20fullf=C3=B8rer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hooks/useAnalytics.ts | 40 ++++++++++++++++--- ...e.$rapporteringsperiodeId.arbeidssoker.tsx | 23 +++++++++-- ...orteringsperiodeId.endring.begrunnelse.tsx | 24 ++++++++--- ...rapporteringsperiodeId.endring.fyll-ut.tsx | 25 +++++++++--- ...apporteringsperiodeId.endring.send-inn.tsx | 25 +++++++++--- ...de.$rapporteringsperiodeId.endring.tom.tsx | 1 + ...eriode.$rapporteringsperiodeId.fyll-ut.tsx | 24 ++++++++--- ...pporteringsperiodeId.rapporteringstype.tsx | 25 +++++++++--- ...riode.$rapporteringsperiodeId.send-inn.tsx | 26 +++++++++--- .../periode.$rapporteringsperiodeId.tom.tsx | 24 +++++++++-- tests/helpers/setup.ts | 3 +- tests/hooks/useAmplitude.test.ts | 2 +- 12 files changed, 197 insertions(+), 45 deletions(-) diff --git a/app/hooks/useAnalytics.ts b/app/hooks/useAnalytics.ts index 321c734c..d365ae74 100644 --- a/app/hooks/useAnalytics.ts +++ b/app/hooks/useAnalytics.ts @@ -13,6 +13,7 @@ interface ISkjemaSteg { stegnavn: string; steg: number; endring?: boolean; + sesjonId?: string; } interface INavigere { @@ -79,15 +80,43 @@ export function useAnalytics() { [trackEvent], ); - const trackSkjemaSteg = useCallback( - ({ periode: { id, rapporteringstype }, stegnavn, steg, endring = false }: ISkjemaSteg) => - trackEvent("skjema steg fullført", { + const trackSkjemaStegStartet = useCallback( + ({ + periode: { id, rapporteringstype }, + stegnavn, + steg, + endring = false, + sesjonId, + }: ISkjemaSteg) => { + return trackEvent("skjema steg startet", { skjemaId: id, stegnavn, steg, rapporteringstype, endring, - }), + sesjonId, + }); + }, + [trackEvent], + ); + + const trackSkjemaStegFullført = useCallback( + ({ + periode: { id, rapporteringstype }, + stegnavn, + steg, + endring = false, + sesjonId, + }: ISkjemaSteg) => { + return trackEvent("skjema steg fullført", { + skjemaId: id, + stegnavn, + steg, + rapporteringstype, + endring, + sesjonId, + }); + }, [trackEvent], ); @@ -151,7 +180,8 @@ export function useAnalytics() { trackSkjemaStartet, trackSkjemaFullført, trackSkjemaInnsendingFeilet, - trackSkjemaSteg, + trackSkjemaStegStartet, + trackSkjemaStegFullført, trackAccordionApnet, trackAccordionLukket, trackAlertVist, diff --git a/app/routes/periode.$rapporteringsperiodeId.arbeidssoker.tsx b/app/routes/periode.$rapporteringsperiodeId.arbeidssoker.tsx index 7c30bfdf..771b3d1b 100644 --- a/app/routes/periode.$rapporteringsperiodeId.arbeidssoker.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.arbeidssoker.tsx @@ -2,7 +2,9 @@ import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons"; import { Button, Radio, RadioGroup } from "@navikt/ds-react"; import type { ActionFunctionArgs } from "@remix-run/node"; import { useFetcher, useNavigate } from "@remix-run/react"; +import { useEffect, useMemo } from "react"; import invariant from "tiny-invariant"; +import { uuidv7 } from "uuidv7"; import { AvregistertArbeidssokerAlert, @@ -44,18 +46,31 @@ export default function ArbeidssøkerRegisterSide() { const fetcher = useFetcher(); const isSubmitting = useIsSubmitting(fetcher); - const { trackSkjemaSteg } = useAnalytics(); + const { trackSkjemaStegStartet, trackSkjemaStegFullført } = useAnalytics(); + const sesjonId = useMemo(uuidv7, [periode.id]); + const stegnavn = "arbeidssoker"; + const steg = 4; function neste() { - trackSkjemaSteg({ + trackSkjemaStegFullført({ periode, - stegnavn: "arbeidssoker", - steg: 4, + stegnavn, + steg, + sesjonId, }); navigate(`/periode/${periode.id}/send-inn`); } + useEffect(() => { + trackSkjemaStegStartet({ + periode, + stegnavn, + steg, + sesjonId, + }); + }, []); + function handleChange(registrertArbeidssokerSvar: boolean) { if (kanSendes(periode)) { fetcher.submit( diff --git a/app/routes/periode.$rapporteringsperiodeId.endring.begrunnelse.tsx b/app/routes/periode.$rapporteringsperiodeId.endring.begrunnelse.tsx index 6ec7810d..60fa47ce 100644 --- a/app/routes/periode.$rapporteringsperiodeId.endring.begrunnelse.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.endring.begrunnelse.tsx @@ -2,7 +2,8 @@ import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons"; import { Button, Select } from "@navikt/ds-react"; import { ActionFunctionArgs } from "@remix-run/node"; import { useFetcher, useNavigate } from "@remix-run/react"; -import { ChangeEvent } from "react"; +import { ChangeEvent, useEffect, useMemo } from "react"; +import { uuidv7 } from "uuidv7"; import { Error } from "~/components/error/Error"; import { KanIkkeSendes } from "~/components/kan-ikke-sendes/KanIkkeSendes"; @@ -33,7 +34,10 @@ export default function BegrunnelseSide() { const isSubmitting = useIsSubmitting(fetcher); const navigate = useNavigate(); - const { trackSkjemaSteg } = useAnalytics(); + const { trackSkjemaStegStartet, trackSkjemaStegFullført } = useAnalytics(); + const sesjonId = useMemo(uuidv7, [periode.id]); + const stegnavn = "endring-begrunnelse"; + const steg = 2; const handleChange = (event: ChangeEvent) => { const { value } = event.target; @@ -59,16 +63,26 @@ export default function BegrunnelseSide() { ]; const neste = () => { - trackSkjemaSteg({ + trackSkjemaStegFullført({ periode, - stegnavn: "endring-begrunnelse", - steg: 2, + stegnavn, + steg, endring: true, + sesjonId, }); navigate(`/periode/${periode.id}/endring/send-inn`); }; + useEffect(() => { + trackSkjemaStegStartet({ + periode, + stegnavn, + steg, + sesjonId, + }); + }, []); + return ( <> diff --git a/app/routes/periode.$rapporteringsperiodeId.endring.fyll-ut.tsx b/app/routes/periode.$rapporteringsperiodeId.endring.fyll-ut.tsx index 4497dd4f..4e3671b7 100644 --- a/app/routes/periode.$rapporteringsperiodeId.endring.fyll-ut.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.endring.fyll-ut.tsx @@ -3,8 +3,9 @@ import { Button, Heading } from "@navikt/ds-react"; import { PortableText } from "@portabletext/react"; import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node"; import { useActionData, useLoaderData, useNavigate, useNavigation } from "@remix-run/react"; -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import invariant from "tiny-invariant"; +import { uuidv7 } from "uuidv7"; import { AktivitetModal } from "~/components/aktivitet-modal/AktivitetModal"; import { AktivitetOppsummering } from "~/components/aktivitet-oppsummering/AktivitetOppsummering"; @@ -79,7 +80,11 @@ export default function RapporteringsPeriodeFyllUtSide() { const [valgteAktiviteter, setValgteAktiviteter] = useState([]); const [modalAapen, setModalAapen] = useState(false); - const { trackSkjemaSteg } = useAnalytics(); + const { trackSkjemaStegStartet, trackSkjemaStegFullført } = useAnalytics(); + const sesjonId = useMemo(uuidv7, [periode.id]); + const stegnavn = "endring-fyll-ut"; + const steg = 1; + const navigate = useNavigate(); useEffect(() => { @@ -114,11 +119,12 @@ export default function RapporteringsPeriodeFyllUtSide() { const periodeneErLike = erPeriodeneLike(periode, originalPeriode); const neste = () => { - trackSkjemaSteg({ + trackSkjemaStegFullført({ periode, - stegnavn: "endring-fyll-ut", - steg: 1, + stegnavn, + steg, endring: true, + sesjonId, }); const nextLink = periodeneErLike @@ -127,6 +133,15 @@ export default function RapporteringsPeriodeFyllUtSide() { navigate(nextLink); }; + useEffect(() => { + trackSkjemaStegStartet({ + periode, + stegnavn, + steg, + sesjonId, + }); + }, []); + return ( <> diff --git a/app/routes/periode.$rapporteringsperiodeId.endring.send-inn.tsx b/app/routes/periode.$rapporteringsperiodeId.endring.send-inn.tsx index 40892815..68a0aca3 100644 --- a/app/routes/periode.$rapporteringsperiodeId.endring.send-inn.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.endring.send-inn.tsx @@ -11,8 +11,9 @@ import { useNavigation, useSubmit, } from "@remix-run/react"; -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import invariant from "tiny-invariant"; +import { uuidv7 } from "uuidv7"; import { AktivitetOppsummering } from "~/components/aktivitet-oppsummering/AktivitetOppsummering"; import { @@ -124,7 +125,11 @@ export default function RapporteringsPeriodeSendInnSide() { const actionData = useActionData(); const { getAppText, getRichText, getLink } = useSanity(); - const { trackSkjemaSteg, trackSkjemaInnsendingFeilet } = useAnalytics(); + const { trackSkjemaStegStartet, trackSkjemaStegFullført, trackSkjemaInnsendingFeilet } = + useAnalytics(); + const sesjonId = useMemo(uuidv7, [periode.id]); + const stegnavn = "endring-oppsummering"; + const steg = 3; const addHtml = useAddHtml({ rapporteringsperioder, @@ -148,15 +153,25 @@ export default function RapporteringsPeriodeSendInnSide() { } const onSubmit = (event: React.FormEvent) => { - trackSkjemaSteg({ + trackSkjemaStegFullført({ periode, - stegnavn: "endring-oppsummering", - steg: 3, + stegnavn, + steg, + sesjonId, }); addHtml(event); }; + useEffect(() => { + trackSkjemaStegStartet({ + periode, + stegnavn, + steg, + sesjonId, + }); + }, []); + useEffect(() => { if (actionData?.error && !hasTrackedError) { trackSkjemaInnsendingFeilet(periode.id, periode.rapporteringstype); diff --git a/app/routes/periode.$rapporteringsperiodeId.endring.tom.tsx b/app/routes/periode.$rapporteringsperiodeId.endring.tom.tsx index fba0fcd1..7e61e880 100644 --- a/app/routes/periode.$rapporteringsperiodeId.endring.tom.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.endring.tom.tsx @@ -15,6 +15,7 @@ export default function TomRapporteringsPeriodeSide() { const { getAppText, getRichText, getLink } = useSanity(); const navigate = useNavigate(); + return ( <> diff --git a/app/routes/periode.$rapporteringsperiodeId.fyll-ut.tsx b/app/routes/periode.$rapporteringsperiodeId.fyll-ut.tsx index 78b8bb4e..ad401a5b 100644 --- a/app/routes/periode.$rapporteringsperiodeId.fyll-ut.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.fyll-ut.tsx @@ -3,8 +3,9 @@ import { Button, Heading } from "@navikt/ds-react"; import { PortableText } from "@portabletext/react"; import type { ActionFunctionArgs } from "@remix-run/node"; import { useActionData, useNavigate, useNavigation, useSearchParams } from "@remix-run/react"; -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import invariant from "tiny-invariant"; +import { uuidv7 } from "uuidv7"; import { AktivitetModal } from "~/components/aktivitet-modal/AktivitetModal"; import { AktivitetOppsummering } from "~/components/aktivitet-oppsummering/AktivitetOppsummering"; @@ -57,7 +58,10 @@ export default function RapporteringsPeriodeFyllUtSide() { const { locale } = useLocale(); const { periode } = useTypedRouteLoaderData("routes/periode.$rapporteringsperiodeId"); - const { trackSkjemaSteg } = useAnalytics(); + const { trackSkjemaStegStartet, trackSkjemaStegFullført } = useAnalytics(); + const sesjonId = useMemo(uuidv7, [periode.id]); + const stegnavn = "fyll-ut"; + const steg = 2; const { getAppText, getRichText } = useSanity(); const actionData = useActionData(); @@ -101,10 +105,11 @@ export default function RapporteringsPeriodeFyllUtSide() { const harIngenAktiviteter = periode.dager.every((dag) => dag.aktiviteter.length === 0); const neste = () => { - trackSkjemaSteg({ + trackSkjemaStegFullført({ periode, - stegnavn: "fyll-ut", - steg: 2, + stegnavn, + steg, + sesjonId, }); const nextLink = harIngenAktiviteter @@ -114,6 +119,15 @@ export default function RapporteringsPeriodeFyllUtSide() { navigate(nextLink); }; + useEffect(() => { + trackSkjemaStegStartet({ + periode, + stegnavn, + steg, + sesjonId, + }); + }, []); + return ( <> diff --git a/app/routes/periode.$rapporteringsperiodeId.rapporteringstype.tsx b/app/routes/periode.$rapporteringsperiodeId.rapporteringstype.tsx index 6b1c15a4..b87d06d1 100644 --- a/app/routes/periode.$rapporteringsperiodeId.rapporteringstype.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.rapporteringstype.tsx @@ -4,7 +4,8 @@ import { PortableText } from "@portabletext/react"; import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node"; import { useFetcher, useLoaderData, useNavigate } from "@remix-run/react"; import { addDays } from "date-fns"; -import { useCallback } from "react"; +import { useCallback, useEffect, useMemo } from "react"; +import { uuidv7 } from "uuidv7"; import { Error } from "~/components/error/Error"; import { KanIkkeSendes } from "~/components/kan-ikke-sendes/KanIkkeSendes"; @@ -49,13 +50,17 @@ export async function loader({ request }: LoaderFunctionArgs) { export default function RapporteringstypeSide() { const navigate = useNavigate(); - const { trackSkjemaSteg } = useAnalytics(); // TODO: Sjekk om bruker har rapporteringsperioder eller ikke const { rapporteringsperioder } = useLoaderData(); const { periode } = useTypedRouteLoaderData("routes/periode.$rapporteringsperiodeId"); const { getAppText, getRichText } = useSanity(); + const { trackSkjemaStegStartet, trackSkjemaStegFullført } = useAnalytics(); + const sesjonId = useMemo(uuidv7, [periode.id]); + const stegnavn = "rapporteringstype"; + const steg = 1; + const rapporteringstypeFetcher = useFetcher(); const isSubmitting = useIsSubmitting(rapporteringstypeFetcher); @@ -88,10 +93,11 @@ export default function RapporteringstypeSide() { const senestInnsendingDato = formaterDato(addDays(new Date(periode.periode.fraOgMed), 21)); const neste = () => { - trackSkjemaSteg({ + trackSkjemaStegFullført({ periode, - stegnavn: "rapporteringstype", - steg: 1, + stegnavn, + steg, + sesjonId, }); const nesteKnappLink = @@ -101,6 +107,15 @@ export default function RapporteringstypeSide() { navigate(nesteKnappLink); }; + useEffect(() => { + trackSkjemaStegStartet({ + periode, + stegnavn, + steg, + sesjonId, + }); + }, []); + return ( <> diff --git a/app/routes/periode.$rapporteringsperiodeId.send-inn.tsx b/app/routes/periode.$rapporteringsperiodeId.send-inn.tsx index e79a7da0..a5ebc168 100644 --- a/app/routes/periode.$rapporteringsperiodeId.send-inn.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.send-inn.tsx @@ -11,8 +11,9 @@ import { useNavigation, useSubmit, } from "@remix-run/react"; -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import invariant from "tiny-invariant"; +import { uuidv7 } from "uuidv7"; import { AktivitetOppsummering } from "~/components/aktivitet-oppsummering/AktivitetOppsummering"; import { @@ -95,11 +96,16 @@ export async function action({ request, params }: ActionFunctionArgs) { export default function RapporteringsPeriodeSendInnSide() { const { locale } = useLocale(); const [hasTrackedError, setHasTrackedError] = useState(false); - const { trackSkjemaSteg, trackSkjemaInnsendingFeilet } = useAnalytics(); const { periode } = useTypedRouteLoaderData("routes/periode.$rapporteringsperiodeId"); const { rapporteringsperioder } = useLoaderData(); + const { trackSkjemaStegStartet, trackSkjemaStegFullført, trackSkjemaInnsendingFeilet } = + useAnalytics(); + const sesjonId = useMemo(uuidv7, [periode.id]); + const stegnavn = "oppsummering"; + const steg = 5; + const submit = useSubmit(); const navigate = useNavigate(); const navigation = useNavigation(); @@ -131,10 +137,11 @@ export default function RapporteringsPeriodeSendInnSide() { } const onSubmit = (event: React.FormEvent) => { - trackSkjemaSteg({ + trackSkjemaStegFullført({ periode, - stegnavn: "oppsummering", - steg: 5, + stegnavn, + steg, + sesjonId, }); addHtml(event); @@ -159,6 +166,15 @@ export default function RapporteringsPeriodeSendInnSide() { } }, [actionData]); + useEffect(() => { + trackSkjemaStegStartet({ + periode, + stegnavn, + steg, + sesjonId, + }); + }, []); + return ( <> diff --git a/app/routes/periode.$rapporteringsperiodeId.tom.tsx b/app/routes/periode.$rapporteringsperiodeId.tom.tsx index cba31adb..9f269307 100644 --- a/app/routes/periode.$rapporteringsperiodeId.tom.tsx +++ b/app/routes/periode.$rapporteringsperiodeId.tom.tsx @@ -2,6 +2,8 @@ import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons"; import { Alert, Button, Heading } from "@navikt/ds-react"; import { PortableText } from "@portabletext/react"; import { useNavigate } from "@remix-run/react"; +import { useEffect, useMemo } from "react"; +import { uuidv7 } from "uuidv7"; import { KanIkkeSendes } from "~/components/kan-ikke-sendes/KanIkkeSendes"; import { NavigasjonContainer } from "~/components/navigasjon-container/NavigasjonContainer"; @@ -16,17 +18,31 @@ export default function TomRapporteringsPeriodeSide() { const { getAppText, getRichText } = useSanity(); const navigate = useNavigate(); - const { trackSkjemaSteg } = useAnalytics(); + const { trackSkjemaStegStartet, trackSkjemaStegFullført } = useAnalytics(); + const sesjonId = useMemo(uuidv7, [periode.id]); + const stegnavn = "tom"; + const steg = 3; const neste = () => { - trackSkjemaSteg({ + trackSkjemaStegFullført({ periode, - stegnavn: "tom", - steg: 3, + stegnavn, + steg, + sesjonId, }); navigate(`/periode/${periode.id}/arbeidssoker`); }; + + useEffect(() => { + trackSkjemaStegStartet({ + periode, + stegnavn, + steg, + sesjonId, + }); + }, []); + return ( <> diff --git a/tests/helpers/setup.ts b/tests/helpers/setup.ts index 247b7d87..016737e1 100644 --- a/tests/helpers/setup.ts +++ b/tests/helpers/setup.ts @@ -35,7 +35,8 @@ vi.mock("~/hooks/useAnalytics", () => ({ trackSkjemaStartet: vi.fn(), trackSkjemaFullført: vi.fn(), trackSkjemaInnsendingFeilet: vi.fn(), - trackSkjemaSteg: vi.fn(), + trackSkjemaStegStartet: vi.fn(), + trackSkjemaStegFullført: vi.fn(), trackAccordionApnet: vi.fn(), trackAccordionLukket: vi.fn(), trackAlertVist: vi.fn(), diff --git a/tests/hooks/useAmplitude.test.ts b/tests/hooks/useAmplitude.test.ts index 9976224c..187b3d02 100644 --- a/tests/hooks/useAmplitude.test.ts +++ b/tests/hooks/useAmplitude.test.ts @@ -66,7 +66,7 @@ describe("useAnalytics", () => { const { result } = renderHook(() => useAnalytics()); const periode = lagRapporteringsperiode({ id: "123456", rapporteringstype }); - result.current.trackSkjemaSteg({ + result.current.trackSkjemaStegFullført({ periode, stegnavn: "Steg 1", steg: 1, From 9809630c629e37dc4c6870ef66fde8532fd60285 Mon Sep 17 00:00:00 2001 From: Zandra7 Date: Wed, 15 Jan 2025 12:34:06 +0100 Subject: [PATCH 06/24] =?UTF-8?q?Legger=20til=20mulighet=20for=20=C3=A5=20?= =?UTF-8?q?skru=20av=20logging=20til=20Amplitude=20og=20Umami?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .nais/nais.demo.yaml | 2 +- .nais/nais.yaml | 2 ++ .nais/vars-demo.yaml | 3 ++- .nais/vars-dev.yaml | 1 + .nais/vars-prod.yaml | 1 + app/hooks/useAnalytics.ts | 16 ++++++++++------ app/root.tsx | 1 + app/utils/env.utils.ts | 1 + ...useAmplitude.test.ts => useAnalytics.test.ts} | 10 ++++++++++ 9 files changed, 29 insertions(+), 8 deletions(-) rename tests/hooks/{useAmplitude.test.ts => useAnalytics.test.ts} (94%) diff --git a/.nais/nais.demo.yaml b/.nais/nais.demo.yaml index 7dfbb830..43d89ff1 100644 --- a/.nais/nais.demo.yaml +++ b/.nais/nais.demo.yaml @@ -51,7 +51,7 @@ spec: - name: FARO_URL value: {{faro_url}} - name: RUNTIME_ENVIRONMENT - value: {{RUNTIME_ENVIRONMENT}} + value: {{runtime_environment}} - name: SANITY_DATASETT value: {{sanity_datasett}} accessPolicy: diff --git a/.nais/nais.yaml b/.nais/nais.yaml index 26c39824..3083da84 100644 --- a/.nais/nais.yaml +++ b/.nais/nais.yaml @@ -53,6 +53,8 @@ spec: value: {{sanity_datasett}} - name: UMAMI_ID value: {{umami_id}} + - name: SKAL_LOGGE + value: skal_logge accessPolicy: outbound: external: diff --git a/.nais/vars-demo.yaml b/.nais/vars-demo.yaml index e2cd6deb..54df9118 100644 --- a/.nais/vars-demo.yaml +++ b/.nais/vars-demo.yaml @@ -6,6 +6,7 @@ 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" +skal_logge: "true" \ No newline at end of file diff --git a/.nais/vars-dev.yaml b/.nais/vars-dev.yaml index 7562087d..711b663b 100644 --- a/.nais/vars-dev.yaml +++ b/.nais/vars-dev.yaml @@ -13,4 +13,5 @@ umami_id: "ccee3ffe-f3c3-4ef6-8e01-742756847782" replicas: min: 2 max: 2 +skal_logge: "true" diff --git a/.nais/vars-prod.yaml b/.nais/vars-prod.yaml index cbeae932..397386b3 100644 --- a/.nais/vars-prod.yaml +++ b/.nais/vars-prod.yaml @@ -13,3 +13,4 @@ umami_id: "" replicas: min: 2 max: 2 +skal_logge: "true" \ No newline at end of file diff --git a/app/hooks/useAnalytics.ts b/app/hooks/useAnalytics.ts index d365ae74..8a928a60 100644 --- a/app/hooks/useAnalytics.ts +++ b/app/hooks/useAnalytics.ts @@ -44,7 +44,9 @@ export function useAnalytics() { const trackEvent = useCallback( (event: string, props: T = {} as T) => { - if (isLocalOrDemo) { + if (getEnv("SKAL_LOGGE") !== "true") return; + + if (umami && isLocalOrDemo) { umami(event, { skjemanavn, språk, @@ -52,11 +54,13 @@ export function useAnalytics() { }); } - amplitude(event, { - skjemanavn, - språk, - ...props, - }); + if (amplitude) { + amplitude(event, { + skjemanavn, + språk, + ...props, + }); + } }, [umami, amplitude, språk], ); diff --git a/app/root.tsx b/app/root.tsx index 10fda284..a12c823c 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -116,6 +116,7 @@ export async function loader({ request }: LoaderFunctionArgs) { SANITY_DATASETT: process.env.SANITY_DATASETT, GITHUB_SHA: process.env.GITHUB_SHA, UMAMI_ID: process.env.UMAMI_ID, + SKAL_LOGGE: process.env.SKAL_LOGGE, }, fragments, }; diff --git a/app/utils/env.utils.ts b/app/utils/env.utils.ts index fa038182..e089c1d0 100644 --- a/app/utils/env.utils.ts +++ b/app/utils/env.utils.ts @@ -22,6 +22,7 @@ interface IEnv { RUNTIME_ENVIRONMENT: string; SANITY_DATASETT: string; UMAMI_ID: string; + SKAL_LOGGE: string; } export function getEnv(value: keyof IEnv) { diff --git a/tests/hooks/useAmplitude.test.ts b/tests/hooks/useAnalytics.test.ts similarity index 94% rename from tests/hooks/useAmplitude.test.ts rename to tests/hooks/useAnalytics.test.ts index 187b3d02..bd884f5e 100644 --- a/tests/hooks/useAmplitude.test.ts +++ b/tests/hooks/useAnalytics.test.ts @@ -16,6 +16,16 @@ vi.mock("~/hooks/useLocale", () => ({ useLocale: () => ({ locale: "no" }), })); +const env: { [key: string]: string } = { + UMAMI_ID: "", + SKAL_LOGGE: "true", +}; + +vi.mock("~/utils/env.utils", () => ({ + getEnv: (name: string) => env[name], + isLocalOrDemo: false, +})); + describe("useAnalytics", () => { const skjemanavn = "dagpenger-rapportering"; const språk = "no"; From dc298b2ee0fc133ac6751af2efe535972a210200 Mon Sep 17 00:00:00 2001 From: Zandra7 Date: Wed, 15 Jan 2025 14:45:58 +0100 Subject: [PATCH 07/24] Legger til SKAL_LOGGE variabel i .env.example --- .env.example | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.env.example b/.env.example index 9ee75f14..e7e2f2d9 100644 --- a/.env.example +++ b/.env.example @@ -7,4 +7,5 @@ USE_MSW="true" SANITY_DATASETT="development" FARO_URL="http://localhost:12347/collect" GITHUB_SHA="local" -UMAMI_ID="24bd3b5d-f1e6-446c-a551-0bf556592157" \ No newline at end of file +UMAMI_ID="24bd3b5d-f1e6-446c-a551-0bf556592157" +SKAL_LOGGE="true" \ No newline at end of file From 7b14ece1c13eb734cf97d46c25c681cc0b441f0c Mon Sep 17 00:00:00 2001 From: Zandra7 Date: Tue, 21 Jan 2025 09:00:46 +0100 Subject: [PATCH 08/24] =?UTF-8?q?Legger=20til=20tracking=20av=20foretrukke?= =?UTF-8?q?t=20spr=C3=A5k?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/hooks/useAnalytics.ts | 8 ++++++++ app/root.tsx | 3 ++- tests/helpers/setup.ts | 1 + 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/app/hooks/useAnalytics.ts b/app/hooks/useAnalytics.ts index 8a928a60..7d6d5813 100644 --- a/app/hooks/useAnalytics.ts +++ b/app/hooks/useAnalytics.ts @@ -166,6 +166,13 @@ export function useAnalytics() { [trackEvent], ); + const trackForetrukketSprak = useCallback( + (språk: string) => { + trackEvent("foretrukket språk", { språk }); + }, + [trackEvent], + ); + const trackNavigere = useCallback( ({ lenketekst, destinasjon, linkId }: INavigere) => { trackEvent("navigere", { lenketekst, destinasjon, linkId }); @@ -192,6 +199,7 @@ export function useAnalytics() { trackModalApnet, trackModalLukket, trackSprakEndret, + trackForetrukketSprak, trackNavigere, trackFeilmelding, }; diff --git a/app/root.tsx b/app/root.tsx index a12c823c..a272771d 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -198,7 +198,7 @@ export function Layout({ children }: { children: React.ReactNode }) { export default function App() { const { getAppText } = useSanity(); - const { trackSprakEndret } = useAnalytics(); + const { trackSprakEndret, trackForetrukketSprak } = useAnalytics(); initInstrumentation(); @@ -206,6 +206,7 @@ export default function App() { if (typeof document !== "undefined") { setAvailableLanguages(availableLanguages); + trackForetrukketSprak(navigator.language); document.querySelectorAll("a").forEach((a) => { if (!a.getAttribute("data-umami-event")) { diff --git a/tests/helpers/setup.ts b/tests/helpers/setup.ts index 016737e1..4c9099bc 100644 --- a/tests/helpers/setup.ts +++ b/tests/helpers/setup.ts @@ -43,6 +43,7 @@ vi.mock("~/hooks/useAnalytics", () => ({ trackModalApnet: vi.fn(), trackModalLukket: vi.fn(), trackSprakEndret: vi.fn(), + trackForetrukketSprak: vi.fn(), trackNavigere: vi.fn(), trackFeilmelding: vi.fn(), }), From e73246e619641ddede7336f3f6bcb75ac0b37694 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thor=20H=C3=A5kon=20Bredesen?= Date: Tue, 21 Jan 2025 11:44:21 +0100 Subject: [PATCH 09/24] Sjekker om Umami kan logges til --- app/hooks/useAnalytics.ts | 8 +++++++- app/root.tsx | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/hooks/useAnalytics.ts b/app/hooks/useAnalytics.ts index 7d6d5813..e4a17275 100644 --- a/app/hooks/useAnalytics.ts +++ b/app/hooks/useAnalytics.ts @@ -37,7 +37,13 @@ interface IFeilmelding { const skjemanavn = "dagpenger-rapportering"; export function useAnalytics() { - const umami = typeof window !== "undefined" && getEnv("UMAMI_ID") ? window.umami.track : () => {}; + const umami = + typeof window !== "undefined" && + getEnv("SKAL_LOGGE") === "true" && + getEnv("UMAMI_ID") && + window.umami + ? window.umami.track + : undefined; const amplitude = getAmplitudeInstance("dekoratoren"); const { locale: språk } = useLocale(); diff --git a/app/root.tsx b/app/root.tsx index a272771d..596b8682 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -154,7 +154,7 @@ export function Layout({ children }: { children: React.ReactNode }) { {parse(fragments.DECORATOR_HEAD_ASSETS, { trim: true })} - {env.UMAMI_ID && ( + {env.UMAMI_ID && env.SKAL_LOGGE === "true" && ( + )} + + ); +} diff --git a/app/hooks/useAnalytics.ts b/app/hooks/useAnalytics.ts index fc12294e..42b25a5c 100644 --- a/app/hooks/useAnalytics.ts +++ b/app/hooks/useAnalytics.ts @@ -1,9 +1,13 @@ -import { getAmplitudeInstance } from "@navikt/nav-dekoratoren-moduler"; +import { + awaitDecoratorData, + getAmplitudeInstance, + getCurrentConsent, +} from "@navikt/nav-dekoratoren-moduler"; import { useCallback } from "react"; import { IRapporteringsperiode } from "~/models/rapporteringsperiode.server"; import { DecoratorLocale } from "~/utils/dekoratoren.utils"; -import { getEnv, isLocalOrDemo } from "~/utils/env.utils"; +import { getEnv } from "~/utils/env.utils"; import { Rapporteringstype } from "~/utils/types"; import { useLocale } from "./useLocale"; @@ -45,10 +49,7 @@ const skjemanavn = "dagpenger-rapportering"; export function useAnalytics() { const umami = - typeof window !== "undefined" && - getEnv("SKAL_LOGGE") === "true" && - getEnv("UMAMI_ID") && - window.umami + typeof window !== "undefined" && getEnv("UMAMI_ID") && window.umami ? window.umami.track : undefined; const amplitude = getAmplitudeInstance("dekoratoren"); @@ -56,10 +57,15 @@ export function useAnalytics() { const { locale: språk } = useLocale(); const trackEvent = useCallback( - (event: string, props: T = {} as T) => { - if (getEnv("SKAL_LOGGE") !== "true") return; + async (event: string, props: T = {} as T) => { + if (typeof window === "undefined") return; - if (umami && isLocalOrDemo) { + await awaitDecoratorData(); + const { consent } = getCurrentConsent(); + + if (!consent.analytics) return; + + if (umami) { umami(event, { skjemanavn, språk, diff --git a/app/root.tsx b/app/root.tsx index 596b8682..ae5709d7 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -14,11 +14,13 @@ import { } from "@remix-run/react"; import { createClient } from "@sanity/client"; import parse from "html-react-parser"; +import { useEffect, useRef } from "react"; import { uuidv7 } from "uuidv7"; import indexStyle from "~/index.css?url"; import { hasSession } from "../mocks/session"; +import { Umami } from "./components/analytics/Umami"; import { GeneralErrorBoundary } from "./components/error-boundary/GeneralErrorBoundary"; import { ServiceMessage } from "./components/service-message/ServiceMessage"; import { getDecoratorHTML } from "./dekorator/dekorator.server"; @@ -116,7 +118,6 @@ export async function loader({ request }: LoaderFunctionArgs) { SANITY_DATASETT: process.env.SANITY_DATASETT, GITHUB_SHA: process.env.GITHUB_SHA, UMAMI_ID: process.env.UMAMI_ID, - SKAL_LOGGE: process.env.SKAL_LOGGE, }, fragments, }; @@ -154,14 +155,7 @@ export function Layout({ children }: { children: React.ReactNode }) { {parse(fragments.DECORATOR_HEAD_ASSETS, { trim: true })} - {env.UMAMI_ID && env.SKAL_LOGGE === "true" && ( - - )} +