Skip to content

Commit 2ec5607

Browse files
eilifjohanseneilifjohansen
committed
La til side om taksonomi
1 parent 9f9d76b commit 2ec5607

File tree

3 files changed

+291
-0
lines changed

3 files changed

+291
-0
lines changed

‎src/components/theme/Header/Header.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
BookIcon,
44
CodeIcon,
55
AreaChartIcon,
6+
BulletListIcon,
67
BarChartIcon
78
} from "@navikt/aksel-icons";
89
import { Button, Dropdown, Link } from "@navikt/ds-react";
@@ -58,6 +59,14 @@ export default function Header() {
5859
<AreaChartIcon aria-hidden fontSize="1.5rem" />
5960
<span className="whitespace-nowrap">Lag grafer</span>
6061
</Dropdown.Menu.List.Item>
62+
<Dropdown.Menu.List.Item
63+
as={Link}
64+
href="/taksonomi"
65+
className="no-underline"
66+
>
67+
<BulletListIcon aria-hidden fontSize="1.5rem" />
68+
<span className="whitespace-nowrap">Taksonomi</span>
69+
</Dropdown.Menu.List.Item>
6170
<Dropdown.Menu.List.Item
6271
as={Link}
6372
href="https://umami.is/docs"
@@ -96,6 +105,13 @@ export default function Header() {
96105
<AreaChartIcon aria-hidden fontSize="1.5rem" />
97106
<span className="whitespace-nowrap">Lag grafer</span>
98107
</Link>
108+
<Link
109+
href="/taksonomi"
110+
className={linkButton}
111+
>
112+
<BulletListIcon aria-hidden fontSize="1.5rem" />
113+
<span className="whitespace-nowrap">Taksonomi</span>
114+
</Link>
99115
<Link
100116
href="https://umami.is/docs"
101117
className={linkButton}

‎src/pages/Taksonomi.tsx

+273
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
import {
2+
Heading,
3+
VStack,
4+
Table,
5+
Box,
6+
Alert,
7+
ReadMore,
8+
} from '@navikt/ds-react';
9+
import Kontaktboks from '../components/kontaktboks';
10+
11+
const TaksonomiPage = () => {
12+
return (
13+
<div className="w-full max-w-[800px] mx-auto">
14+
<Heading spacing level="1" size="large" className="pt-24 pb-4">
15+
Navs taksonomi for produktanalyser
16+
</Heading>
17+
18+
<p className="text-gray-600 mb-8 text-xl leading-relaxed">
19+
En guide til hvordan du navngir hendelser i Umami for å sikre gode analyser.
20+
</p>
21+
22+
<div className="prose max-w-full prose-lg">
23+
<VStack gap="12">
24+
{/* Motivation Section */}
25+
<section>
26+
<Heading level="2" size="medium" spacing>
27+
Hvorfor bruke taksonomi?
28+
</Heading>
29+
<p>
30+
Med en felles taksonomi blir det lettere å samle inn, analysere og sammenligne
31+
data på tvers av team og løsninger. Dette gir oss bedre innsikt i hvordan
32+
tjenestene våre brukes.
33+
</p>
34+
35+
<Alert variant="info">
36+
<Heading size="small" level="3">
37+
Dette får du med taksonomien
38+
</Heading>
39+
En standard for navngivning av hendelser på tvers av team, som gjør det:
40+
<ul className="mb-10">
41+
<li>Enklere å sammenlikne data fra forskjellige løsninger</li>
42+
<li>Lettere å forstå hva hendelsene betyr</li>
43+
<li>Mulig å gjenbruke kode på tvers av team</li>
44+
</ul>
45+
</Alert>
46+
</section>
47+
48+
{/* Event Naming Standards - Updated to Norwegian approach */}
49+
<section>
50+
<Heading level="2" size="medium" spacing>
51+
1. Slik navngir du hendelser
52+
</Heading>
53+
<p>
54+
Når du sporer hendelser i Umami, bruk naturlig språk som beskriver hva
55+
brukeren gjør. Tenk på hendelsesnavnet som en kort setning.
56+
</p>
57+
58+
<Box padding="6" borderWidth="1" borderColor="border-subtle" borderRadius="medium" className="my-4">
59+
<p className="font-medium">Enkelt prinsipp:</p>
60+
<p className="italic">Bruk vanlig norsk som alle kan forstå.</p>
61+
</Box>
62+
63+
<p>Eksempler på hendelsesnavn:</p>
64+
<ul className="space-y-2">
65+
<li><strong>skjema fullført</strong></li>
66+
<li><strong>knapp klikket</strong></li>
67+
<li><strong>lenke klikket</strong></li>
68+
<li><strong>søk gjennomført</strong></li>
69+
<li><strong>filter valgt</strong></li>
70+
<li><strong>utvidbart panel åpnet</strong></li>
71+
</ul>
72+
73+
<ReadMore header="Se flere hendelsesnavn du kan bruke" className="prose-lg">
74+
<Table size="medium">
75+
<Table.Header>
76+
<Table.Row>
77+
<Table.HeaderCell>Hendelsesnavn</Table.HeaderCell>
78+
<Table.HeaderCell>Når bruker du det?</Table.HeaderCell>
79+
</Table.Row>
80+
</Table.Header>
81+
<Table.Body>
82+
<Table.Row>
83+
<Table.DataCell>utvidbart panel åpnet</Table.DataCell>
84+
<Table.DataCell>Bruker klikker for å vise innhold i et utvidbart panel</Table.DataCell>
85+
</Table.Row>
86+
<Table.Row>
87+
<Table.DataCell>utvidbart panel lukket</Table.DataCell>
88+
<Table.DataCell>Bruker klikker for å skjule innhold</Table.DataCell>
89+
</Table.Row>
90+
<Table.Row>
91+
<Table.DataCell>dialogboks åpnet</Table.DataCell>
92+
<Table.DataCell>En dialogboks dukker opp</Table.DataCell>
93+
</Table.Row>
94+
<Table.Row>
95+
<Table.DataCell>dialogboks lukket</Table.DataCell>
96+
<Table.DataCell>Dialogboksen lukkes</Table.DataCell>
97+
</Table.Row>
98+
<Table.Row>
99+
<Table.DataCell>skjema åpnet</Table.DataCell>
100+
<Table.DataCell>Brukeren starter et skjema</Table.DataCell>
101+
</Table.Row>
102+
<Table.Row>
103+
<Table.DataCell>skjema fullført</Table.DataCell>
104+
<Table.DataCell>Skjemaet sendes inn</Table.DataCell>
105+
</Table.Row>
106+
<Table.Row>
107+
<Table.DataCell>skjemavalidering feilet</Table.DataCell>
108+
<Table.DataCell>Skjemaet har valideringsfeil</Table.DataCell>
109+
</Table.Row>
110+
<Table.Row>
111+
<Table.DataCell>navigasjon klikket</Table.DataCell>
112+
<Table.DataCell>Bruker klikker på navigasjonselement</Table.DataCell>
113+
</Table.Row>
114+
</Table.Body>
115+
</Table>
116+
</ReadMore>
117+
</section>
118+
119+
{/* Parameters Section - Updated with better Norwegian */}
120+
<section>
121+
<Heading level="2" size="medium" spacing>
122+
2. Slik navngir du hendelsesdetaljer
123+
</Heading>
124+
<p>
125+
For å gi mer kontekst til hendelsene kan du legge til ekstra informasjon.
126+
Dette gjør det lettere å forstå nøyaktig hva som skjedde og analysere dataene senere.
127+
</p>
128+
129+
<Box padding="6" borderWidth="1" borderColor="border-subtle" borderRadius="medium" className="my-4">
130+
<p className="font-medium">Navnestruktur:</p>
131+
<p className="italic">Bruk to eller flere ord der første ordet starter med liten bokstav og de neste med stor.</p>
132+
<p className="mt-2">For eksempel: <code>appNavn</code>, <code>skjemaType</code>, <code>knappTekst</code></p>
133+
</Box>
134+
135+
<p>Vanlige eksempler:</p>
136+
<ul className="space-y-2">
137+
<li><code>appNavn: "dagpengesoknad"</code> - hvilken løsning hendelsen kommer fra</li>
138+
<li><code>skjemaType: "foreldrepenger"</code> - hvilket skjema det gjelder</li>
139+
<li><code>knappTekst: "Send søknad"</code> - teksten på knappen som ble klikket</li>
140+
<li><code>valgtSvar: "Ja"</code> - hva brukeren svarte</li>
141+
</ul>
142+
143+
<Alert variant="success">
144+
Ta bare med informasjon som gir verdi når du skal analysere dataene senere.
145+
Tenk gjennom hvilke spørsmål du vil kunne svare på med dataene.
146+
</Alert>
147+
148+
<ReadMore header="Se flere eksempler på ekstra informasjon" className="mt-6 prose-lg">
149+
<Table size="medium">
150+
<Table.Header>
151+
<Table.Row>
152+
<Table.HeaderCell>Navn</Table.HeaderCell>
153+
<Table.HeaderCell>Forklaring</Table.HeaderCell>
154+
<Table.HeaderCell>Eksempel</Table.HeaderCell>
155+
</Table.Row>
156+
</Table.Header>
157+
<Table.Body>
158+
<Table.Row>
159+
<Table.DataCell>appNavn</Table.DataCell>
160+
<Table.DataCell>Navn på løsningen</Table.DataCell>
161+
<Table.DataCell>"dagpengesoknad"</Table.DataCell>
162+
</Table.Row>
163+
<Table.Row>
164+
<Table.DataCell>skjemaType</Table.DataCell>
165+
<Table.DataCell>Type skjema</Table.DataCell>
166+
<Table.DataCell>"foreldrepenger"</Table.DataCell>
167+
</Table.Row>
168+
<Table.Row>
169+
<Table.DataCell>skjemaSteg</Table.DataCell>
170+
<Table.DataCell>Steg i et skjema</Table.DataCell>
171+
<Table.DataCell>"3"</Table.DataCell>
172+
</Table.Row>
173+
<Table.Row>
174+
<Table.DataCell>menyValg</Table.DataCell>
175+
<Table.DataCell>Valgt element i menyen</Table.DataCell>
176+
<Table.DataCell>"hovedmeny"</Table.DataCell>
177+
</Table.Row>
178+
<Table.Row>
179+
<Table.DataCell>knappTekst</Table.DataCell>
180+
<Table.DataCell>Tekst på knappen</Table.DataCell>
181+
<Table.DataCell>"Send inn søknad"</Table.DataCell>
182+
</Table.Row>
183+
<Table.Row>
184+
<Table.DataCell>feilType</Table.DataCell>
185+
<Table.DataCell>Type feil som oppsto</Table.DataCell>
186+
<Table.DataCell>"mangler-fodselsnummer"</Table.DataCell>
187+
</Table.Row>
188+
<Table.Row>
189+
<Table.DataCell>sidenavn</Table.DataCell>
190+
<Table.DataCell>Navn på siden</Table.DataCell>
191+
<Table.DataCell>"personopplysninger"</Table.DataCell>
192+
</Table.Row>
193+
<Table.Row>
194+
<Table.DataCell>valgtSvar</Table.DataCell>
195+
<Table.DataCell>Svaret som ble valgt</Table.DataCell>
196+
<Table.DataCell>"deltid"</Table.DataCell>
197+
</Table.Row>
198+
</Table.Body>
199+
</Table>
200+
</ReadMore>
201+
</section>
202+
203+
{/* Implementation in Umami - Updated to use official Umami approach */}
204+
<section>
205+
<Heading level="2" size="medium" spacing>
206+
3. Implementer i koden
207+
</Heading>
208+
<p>
209+
For å implementere sporingen trenger du sporingskoden fra <a href="/teamwebsites" className="text-blue-500 hover:text-blue-700 underline">oversikten over team-nettsider</a>.
210+
Her er et eksempel på hvordan du kan spore hendelser i tråd med taksonomien:
211+
</p>
212+
213+
<Box padding="8" borderWidth="1" borderColor="border-subtle" borderRadius="medium" className="my-4 bg-gray-50">
214+
<pre className="text-base whitespace-pre-wrap">
215+
{`// Eksempel med Umamis grensesnitt
216+
217+
// Når en bruker klikker på en knapp
218+
function handleKnappKlikk() {
219+
umami.track('knapp klikket', {
220+
appNavn: 'dagpengesoknad',
221+
komponentNavn: 'soknadsskjema',
222+
knappTekst: 'Send inn søknad'
223+
});
224+
}
225+
226+
// Når en bruker fullfører et skjema
227+
function handleSkjemaSendt() {
228+
umami.track('skjema fullført', {
229+
appNavn: 'dagpengesoknad',
230+
komponentNavn: 'soknadsskjema',
231+
skjemaId: 'dagpenger',
232+
skjemaSteg: '4'
233+
});
234+
}`}
235+
</pre>
236+
</Box>
237+
238+
<Alert variant="info">
239+
Start enkelt med få hendelser som gir verdi. Bruk norske navn som alle kan
240+
forstå, og se Umamis dokumentasjon for tekniske detaljer.
241+
</Alert>
242+
</section>
243+
244+
{/* Updated verification section with better Norwegian terms */}
245+
<section>
246+
<Heading level="2" size="medium" spacing>
247+
4. Test og verifiser
248+
</Heading>
249+
<p>
250+
Sjekk alltid at hendelsene blir registrert riktig i Umami.
251+
</p>
252+
253+
<ol className="space-y-3 list-decimal pl-5">
254+
<li>
255+
<strong>Se i Metabase</strong> at hendelsene vises med riktige navn og egenskaper
256+
</li>
257+
<li>
258+
<strong>Bruk Grafbygger</strong> til å sjekke at du kan lage de rapportene du trenger
259+
</li>
260+
<li>
261+
<strong>Del med teamet</strong> for å sikre at alle forstår hva som spores og hvorfor
262+
</li>
263+
</ol>
264+
</section>
265+
266+
<Kontaktboks />
267+
</VStack>
268+
</div>
269+
</div>
270+
);
271+
};
272+
273+
export default TaksonomiPage;

‎src/routes.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Combine from "./pages/Combine.tsx";
77
import Explore from "./pages/Explore.tsx";
88
import Copilot from "./pages/Copilot.tsx";
99
import Validator from "./pages/Validator.tsx";
10+
import Taksonomi from "./pages/Taksonomi.tsx";
1011
import Charts from "./pages/Chartbuilder.tsx";
1112

1213
const routes = [
@@ -18,6 +19,7 @@ const routes = [
1819
{ path: "/datastruktur", component: <Explore /> },
1920
{ path: "/copilot", component: <Copilot /> },
2021
{ path: "/validator", component: <Validator /> },
22+
{ path: "/taksonomi", component: <Taksonomi /> },
2123
{ path: "/grafbygger", component: <Charts /> }
2224
];
2325

0 commit comments

Comments
 (0)