Cookiebanner + Umami tracking

aksel.nav.no/website/components/utils/get-current-environment.ts

@@ -0,0 +1,20 @@
+"use client";
+
+export const classifyTraffic = () => {
+  const isProdUrl = () => window.location.host === "aksel.nav.no";
+  const isPreview = () => !!document.getElementById("exit-preview-id");
+  const isExample = () => window.location.pathname.startsWith("/eksempler/");
+  const isTemplate = () => window.location.pathname.startsWith("/templates/");
+  const isAdmin = () => window.location.pathname.startsWith("/admin/");
+
+  if (
+    isProdUrl() &&
+    !isPreview() &&
+    !isExample() &&
+    !isTemplate() &&
+    !isAdmin()
+  ) {
+    return "organic";
+  }
+  return "polluted";
+};

aksel.nav.no/website/components/website-modules/ConsentBanner.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import Link from "next/link";
+import Script from "next/script";
+import { useEffect, useRef, useState } from "react";
+import { Cookies } from "typescript-cookie";
+import { BodyLong, Button, Modal } from "@navikt/ds-react";
+import { classifyTraffic } from "../utils/get-current-environment";
+
+const CONSENT_TRACKER_ID = "aksel-consent";
+
+type CONSENT_TRACKER_STATE =
+  | "undecided"
+  | "accepted"
+  | "rejected"
+  | "no_action";
+
+type CookieData = {
+  createdAt: string;
+  updatedAt: string;
+  version: number;
+  consents: {
+    tracking?: CONSENT_TRACKER_STATE;
+  };
+};
+
+export const getStorageAcceptedTracking = () => {
+  const rawState = (Cookies.get(CONSENT_TRACKER_ID) ??
+    sessionStorage.getItem(CONSENT_TRACKER_ID)) as string;
+
+  if (!rawState) {
+    return "undecided";
+  }
+
+  const cookieData = JSON.parse(rawState) as CookieData;
+
+  return cookieData.consents.tracking as CONSENT_TRACKER_STATE;
+};
+
+export const setStorageAcceptedTracking = (state: CONSENT_TRACKER_STATE) => {
+  const cookieData: CookieData = {
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    version: 1,
+    consents: {},
+  };
+
+  cookieData.consents.tracking = state;
+
+  const cookieJson = JSON.stringify(cookieData);
+
+  if (state === "no_action") {
+    sessionStorage.setItem(CONSENT_TRACKER_ID, cookieJson);
+    return;
+  }
+
+  Cookies.set(CONSENT_TRACKER_ID, cookieJson, {
+    expires: 365,
+    domain: "aksel.ansatt.dev.nav.no",
+  });
+};
+
+/*
+ * close handler will always run after both clicking a button or the 'X'
+ * therefore we have to check if the user closed via one of the buttons
+ * (a cookie or sessionStorage was set) or if it was simply closed via the 'X' (no action taken)
+ * this is where we can then act on "no action taken"*/
+// NOTE: maybe we should have a specific handler for "no action",
+// that is run when either clicking the 'x' or clicking outside (when applicable)
+// now i have to check for side effects (or store separate state)
+// to detect it like checking for cookies/sessionStorage
+const closeHandler = () => {
+  const rawState = (Cookies.get(CONSENT_TRACKER_ID) ??
+    sessionStorage.getItem(CONSENT_TRACKER_ID)) as string;
+
+  if (!rawState) {
+    setStorageAcceptedTracking("no_action");
+  }
+};
+
+export const ConsentBanner = () => {
+  const ref = useRef<HTMLDialogElement>(null);
+  const [umamiTag, setUmamiTag] = useState<string | undefined>();
+  const [clientAcceptsTracking, setClientAcceptsTracking] = useState(false);
+
+  useEffect(() => {
+    const consentAnswer = getStorageAcceptedTracking();
+
+    const disabledModalParam = new URLSearchParams(window.location.search).get(
+      "no_consent_modal",
+    );
+    if (consentAnswer === "undecided" && !disabledModalParam) {
+      ref.current?.showModal();
+    }
+
+    setUmamiTag(classifyTraffic());
+    setClientAcceptsTracking(getStorageAcceptedTracking() === "accepted");
+  }, []);
+
+  return (
+    <div>
+      {umamiTag && (
+        <Script
+          defer
+          src="https://cdn.nav.no/team-researchops/sporing/sporing.js"
+          data-host-url="https://umami.nav.no"
+          data-website-id="7b9fb2cd-40f4-4a30-b208-5b4dba026b57"
+          data-auto-track={clientAcceptsTracking}
+          data-tag={umamiTag}
+        ></Script>
+      )}
+      <Modal
+        ref={ref}
+        header={{ heading: "Velg hvilke informasjonskapsler Aksel får bruke" }}
+        onClose={closeHandler}
+      >
+        <Modal.Body>
+          <BodyLong className="mb-2">
+            Nødvendige informasjonskapsler sørger for at nettstedet fungerer og
+            er sikkert, og kan ikke velges bort. Andre brukes til statistikk og
+            analyse. Godkjenner du alle, hjelper du oss å lage bedre nettsider
+            og tjenester.{" "}
+            <Link
+              href="/side/personvernerklaering?no_consent_modal=true"
+              onClick={() => {
+                ref.current?.close();
+              }}
+            >
+              Mer om våre informasjonskapsler.
+            </Link>
+          </BodyLong>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button
+            type="button"
+            onClick={() => {
+              setStorageAcceptedTracking("accepted");
+              // NOTE: umami _should_ exist on window object here (loaded via <Script>)
+              // we call track manually this _one_ time to ensure the current page is
+              // accounted for, any new page loads will be captured by data-auto-track
+              // https://umami.is/docs/tracker-configuration
+              umami.track();
+              ref.current?.close();
+            }}
+          >
+            Godkjenn alle
+          </Button>
+          <Button
+            type="button"
+            onClick={() => {
+              setStorageAcceptedTracking("rejected");
+              ref.current?.close();
+            }}
+          >
+            Bare nødvendige
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
+};

aksel.nav.no/website/e2e/search.e2e.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test.describe("Check website search", () => {
   test("Check newest article list", async ({ page }) => {
-    await page.goto("http://localhost:3000/");
+    await page.goto("http://localhost:3000/?no_consent_modal=true");
     await page.waitForLoadState("domcontentloaded");
     await page.waitForTimeout(5000);
     await page.getByRole("button", { name: "Søk" }).click();
@@ -16,7 +16,7 @@ test.describe("Check website search", () => {
   });
 
   test("Test searching for 'link'", async ({ page }) => {
-    await page.goto("http://localhost:3000/");
+    await page.goto("http://localhost:3000/?no_consent_modal=true");
     await page.waitForLoadState("domcontentloaded");
     await page.waitForTimeout(5000);
     await page.getByRole("button", { name: "Søk" }).click();

aksel.nav.no/website/next.config.js

@@ -12,7 +12,7 @@ const ContentSecurityPolicy = `
   img-src 'self' cdn.sanity.io ${dekoratorUrl} https://avatars.githubusercontent.com data: ${cdnUrl} ${hotjarUrl};
   script-src 'self' ${dekoratorUrl} ${cdnUrl} ${hotjarUrl} https://in2.taskanalytics.com/tm.js 'nonce-4e1aa203a32e' 'unsafe-eval';
   style-src 'self' ${dekoratorUrl} ${cdnUrl} ${hotjarUrl} 'unsafe-inline';
-  connect-src 'self' ${dekoratorUrl} ${cdnUrl} ${hotjarUrl} https://*.hotjar.io wss://*.hotjar.com https://raw.githubusercontent.com/navikt/ https://hnbe3yhs.apicdn.sanity.io wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://in2.taskanalytics.com/03346;
+  connect-src 'self' ${dekoratorUrl} ${cdnUrl} ${hotjarUrl} https://*.hotjar.io wss://*.hotjar.com https://raw.githubusercontent.com/navikt/ https://hnbe3yhs.apicdn.sanity.io wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://umami.nav.no https://in2.taskanalytics.com/03346;
   frame-ancestors 'self' localhost:3000;
   media-src 'self' ${cdnUrl} cdn.sanity.io;
   frame-src 'self' https://web.microsoftstream.com localhost:3000 https://aksel.ekstern.dev.nav.no;

aksel.nav.no/website/package.json

@@ -75,6 +75,7 @@
     "swr": "^1.1.2",
     "tailwindcss": "^3.3.3",
     "tinycolor2": "^1.6.0",
+    "typescript-cookie": "^1.0.6",
     "zod": "^3.22.4"
   },
   "_note": "When upgrading @axe-core/playwright, try removing the resolution entry in the root package.json",
@@ -89,6 +90,7 @@
     "@types/jscodeshift": "^0.11.11",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.0.0",
+    "@types/umami": "^2.10.0",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
     "copyfiles": "^2.4.1",

aksel.nav.no/website/pages/_app.tsx

@@ -4,6 +4,7 @@ import "@navikt/ds-tokens/darkside-css";
 import { useCheckAuth } from "@/hooks/useCheckAuth";
 import { useHashScroll } from "@/hooks/useHashScroll";
 import { SanityDataContext } from "@/hooks/useSanityData";
+import { ConsentBanner } from "@/web/ConsentBanner";
 import { BaseSEO } from "@/web/seo/BaseSEO";
 import "../components/styles/index.css";
 
@@ -33,6 +34,7 @@ function App({ Component, pageProps, router }: AppProps) {
 
   return (
     <>
+      <ConsentBanner />
       <BaseSEO path={router.asPath} />
       <SanityDataContext.Provider
         value={{ id: pageProps?.id ?? pageProps?.page?._id, validUser }}

aksel.nav.no/website/tsconfig.json

@@ -15,7 +15,7 @@
     "jsx": "preserve",
     "noImplicitAny": false,
     "incremental": true,
-    "types": ["node"],
+    "types": ["node", "umami"],
     "paths": {
       "@/sb-util": ["./.storybook/utils.tsx"],
       "@/types": ["./components/types/index.ts"],

yarn.lock

@@ -6643,6 +6643,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/umami@npm:^2.10.0":
+  version: 2.10.0
+  resolution: "@types/umami@npm:2.10.0"
+  checksum: 10/8e489202966fb6429ac079f10dc0717fe44daeedbf37927e326017b9eed9c821dc6bf5d9aaad69fd4ce5eb92df0e53fafb57c9b47185f73a547969e4db365d66
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^3.0.0":
   version: 3.0.3
   resolution: "@types/unist@npm:3.0.3"
@@ -23565,6 +23572,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript-cookie@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "typescript-cookie@npm:1.0.6"
+  checksum: 10/105d4774ee847daf3e5e9a4433746eb34cd40feb1703bc7c9bde0bfc77c94ee4318386b94af66f9380fd24fa36600cc8e730ead7dfa67097ebbeff158e8020c3
+  languageName: node
+  linkType: hard
+
 "typescript@npm:5.5.4":
   version: 5.5.4
   resolution: "typescript@npm:5.5.4"
@@ -24775,6 +24789,7 @@ __metadata:
     "@types/jscodeshift": "npm:^0.11.11"
     "@types/react": "npm:^18.3.11"
     "@types/react-dom": "npm:^18.0.0"
+    "@types/umami": "npm:^2.10.0"
     autoprefixer: "npm:^10.4.20"
     babel-loader: "npm:^9.1.3"
     boring-avatars: "npm:1.10.1"
@@ -24819,6 +24834,7 @@ __metadata:
     tinycolor2: "npm:^1.6.0"
     tsx: "npm:^4.19.1"
     typescript: "npm:5.5.4"
+    typescript-cookie: "npm:^1.0.6"
     vitest: "npm:^2.1.8"
     zod: "npm:^3.22.4"
   languageName: unknown