Legger til målgruppe og innholdstype for alle events mot Amplitude

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

src/components/_common/accordion/Accordion.tsx

@@ -4,6 +4,8 @@ import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import { Shortcuts, useShortcuts } from 'utils/useShortcuts';
 import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { PartConfigAccordion } from 'components/parts/accordion/AccordionPart';
 import { classNames } from 'utils/classnames';
@@ -17,14 +19,13 @@ type PanelItem = AccordionProps['accordion'][number];
 
 export const Accordion = ({ accordion }: AccordionProps) => {
     const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-    const { editorView } = usePageContentProps();
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
+    const { editorView, type } = contentProps;
     const [openAccordions, setOpenAccordions] = useState<number[]>([]);
-
     const expandAll = () => {
         setOpenAccordions(accordion.map((_, index) => index));
     };
-
     const validatePanel = (item: PanelItem) => !!(item.title && item.html);
 
     useShortcuts({ shortcut: Shortcuts.SEARCH, callback: expandAll });
@@ -41,6 +42,8 @@ export const Accordion = ({ accordion }: AccordionProps) => {
             tittel,
             opprinnelse: 'trekkspill',
             komponent: 'Accordion',
+            målgruppe: context,
+            innholdstype: innholdsTypeMap[type],
         });
     };
 

src/components/_common/card/useCard.tsx

