Analyse til amplitude og umami

index.html

@@ -27,6 +27,14 @@
                 {{{SETTINGS}}}
             })()
         </script>
+        <script
+            defer
+            src="/js/sporing.js"
+            data-host-url="https://umami.nav.no"
+            data-website-id={{{VITE_UMAMI_TRACKING_ID}}}
+            data-auto-track="false"
+            data-global-name="minsideUmami"
+        ></script>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <main id="app"></main>
 

nais/demo-devlik.yaml

@@ -28,8 +28,11 @@ spec:
       value: {{{ commit }}}
     - name: MILJO
       value: demo
+    - name: VITE_UMAMI_TRACKING_ID
+      value: 16cf7325-ffda-4759-9657-4215b91eb3fd
   accessPolicy:
     outbound:
       external:
         - host: fakedings.intern.dev.nav.no
         - host: storage.googleapis.com
+        - host: umami.nav.no

nais/demo-prodlik.yaml

@@ -26,8 +26,11 @@ spec:
       value: {{{ commit }}}
     - name: MILJO
       value: demo
+    - name: VITE_UMAMI_TRACKING_ID
+      value: 16cf7325-ffda-4759-9657-4215b91eb3fd
   accessPolicy:
     outbound:
       external:
         - host: fakedings.intern.dev.nav.no
         - host: storage.googleapis.com
+        - host: umami.nav.no

nais/dev-gcp.yaml

@@ -37,6 +37,8 @@ spec:
       value: {{{commit}}}
     - name: MILJO
       value: dev
+    - name: VITE_UMAMI_TRACKING_ID
+      value: 16cf7325-ffda-4759-9657-4215b91eb3fd
   accessPolicy:
     outbound:
       external:
@@ -46,6 +48,7 @@ spec:
         - host: aareg-innsyn-arbeidsgiver-api.dev-fss-pub.nais.io
         - host: arbeidsplassen.intern.dev.nav.no
         - host: storage.googleapis.com
+        - host: umami.nav.no
       rules:
         - application: min-side-arbeidsgiver-api
         - application: notifikasjon-bruker-api

nais/prod-gcp.yaml

@@ -37,6 +37,8 @@ spec:
       value: {{{commit}}}
     - name: MILJO
       value: prod
+    - name: VITE_UMAMI_TRACKING_ID
+      value: 3ab987de-cf5c-47a9-a04d-bcf6316f2204
   accessPolicy:
     outbound:
       external:
@@ -45,6 +47,7 @@ spec:
         - host: aareg-innsyn-arbeidsgiver-api.prod-fss-pub.nais.io
         - host: arbeidsplassen.nav.no
         - host: storage.googleapis.com
+        - host: umami.nav.no
       rules:
         - application: min-side-arbeidsgiver-api
         - application: notifikasjon-bruker-api

server/server.js

