import { Meta } from '@storybook/addon-docs/blocks';
import { ChartBarIcon } from '@phosphor-icons/react';
import { JumpTo } from '../../.storybook/blocks';
import { Alert, Button, Popover, Prose, Details, Table } from '../react';
import { HeartIcon } from '@phosphor-icons/react';

<Meta title="Designsystem/Analyse" />
# <ChartBarIcon /> Analyse

> Å forstå bruksmønster er viktig for å kunne forbedre og videreutvikle Mattilsynet tjenester.
> For å ivareta personvern og sikre at bruksdata kan forstås likt på tvers av tjenester, har vi en felles analysestandard.

<JumpTo />

{/* https://matomo.org/faq/tag-manager/how-to-use-the-clicked-data-attribute-variable/ */}

## Oppsett
- Bruk funksjonen `analytics` for å logge til [Mattilsynets analyseverktøy](https://mattilsynet.matomo.cloud/)
- Hver applikasjon trenger en `matomoId` - dette har teamet, eller dere kan [be om å få en](https://mattilsynet-hq.slack.com/archives/C03FAJ7N1EU)
- Husk å sette `enabled: false` for test-miljøer (`localhost` er *default* av)
- Husk å sette `consent: 'custom'` dersom du har implementert eget [samtykkebanner](https://www.datatilsynet.no/personvern-pa-ulike-omrader/internett-og-apper/bruk-av-informasjonskapsler-og-andre-sporingsteknologier/)
- **Køsystem:** Hvis `init` ikke er kjørt, vil alle `analytics`-kall legges i kø og vente på `init`
- **React?** Husk `"use client"` i filer som bruker `analytics`
- **Sette opp analyse for første gang?** [Snakk med oss i designsystem](https://mattilsynet-hq.slack.com/archives/C03FAJ7N1EU), så hjelper vi til <HeartIcon style={{ verticalAlign: -3 }} />

<Details>
<Details.Summary>Hva gjør `analytics` som jeg ikke får ved å bruke Matomo direkte?</Details.Summary>

Mattilsynet bruker for tiden [Matomo](https://matomo.org/) som analyseverktøy, og `analytics` er en wrapper rundt Matomos [JavaScript API](https://developer.matomo.org/guides/tracking-javascript-guide). Dette gir oss: 
- en felles standard for hvordan vi logger data
- en felles [melding om informasjonskapsler i henhold til Ekomloven](https://www.datatilsynet.no/personvern-pa-ulike-omrader/internett-og-apper/bruk-av-informasjonskapsler-og-andre-sporingsteknologier/8.-bruk-klare-og-enkle-formuleringer-i-knapper-eller-tilsvarende-losninger/)
- automatisk [logging av en rekke hendelser](#automatisk-analyse)
- automatisk [logging av utgående lenker og nedlastingsknapper](https://developer.matomo.org/guides/tracking-javascript-guide#download-and-outlink-tracking)
- deaktivert [heatmap and session recording](https://developer.matomo.org/guides/heatmap-session-recording/setup) fordi dette krever samtykke ([kan overstyres](#matomo-funksjoner))
- mulighet for å enkelt bytte ut Matomo eller legge til flere analysetjenester på sikt

</Details>

```
import { analytics } from '@mattilsynet/design';

analytics('init', {
  matomoId: string | number,   // Required (if no matomoTagManagerId): Your site ID
  matomoTagManagerId: string,  // Required (if no matomoId): Your container ID
  enabled?: boolean | 'debug', // 'debug' console.logs only, default is true unless localhost
  consent?: 'custom' | true, // Use 'custom' if you have implemented your own cookie consent
});
```

## Sidevisninger
- Send en `pageview` hver gang en side laster
- **Single Page Application?** Send også `pageview` ved navigering - <Button data-popover="inline" popoverTarget="example-react-router">se eksempel med react router</Button>

```
analytics('pageview', {
  title?: string, // Optional: document.title is default
  url?: string,   // Optional: location.href is default
});
```

<Popover id="example-react-router">
<Prose>
**Eksempel med React Router:**
```TSX
function MyApp (){
  return (
    <BrowserRouter>
      <TrackPageview />
      {/* YOUR ROUTES HERE */}
    </BrowserRouter>
  );
}

function TrackPageview() {
  const location = useLocation();
  useEffect(() => analytics('pageview'), [location]);
  return null;
}
```
</Prose>
</Popover>

## Hendelser
- Send en `event` når du ønsker å lære om brukerens adferd
- Dette kan være f.eks. ved scroll, filtering, trykk, etc
- Husk å aldri sende inn personopplysninger

```
analytics('event', {
  category: string, // Required: The category of the event, e.g., 'video', 'link', 'form'
  action: string,   // Required: The action performed, e.g., 'play', 'click', 'submit'
  name?: string,    // Optional: The name of the item interacted with, e.g., video title, form name
  value?: number,   // Optional: A numeric value associated with the event, e.g., product price, video completion percentage
});
```

## Automatisk analyse
- Ved å benytte `analytics`, loggføres `submit`, `click` og `change` hendelser automatisk
- Bruk `data-analytics="ignore"` på elementer (eller foreldre til elementer) for å deaktivere logging på et element
- Bruk `data-analytics-category`,  `data-analytics-action` og/eller `data-analytics-name`  på elementer hvis du ønsker å overstyre standardverdier - <Button data-popover="inline" popoverTarget="example-data-attributes">se eksempler</Button>
- **Merk:** `data-analytics-category` satt på `form` arves automatisk av alle skjema elementer, så du slipper å sette kategori på hvert enkelt input
- **Merk:** `submit` vil kun fungere dersom du benytter standard `<form>` element

<Popover id="example-data-attributes">
```HTML
<!-- Overstyr navn så vi unngår å logge personopplysninger: -->
<a href="/profil" data-analytics-name="Brukernavn">Navn navnesen</a>

<!-- Overstyr kategori for å enklere skille hendelser i loggen: -->
<input data-analytics-category="Filter" type="range" name="vekt" />

<!-- Overstyr kategori og handling: -->
<button data-analytics-category="Filter" data-analytics-action="reset">Nullstill filter</button>

<!-- Ignorer element helt: -->
<u-details>
  <u-summary data-analytics="ignore">Ignorer dette åpne/lukk-området</u-summary>
</u-details>

<!-- Ignorer område helt: -->
<div data-analytics="ignore">
  <button type="button">Ignorer alle disse knappene</button>
  <button type="button">Ignorer alle disse knappene</button>
  <button type="button">Ignorer alle disse knappene</button>
</div>
```
</Popover>

<Alert data-color="warning">
**Viktig:** Dersom elementer innholder personopplysninger, for eksempel navn i en knapp, må du sette `data-analytics-name=""` for å unngå personopplysninger i loggene
</Alert>

<Table data-size="sm">
  <thead>
    <tr><th>Category</th><th>Action</th><th>Name</th></tr>
  </thead>
  <tbody>
    <tr><td>`Breadcrumbs`</td><td>`navigate`</td><td>Breadcrumb text</td></tr>
    <tr><td>`Button`</td><td>`click`</td><td>Button text</td></tr>
    <tr><td>`Card`</td><td>`click` | `navigate`</td><td>Card heading or text</td></tr>
    <tr><td>`Chip`</td><td>`click` | `remove`</td><td>Chip text</td></tr>
    <tr><td>`Details`</td><td>`open`</td><td>Summary text</td></tr>
    <tr><td>`Dialog`</td><td>`open`</td><td>Heading text</td></tr>
    <tr><td>`Expand`</td><td>`open`</td><td>Button text</td></tr>
    <tr><td>`Form`</td><td>`change` | `submit`</td><td>Relevant label, legend or heading</td></tr>
    <tr><td>`HelpText`</td><td>`open`</td><td>Aria label text</td></tr>
    <tr><td>`Link`</td><td>`navigate` | `anchor` | `email` | `download`</td><td>Link text</td></tr>
    <tr><td>`Map Marker`</td><td>`open`</td><td>Marker label</td></tr>
    <tr><td>`Pagination`</td><td>`navigate`</td><td>Pagination item text</td></tr>
    <tr><td>`Popover`</td><td>`open`</td><td>Opener button text</td></tr>
    <tr><td>`Sidebar`</td><td>`minimize` | `expand`</td><td>Toggle text</td></tr>
    <tr><td>`Tab`</td><td>`navigate`</td><td>Tab text</td></tr>
    <tr><td>`Table`</td><td>`sort`</td><td>Column heading text</td></tr>
  </tbody>
</Table>


## Søk
- Send en `search` for å forstå hva brukerne leter etter

```
analytics('search', {
  query: string,      // Required: The text user searched for
  category?: string,  // Optional: The category the search was performed in
  results?: number,   // Optional: The number of results returned
});
```

## Matomo-funksjoner
- Mattilsynets analysetjeneste [Matomo har flere funksjoner](https://developer.matomo.org/guides/tracking-javascript-guide), men
disse krever ofte konfigurasjon (som [A/B testing](https://developer.matomo.org/guides/ab-tests/browser)), samtykke (som [heatmap og session recording](https://developer.matomo.org/guides/heatmap-session-recording/setup)) eller kan negativt påvirke ytelse (som [content impressions](https://developer.matomo.org/guides/tracking-javascript-guide#track-all-content-impressions-within-a-page)).
- Disse funksjonene er derfor kun tilgjengelig bruk av `analytics('matomo', [...args])`, som er identisk med [Matomos javascript API](https://developer.matomo.org/guides/tracking-javascript-guide) `_paq.push([...args])`.

**Eksempel for å aktivere heatmap og session recording:**

```
analytics('matomo', ['HeatmapSessionRecording::enable']);
```

## Debugging
- Du kan til en hver tid skru på "debug", for å se hva som blir logget
- Debug er kun aktivt på den siden du aktiverer det på - det vil automatisk være av igjen dersom du endrer url eller laster siden på nytt
1. Åpne console i nettleseren (Høyreklikk &rarr; Inspiser &rarr; Console)
2. Lim inn `window._mtdsTracking.enabled = 'debug'` i console og trykk enter
3. Alt `analytics` blir nå synlig i console istedefor å sendes til Matomo