@@ -7,6 +7,8 @@ import { LinkProps } from 'types/link-props';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import { usePublicUrl } from 'utils/usePublicUrl';
 import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 
 type AnalyticsProps = {
     analyticsLinkGroup?: string;
@@ -36,10 +38,10 @@ type UseCardSettings = {
 
 export const useCard = ({ link, size, type }: UseCardSettings): UseCardState => {
     const router = useRouter();
-    const { editorView } = usePageContentProps();
-
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
+    const { editorView } = contentProps;
     const { layoutConfig } = useLayoutConfig();
-
     const { url, canRouteClientSide } = usePublicUrl(link.url);
 
     const getComponentAnalyticsName = (type: CardType, size: CardSize) => {
@@ -64,6 +66,8 @@ export const useCard = ({ link, size, type }: UseCardSettings): UseCardState =>
         seksjon: layoutConfig.title,
         destinasjon: link.url,
         lenketekst: link.text,
+        målgruppe: context,
+        innholdstype: innholdsTypeMap[contentProps.type],
     };
 
     const handleUserEvent = (e: React.MouseEvent | React.TouchEvent): void => {

src/components/_common/copyLink/copyLink.tsx

@@ -2,8 +2,10 @@ import React, { useState } from 'react';
 import { LinkIcon } from '@navikt/aksel-icons';
 import { translator } from 'translations';
 import { classNames } from 'utils/classnames';
-import { usePageContentProps } from 'store/pageContext';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
+import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { useLayoutConfig } from 'components/layouts/useLayoutConfig';
 
 import style from './copyLink.module.scss';
@@ -19,7 +21,9 @@ const linkCopiedDisplayTimeMs = 2500;
 
 export const CopyLink = ({ anchor, heading, className, showLabel = true }: CopyLinkProps) => {
     const [showCopyTooltip, setShowCopyTooltip] = useState(false);
-    const { language } = usePageContentProps();
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
+    const { language, type } = contentProps;
     const { layoutConfig } = useLayoutConfig();
     const getLabel = translator('header', language);
 
@@ -38,7 +42,9 @@ export const CopyLink = ({ anchor, heading, className, showLabel = true }: CopyL
                 setTimeout(() => setShowCopyTooltip(false), linkCopiedDisplayTimeMs);
             }
             logAmplitudeEvent(AnalyticsEvents.COPY_LINK, {
+                målgruppe: context,
                 seksjon: layoutConfig.title,
+                innholdstype: innholdsTypeMap[type],
             });
         }
     };

src/components/_common/expandable/Expandable.tsx

@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ExpansionCard } from '@navikt/ds-react';
 import { BarChartIcon, BriefcaseClockIcon, CalendarIcon, TasklistIcon } from '@navikt/aksel-icons';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
+import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { classNames } from 'utils/classnames';
 import { smoothScrollToTarget, handleStickyScrollOffset } from 'utils/scroll-to';
 import { Shortcuts, useShortcuts } from 'utils/useShortcuts';
@@ -32,6 +35,8 @@ export const Expandable = ({
 }: Props) => {
     const [isOpen, setIsOpen] = useState(isOpenDefault ?? false);
     const accordionRef = useRef<HTMLDivElement | null>(null);
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
 
     useShortcuts({
         shortcut: Shortcuts.SEARCH,
@@ -48,6 +53,8 @@ export const Expandable = ({
             tittel,
             opprinnelse: analyticsOriginTag || 'utvidbar tekst',
             komponent: 'Expandable',
+            målgruppe: context,
+            innholdstype: innholdsTypeMap[contentProps.type],
         });
     };
 

src/components/_common/filter-bar/FilterBar.tsx

@@ -4,6 +4,8 @@ import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import { translator } from 'translations';
 import { useFilterState } from 'store/hooks/useFilteredContent';
 import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { FilterCheckbox } from 'components/parts/filters-menu/FilterCheckbox';
 import { SectionWithHeaderProps } from 'types/component-props/layouts/section-with-header';
 import { useScrollPosition } from 'utils/useStickyScroll';
@@ -24,19 +26,15 @@ type Props = {
 /** @deprecated */
 export const FilterBar = ({ layoutProps }: Props) => {
     const filterBarRef = useRef(null);
-
-    const { language } = usePageContentProps();
-    const getLabel = translator('filteredContent', language);
-
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
+    const getLabel = translator('filteredContent', contentProps.language);
     const { selectedFilters, availableFilters, toggleFilter } = useFilterState();
-
     const { saveScrollPosition, scrollBackToElement } = useScrollPosition(filterBarRef.current);
-
     const [filtersToDisplay, setFiltersToDisplay] = useState<FilterWithCategory[]>([]);
 
     useEffect(() => {
         const { content, intro } = layoutProps.regions;
-
         const components = [
             ...(content ? content.components : []),
             ...(intro ? intro.components : []),
@@ -92,6 +90,8 @@ export const FilterBar = ({ layoutProps }: Props) => {
                                     filternavn: filter.filterName,
                                     opprinnelse: 'innholdtekst',
                                     komponent: 'FilterBar',
+                                    målgruppe: context,
+                                    innholdstype: innholdsTypeMap[contentProps.type],
                                 });
                                 saveScrollPosition();
                                 toggleFilter(filter.id);

src/components/_common/lenke/lenkeBase/LenkeBase.tsx

@@ -6,6 +6,8 @@ import { onlyText } from 'utils/react-children';
 import { useLayoutConfig } from 'components/layouts/useLayoutConfig';
 import { usePublicUrl } from 'utils/usePublicUrl';
 import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 
 import style from 'components/_common/lenke/lenkeBase/LenkeBase.module.scss';
 
@@ -46,16 +48,19 @@ export const LenkeBase = ({
     children,
     ...rest
 }: Props) => {
-    const { editorView } = usePageContentProps();
+    const contentProps = usePageContentProps();
+    const { editorView } = contentProps;
+    const { context } = getDecoratorParams(contentProps);
     const { layoutConfig } = useLayoutConfig();
-
     const { url, canRouteClientSide } = usePublicUrl(href);
     const analyticsData = {
         komponent: analyticsComponent,
         lenkegruppe: analyticsLinkGroup,
         seksjon: analyticsLinkGroup || layoutConfig.title,
         destinasjon: url,
         lenketekst: analyticsLabel || onlyText(children),
+        målgruppe: context,
+        innholdstype: innholdsTypeMap[contentProps.type],
     };
 
     const WrapperComponent =

src/components/_common/overview-filters/OverviewFilters.tsx

@@ -7,8 +7,10 @@ import { OverviewTextFilter } from 'components/_common/overview-filters/text-fil
 import { OverviewFilterableItem, useOverviewFilters } from 'store/hooks/useOverviewFilters';
 import { classNames } from 'utils/classnames';
 import { translator } from 'translations';
-import { usePageContentProps } from 'store/pageContext';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
+import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 
 import style from './OverviewFilters.module.scss';
 
@@ -18,16 +20,14 @@ const MobileView = ({
     showAreaFilter,
     showTaxonomyFilter,
 }: Props) => {
-    const { language } = usePageContentProps();
-
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
     const [isOpen, setIsOpen] = useState(false);
     const filtersRef = useRef<HTMLDivElement>(null);
-
     const hasToggleFilters = showAreaFilter || showTaxonomyFilter;
-
     const searchLabel = translator(
         'overview',
-        language
+        contentProps.language
     )(hasToggleFilters ? 'filterOrSearch' : 'search');
 
     return (
@@ -53,6 +53,8 @@ const MobileView = ({
                                         kategori: 'mobile-toggle',
                                         opprinnelse: 'oversiktsside filter mobil',
                                         komponent: 'MobileView',
+                                        målgruppe: context,
+                                        innholdstype: innholdsTypeMap[contentProps.type],
                                     });
                                 }}
                                 className={style.mobileFilterButton}

src/components/_common/overview-filters/area-filter/OverviewAreaFilter.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Area } from 'types/areas';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
+import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { OverviewFilterBase } from 'components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase';
 import { OverviewFilterableItem, useOverviewFilters } from 'store/hooks/useOverviewFilters';
 
@@ -37,13 +40,16 @@ type Props = {
 
 export const OverviewAreaFilter = ({ items }: Props) => {
     const { areaFilter, setAreaFilter } = useOverviewFilters();
-
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
     const handleFilterUpdate = (area: Area) => {
         logAmplitudeEvent(AnalyticsEvents.FILTER, {
             kategori: 'område',
             filternavn: analyticsAreas[area],
             opprinnelse: 'oversiktsside områder',
             komponent: 'OverviewAreaFilter',
+            målgruppe: context,
+            innholdstype: innholdsTypeMap[contentProps.type],
         });
         setAreaFilter(area);
     };

src/components/_common/overview-filters/taxonomy-filter/OverviewTaxonomyFilter.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { ProductTaxonomy } from 'types/taxonomies';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
+import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { OverviewFilterBase } from 'components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase';
 import { OverviewFilterableItem, useOverviewFilters } from 'store/hooks/useOverviewFilters';
 
@@ -35,13 +38,17 @@ type Props = {
 
 export const OverviewTaxonomyFilter = ({ items }: Props) => {
     const { taxonomyFilter, setTaxonomyFilter } = useOverviewFilters();
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
 
     const handleFilterUpdate = (taxonomy: ProductTaxonomy) => {
         logAmplitudeEvent(AnalyticsEvents.FILTER, {
             kategori: 'type',
             filternavn: analyticsTaxonomi[taxonomy],
             opprinnelse: 'oversiktsside typer',
             komponent: 'OverviewTaxonomyFilter',
+            målgruppe: context,
+            innholdstype: innholdsTypeMap[contentProps.type],
         });
         setTaxonomyFilter(taxonomy);
     };

src/components/_common/overview-filters/text-filter/OverviewTextFilter.tsx

@@ -2,14 +2,17 @@ import React, { useCallback, useEffect, useId, useState } from 'react';
 import { Search } from '@navikt/ds-react';
 import debounce from 'lodash.debounce';
 import { translator } from 'translations';
+import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import { usePageContentProps } from 'store/pageContext';
+import { getDecoratorParams } from 'utils/decorator-utils';
+import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { useOverviewFilters } from 'store/hooks/useOverviewFilters';
 import { windowScrollTo } from 'utils/scroll-to';
-import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import {
     OVERVIEW_FILTERS_TEXT_INPUT_EVENT,
     OverviewFiltersTextInputEventDetail,
 } from 'store/slices/overviewFilters';
+
 import style from './OverviewTextFilter.module.scss';
 
 type Props = {
@@ -23,9 +26,10 @@ const analyticsRedaction = (value: string) =>
 
 export const OverviewTextFilter = ({ hideLabel }: Props) => {
     const { setTextFilter } = useOverviewFilters();
-    const { language } = usePageContentProps();
+    const contentProps = usePageContentProps();
+    const { context } = getDecoratorParams(contentProps);
+    const label = translator('overview', contentProps.language)('search');
     const inputId = useId();
-
     const [textInput, setTextInput] = useState('');
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -44,6 +48,8 @@ export const OverviewTextFilter = ({ hideLabel }: Props) => {
                 kategori: 'fritekst',
                 filternavn: analyticsRedaction(value),
                 komponent: 'OverviewTextFilter',
+                målgruppe: context,
+                innholdstype: innholdsTypeMap[contentProps.type],
             });
         }, 500),
         [setTextFilter]
@@ -61,7 +67,6 @@ export const OverviewTextFilter = ({ hideLabel }: Props) => {
                 setTextInput(value);
             }
         };
-
         window.addEventListener(OVERVIEW_FILTERS_TEXT_INPUT_EVENT, handleInputFromEvent);
         return () => {
             window.removeEventListener(OVERVIEW_FILTERS_TEXT_INPUT_EVENT, handleInputFromEvent);
@@ -95,7 +100,7 @@ export const OverviewTextFilter = ({ hideLabel }: Props) => {
             <Search
                 onChange={handleUserInput}
                 value={textInput}
-                label={translator('overview', language)('search')}
+                label={label}
                 hideLabel={hideLabel}
                 variant={'secondary'}
                 autoComplete={'off'}