IS-1940: Add amplitude

package.json

@@ -22,6 +22,7 @@
   "author": "DigiSyfo <[email protected]>",
   "license": "ISC",
   "dependencies": {
+    "@amplitude/analytics-browser": "2.3.8",
     "@navikt/aksel-icons": "5.11.2",
     "@navikt/ds-css": "5.11.1",
     "@navikt/ds-react": "5.11.1",

src/components/NavigationBar.tsx

@@ -7,7 +7,7 @@ import {
   minOversiktRoutePathRoutePath,
 } from '@/routers/AppRouter';
 
-const tekster = {
+const texts = {
   enhetensOversikt: 'Enhetens oversikt',
   minOversikt: 'Min oversikt',
 };
@@ -68,13 +68,13 @@ export const NavigationBar = (): ReactElement => {
           className={({ isActive }) => (isActive ? 'active' : '')}
           to={minOversiktRoutePathRoutePath}
         >
-          {tekster.minOversikt}
+          {texts.minOversikt}
         </LinkStyled>
         <LinkStyled
           className={({ isActive }) => (isActive ? 'active' : '')}
           to={enhetOversiktRoutePath}
         >
-          {tekster.enhetensOversikt}
+          {texts.enhetensOversikt}
         </LinkStyled>
         <div className="ml-auto self-center">
           <MoteoversiktLink />

src/containers/OversiktContainer.tsx

@@ -9,6 +9,8 @@ import { NavigationBar } from '@/components/NavigationBar';
 import { useTabType } from '@/context/tab/TabTypeContext';
 import { NotificationBar } from '@/components/error/NotificationBar';
 import ErrorBoundary from '@/components/error/ErrorBoundary';
+import * as Amplitude from '@/utils/amplitude';
+import { EventType } from '@/utils/amplitude';
 
 const Container = styled.div`
   display: flex;
@@ -21,13 +23,29 @@ interface Props {
   tabType: OverviewTabType;
 }
 
+function logPageView(tab: OverviewTabType) {
+  Amplitude.logEvent({
+    type: EventType.PageView,
+    data: { url: window.location.href, sidetittel: toReadableString(tab) },
+  });
+}
+
+function toReadableString(overviewTabType: OverviewTabType): string {
+  switch (overviewTabType) {
+    case OverviewTabType.ENHET_OVERVIEW:
+      return 'Enhetens oversikt';
+    case OverviewTabType.MY_OVERVIEW:
+      return 'Min oversikt';
+  }
+}
+
 const OversiktContainer = ({ tabType }: Props): ReactElement => {
   const personregisterQuery = usePersonregisterQuery();
   const personoversiktQuery = usePersonoversiktQuery();
   const { setTabType } = useTabType();
-
   useEffect(() => {
     setTabType(tabType);
+    logPageView(tabType);
   }, [setTabType, tabType]);
 
   const ContainerContent = (): ReactElement => {

src/utils/amplitude.ts

@@ -0,0 +1,53 @@
+import * as amplitude from '@amplitude/analytics-browser';
+import { isProd } from '@/utils/miljoUtil';
+
+/**
+ See documentation for naming guidelines: https://github.com/navikt/analytics-taxonomy
+ Other documentation on Aksel: https://aksel.nav.no/god-praksis/artikler/mal-brukeratferd-med-amplitude
+ */
+export enum EventType {
+  PageView = 'besøk',
+  Navigation = 'navigere',
+  OptionSelected = 'alternativ valgt',
+}
+
+type EventPageView = {
+  type: EventType.PageView;
+  data: {
+    url: string;
+    sidetittel: string;
+  };
+};
+
+type Navigation = {
+  type: EventType.Navigation;
+  data: {
+    lenketekst: string;
+    destinasjon: string;
+  };
+};
+
+type OptionSelected = {
+  type: EventType.OptionSelected;
+  data: {
+    url: string;
+    tekst: string;
+    option: string;
+  };
+};
+
+type Event = EventPageView | Navigation | OptionSelected;
+
+export const logEvent = (event: Event) =>
+  amplitude.track(event.type, { ...event.data });
+
+const getApiKey = () => {
+  return isProd()
+    ? 'e4b68538f8d185f0ee2d913d8e51bd39'
+    : 'c7bcaaf5d0fddda592412234dd3da1ba';
+};
+
+amplitude.init(getApiKey(), undefined, {
+  serverUrl: 'https://amplitude.nav.no/collect',
+  defaultTracking: true,
+});

src/utils/miljoUtil.ts

@@ -9,6 +9,10 @@ export const erLokal = (): boolean => {
   return window.location.host.indexOf('localhost') > -1;
 };
 
+export function isProd(): boolean {
+  return window.location.href.indexOf('syfooversikt.intern.nav.no') > -1;
+}
+
 export const finnNaisUrlDefault = (): string => {
   return erPreProd() ? '.intern.dev.nav.no' : '.intern.nav.no';
 };

test/setup.tsx

@@ -23,18 +23,20 @@ function copyProps(src: any, target: any) {
   Object.defineProperties(target, propsAsPropertyDescriptorMap);
 }
 
-let temp: any = null;
-const localS = {
-  getItem() {
-    return temp;
-  },
-  setItem(key: any, value: any) {
-    temp = value;
-  },
-};
+function localStorage() {
+  let storage = {};
+  return {
+    getItem: function (key: string) {
+      return key in storage ? (storage as any)[key] : null;
+    },
+    setItem: function (key: string, value: any) {
+      (storage as any)[key] = value || '';
+    },
+  };
+}
 
 (global as any).HTMLElement = window.HTMLElement;
-(global as any).localStorage = localS;
+(global as any).localStorage = localStorage();
 (global as any).XMLHttpRequest = window.XMLHttpRequest;
 
 (global as any).window = window;