@@ -26,6 +26,7 @@ const {
     LOGIN_URL = '',
     NAIS_CLUSTER_NAME = 'local',
     MILJO = 'local',
+    VITE_UMAMI_TRACKING_ID,
 } = process.env;
 
 const log_events_counter = new Prometheus.Counter({
@@ -166,6 +167,7 @@ const indexHtml = Mustache.render(readFileSync(path.join(BUILD_PATH, 'index.html
                 GIT_COMMIT: '${GIT_COMMIT}',
             }
         `,
+    VITE_UMAMI_TRACKING_ID: VITE_UMAMI_TRACKING_ID,
 });
 
 const proxyOptions = {

src/GeneriskeElementer/LenkeMedLogging.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, MouseEventHandler, ReactNode } from 'react';
 import {BodyShort, Link as DsLink, LinkProps } from '@navikt/ds-react';
-import {loggNavigasjon} from '../utils/funksjonerForAmplitudeLogging';
+import {loggNavigasjon} from '../utils/analytics';
 import { useLocation, Link as ReactLink } from 'react-router-dom';
 
 export interface Props extends LinkProps {

src/GeneriskeElementer/LenkepanelMedLogging.tsx

@@ -1,5 +1,5 @@
 import {MouseEventHandler} from 'react';
-import {loggNavigasjon} from '../utils/funksjonerForAmplitudeLogging';
+import {loggNavigasjon} from '../utils/analytics';
 import {Link, LinkProps, useLocation} from 'react-router-dom';
 import {LinkPanel, LinkPanelProps} from "@navikt/ds-react";
 

src/Pages/Hovedside/AktueltRubrikk.tsx

@@ -1,6 +1,6 @@
 import { Heading, LinkPanel } from '@navikt/ds-react';
 import React, { useEffect } from 'react';
-import { loggNavigasjonTags } from '../../utils/funksjonerForAmplitudeLogging';
+import { loggNavigasjonTags } from '../../utils/analytics';
 import { DisplayBetween, shouldDisplay } from '../../GeneriskeElementer/DisplayBetween';
 import { useLocation } from 'react-router-dom';
 import './AktueltRubrikk.css';

src/Pages/Hovedside/Kalenderavtaler.tsx

@@ -13,7 +13,7 @@ import { gql, TypedDocumentNode, useQuery } from '@apollo/client';
 import {
     finnBucketForDagerTilDato,
     loggNavigasjonTags,
-} from '../../utils/funksjonerForAmplitudeLogging';
+} from '../../utils/analytics';
 import amplitude from '../../utils/amplitude';
 import { useOrganisasjonsDetaljerContext } from '../OrganisasjonsDetaljerContext';
 

src/Pages/Hovedside/Tjenestebokser/Tjenesteboks.tsx

@@ -3,7 +3,7 @@ import './Tjenesteboks.css';
 import { Heading } from '@navikt/ds-react';
 import amplitude from '../../../utils/amplitude';
 import { ChevronRightIcon } from '@navikt/aksel-icons';
-import { loggNavigasjon } from '../../../utils/funksjonerForAmplitudeLogging';
+import { loggNavigasjon } from '../../../utils/analytics';
 import { useLocation } from 'react-router-dom';
 
 interface Props {

src/Pages/OrganisasjonsDetaljerProvider.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
-import { useLoggBedriftValgtOgTilganger } from '../utils/funksjonerForAmplitudeLogging';
+import { useLoggBedriftValgtOgTilganger } from '../utils/analytics';
 import { useSaker } from './Saksoversikt/useSaker';
 import { SakSortering } from '../api/graphql-types';
 import { Set } from 'immutable';

src/Pages/Pages.tsx

@@ -13,7 +13,7 @@ import { AlertsProvider } from './Alerts';
 import { OrganisasjonerOgTilgangerProvider } from './OrganisasjonerOgTilgangerProvider';
 import { OrganisasjonsDetaljerProvider } from './OrganisasjonsDetaljerProvider';
 import OmVirksomheten from './OmVirksomheten/OmVirksomheten';
-import { loggSidevisning } from '../utils/funksjonerForAmplitudeLogging';
+import { loggSidevisning } from '../utils/analytics';
 import './Pages.css';
 import { NotifikasjonWidgetProvider } from '@navikt/arbeidsgiver-notifikasjon-widget';
 import { BannerMedBedriftsmeny, Brodsmulesti, SaksoversiktBanner } from './Banner';

src/Pages/Saksoversikt/FilterChips.tsx

@@ -6,7 +6,7 @@ import { Set } from 'immutable';
 import { count, flatUtTre } from '../../utils/util';
 import { Organisasjon } from '../OrganisasjonerOgTilgangerContext';
 import { Collapse, Expand } from '@navikt/ds-icons';
-import { amplitudeChipClick } from '../../utils/funksjonerForAmplitudeLogging';
+import { amplitudeChipClick } from '../../utils/analytics';
 import { useOrganisasjonerOgTilgangerContext } from '../OrganisasjonerOgTilgangerContext';
 import { useSaksoversiktContext } from './SaksoversiktProvider';
 

src/Pages/Saksoversikt/LagreFilter.tsx

@@ -14,7 +14,7 @@ import { ModalMedÅpneknapp } from '../../GeneriskeElementer/ModalMedKnapper';
 import { useRemoteStorage } from '../../hooks/useRemoteStorage';
 import { Set } from 'immutable';
 import { v4 as uuidv4 } from 'uuid';
-import { useLoggKlikk } from '../../utils/funksjonerForAmplitudeLogging';
+import { useLoggKlikk } from '../../utils/analytics';
 import './LagreFilter.css';
 import { equalFilter, Filter, useSaksoversiktContext } from './SaksoversiktProvider';
 import { OppgaveFilterType, OppgaveTilstand, SakSortering } from '../../api/graphql-types';

src/Pages/Saksoversikt/Saksfilter/Inntektsmelding/OpprettManuellInntektsmeldingModal.tsx

@@ -7,7 +7,7 @@ import {
     opprettInntektsmeldingSvangerskapspenger,
     opprettInntektsmeldingURL,
 } from '../../../../lenker';
-import { loggNavigasjon } from '../../../../utils/funksjonerForAmplitudeLogging';
+import { loggNavigasjon } from '../../../../utils/analytics';
 import amplitude from '../../../../utils/amplitude';
 
 interface Props {

src/Pages/Saksoversikt/SaksoversiktProvider.tsx

@@ -11,7 +11,7 @@ import { useSessionStateSaksoversikt } from './useOversiktSessionStorage';
 import { useSaker } from './useSaker';
 import { SIDE_SIZE } from './Saksoversikt';
 import amplitude from '../../utils/amplitude';
-import { finnBucketForAntall } from '../../utils/funksjonerForAmplitudeLogging';
+import { finnBucketForAntall } from '../../utils/analytics';
 import {
     OppgaveFilterInfo, OppgaveFilterType,
     Sak,

src/global.d.ts

@@ -0,0 +1,5 @@
+interface Window {
+    minsideUmami?: {
+        track: (eventName: string, eventData?: Record<string, any>) => void;
+    };
+}

src/utils/funksjonerForAmplitudeLogging.ts → src/utils/analytics.ts

@@ -4,6 +4,7 @@ import { Hovedenhet, useUnderenhet } from '../api/enhetsregisteretApi';
 import { useLocation } from 'react-router-dom';
 import { useEffect } from 'react';
 import { NAVtjenesteId } from '../altinn/tjenester';
+import { getConsent } from './consent';
 
 interface EventProps {
     url: string;
@@ -16,10 +17,18 @@ interface EventProps {
     sektor?: string;
 }
 
+const logAnalyticsEvent = (eventName: string, eventData: Record<string, any>) => {
+    getConsent().then((consent) => {
+        if (!consent || !consent.analytics) return;
+        window.minsideUmami?.track(eventName, { ...eventData, origin: 'min-side-arbeidsgiver' });
+        amplitude.logEvent(eventName, eventData);
+    });
+};
+
 const baseUrl = `https://arbeidsgiver.nav.no/min-side-arbeidsgiver`;
 
 export const loggSidevisning = (pathname: string) => {
-    amplitude.logEvent('sidevisning', {
+    logAnalyticsEvent('sidevisning', {
         url: `${baseUrl}${pathname}`,
         innlogget: true,
     });
@@ -108,7 +117,7 @@ export const useLoggBedriftValgtOgTilganger = (org: OrganisasjonInfo | undefined
             virksomhetsinfo.antallAnsatte = finnBucketForAntall(underenhet.antallAnsatte);
         }
 
-        amplitude.logEvent('virksomhet-valgt', virksomhetsinfo);
+        logAnalyticsEvent('virksomhet-valgt', virksomhetsinfo);
     }, [org, underenhet, isLoading]);
 };
 
@@ -139,21 +148,22 @@ export const loggNavigasjonTags = (
         url: `${baseUrl}${currentPagePath}`,
         ...tags,
     };
-    amplitude.logEvent('navigere', navigasjonsInfo);
+    logAnalyticsEvent('navigere', navigasjonsInfo);
 };
 
 export const useLoggKlikk = () => {
     const { pathname } = useLocation();
-    return (knapp: string, annet: Record<string, any> = {}) =>
-        amplitude.logEvent('klikk', {
+    return (knapp: string, annet: Record<string, any> = {}) => {
+        logAnalyticsEvent('klikk', {
             knapp,
             pathname,
             ...annet,
         });
+    };
 };
 
 export const amplitudeChipClick = (kategori: string, filternavn: string) => {
-    amplitude.logEvent('chip-click', {
+    logAnalyticsEvent('chip-click', {
         kategori: kategori,
         filternavn: filternavn,
     });

src/utils/consent.ts

@@ -0,0 +1,24 @@
+import { awaitDecoratorData, getCurrentConsent } from '@navikt/nav-dekoratoren-moduler';
+
+let cachedConsent: Consent | null = null;
+
+interface Consent {
+    analytics: boolean;
+    surveys: boolean;
+}
+
+export const getConsent = async (): Promise<Consent | null> => {
+    if (cachedConsent !== null) {
+        return cachedConsent;
+    }
+
+    try {
+        await awaitDecoratorData();
+        const { consent } = getCurrentConsent();
+        cachedConsent = consent;
+        return consent;
+    } catch (error) {
+        console.error('Failed to retrieve consent:', error);
+        return null;
+    }
+};

tsconfig.build.json

@@ -27,6 +27,7 @@
     "src",
     "vite.config.ts",
     "vite-env.d.ts",
+    "src/global.d.ts",
   ],
   "exclude": [
     "**/tests/*",

tsconfig.json

@@ -12,7 +12,8 @@
     "vite.config.ts",
     "vite-env.d.ts",
     "./vitest.config.ts",
-    "./vitest.setup.ts"
+    "./vitest.setup.ts",
+    "src/global.d.ts",
   ],
   "exclude": []
 }