Merge pull request #843 from navikt/dev/aia-in-viewport

Dev/aia in viewport

docs/amplitude.md

@@ -1,10 +1,18 @@
 # Dokumentasjon av Amplitude i AiA
 
-Aktivitetene i AiA logges til `veientilarbeid.` i PO Arbeid - prod prosjektet.
+Aktivitetene i AiA logges dels til `aia.` og dels til `veientilarbeid.` i PO Arbeid - prod prosjektet.
 Hvilke aktiviteter som logges og hvilke ekstra data som sendes med varierer.
 
 [Dashboard for overordnede metrikker](https://analytics.eu.amplitude.com/nav/dashboard/e-1h7ss35)
 
+## aia.visning
+
+Brukes for å logge når en komponent har blitt vist (synlig i viewPort).
+
+-   `viser` Komponenten som er vist
+
+Komponenten som sørger for rapporteringen bør alltid legges nederst i komponentenen den skal rapportere på slik at vi sikrer at hele komponenten vises før vi logger til Amplitude
+
 ## veientilarbeid.visning
 
 Brukes for å logge når en komponent har blitt vist (synlig i viewPort).

src/demo/setup-demo-mock.ts

@@ -169,4 +169,8 @@ export const demo_handlers = [
 
     rest.get(REAKTIVERING_URL, reaktiveringGetResolver),
     rest.post(REAKTIVERING_URL, reaktiveringPostResolver),
+
+    rest.post('https://amplitude.nav.no/collect', (req, res, ctx) => {
+        return res(ctx.status(200));
+    }),
 ];

src/komponenter/aia-in-viewport/aia-in-viewport.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import handleViewport from 'react-in-viewport';
+
+import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
+import { loggAiAVisning } from '../../metrics/metrics';
+
+interface ViewportProps {
+    inViewport: boolean;
+    forwardedRef: React.ForwardedRef<any>;
+}
+
+type Props = {
+    loggTekst: string;
+};
+
+const WrappedViewport: React.ComponentType<Props> = handleViewport(AiAInViewport);
+
+function AiAInViewport(props: Props & ViewportProps): JSX.Element {
+    const [harVistTilBruker, setHarVistTilBruker] = useState<boolean>(false);
+    const { amplitudeData } = useAmplitudeData();
+
+    if (props.inViewport && !harVistTilBruker) {
+        setHarVistTilBruker(true);
+    }
+
+    function loggTilAmplitude() {
+        if (harVistTilBruker) {
+            loggAiAVisning({ viser: props.loggTekst, ...amplitudeData });
+        }
+    }
+
+    useEffect(() => {
+        setTimeout(loggTilAmplitude, 2000);
+    }, []);
+
+    return <span ref={props.forwardedRef}></span>;
+}
+
+export default WrappedViewport;

src/komponenter/reaktivering/automatisk-reaktivert.tsx

@@ -9,7 +9,7 @@ import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
 
 import { ReadMoreInaktivering } from './readmore-derfor-ble-du-inaktivert';
 import { ReadMoreViktigRegistrert } from './readmore-viktig-registrert';
-import InViewport from '../in-viewport/in-viewport';
+import AiAInViewport from '../aia-in-viewport/aia-in-viewport';
 import ErRendret from '../er-rendret/er-rendret';
 import beregnArbeidssokerperioder from '../../lib/beregn-arbeidssokerperioder';
 import prettyPrintDato from '../../utils/pretty-print-dato';
@@ -114,7 +114,7 @@ function AutomatiskReaktivert() {
                     </div>
                 </div>
             </div>
-            <InViewport loggTekst="Viser automatisk reaktivert i viewport" />
+            <AiAInViewport loggTekst="Automatisk reaktivert" />
         </Panel>
     );
 }

src/komponenter/reaktivering/readmore-derfor-ble-du-inaktivert.tsx

@@ -45,20 +45,16 @@ function Innhold(props: Props) {
 
     return (
         <div className={spacingStyles.mt1}>
-            <BodyShort className={spacingStyles.mb1}>
-                {tekst('vanligsteGrunn')}
-                <ul>
-                    <li>{tekst('meldekortSent')}</li>
-                    <li>{tekst('meldekortNei')}</li>
-                </ul>
-            </BodyShort>
-            <BodyShort className={spacingStyles.mb1}>
-                {tekst('fortsattRegistrert')}
-                <ul>
-                    <li>{tekst('sendMeldekort')}</li>
-                    <li>{tekst('svarJa')}</li>
-                </ul>
-            </BodyShort>
+            <BodyShort className={spacingStyles.mb1}>{tekst('vanligsteGrunn')}</BodyShort>
+            <ul>
+                <li>{tekst('meldekortSent')}</li>
+                <li>{tekst('meldekortNei')}</li>
+            </ul>
+            <BodyShort className={spacingStyles.mb1}>{tekst('fortsattRegistrert')}</BodyShort>
+            <ul>
+                <li>{tekst('sendMeldekort')}</li>
+                <li>{tekst('svarJa')}</li>
+            </ul>
             <BodyShort className={spacingStyles.mb1}>{tekst('konsekvens')}</BodyShort>
         </div>
     );

src/metrics/metrics.ts

@@ -28,6 +28,11 @@ export const loggVisning = (data: AmplitudeStandardVisningsData) => {
     amplitudeLogger(`${domene}.visning`, data);
 };
 
+// Brukes for å beskrive hva brukerene ser i viewport
+export const loggAiAVisning = (data: AmplitudeStandardVisningsData) => {
+    amplitudeLogger(`aia.visning`, data);
+};
+
 export type RendringsMetrikkData = {
     rendrer: string;
 };