IS-1940: Add logging of tab change event

navikt · Jan 8, 2024 · 5138e83 · 5138e83
1 parent 7c2bd04
commit 5138e83
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -7,7 +7,7 @@ import {
   minOversiktRoutePathRoutePath,
 } from '@/routers/AppRouter';
 
-const tekster = {
+const texts = {
   enhetensOversikt: 'Enhetens oversikt',
   minOversikt: 'Min oversikt',
 };
@@ -54,6 +54,7 @@ const NavigationBarContent = styled.div`
   padding-top: 1em;
   padding-bottom: 1em;
   display: flex;
+
   > :not(:last-child) {
     margin-right: 1em;
   }
@@ -72,13 +73,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>
         <MoteoversiktLinkContent>
           <MoteoversiktLink />

diff --git a/src/containers/OversiktContainer.tsx b/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,10 +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(() => {
+    logPageView(tabType);
+  }, [tabType]);
 
   useEffect(() => {
     setTabType(tabType);