diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx index 957d261c66..c5d53cb03e 100644 --- a/components/layout/layout.tsx +++ b/components/layout/layout.tsx @@ -5,9 +5,11 @@ import { useLiveStreamProps } from "../../hooks/useLiveStreamProps"; import { Footer, PreFooter } from "./footer"; import { Theme } from "./theme"; +import { useAppInsightsContext } from "@microsoft/applicationinsights-react-js"; import dayjs from "dayjs"; import dynamic from "next/dynamic"; import { Open_Sans } from "next/font/google"; +import { useReportWebVitals } from "next/web-vitals"; import { WebSite, WithContext } from "schema-dts"; import { MegaMenuLayout, NavMenuGroup } from "ssw.megamenu"; import layoutData from "../../content/global/index.json"; @@ -86,6 +88,24 @@ export const Layout = ({ "[)" ); + const appInsights = useAppInsightsContext(); + + useReportWebVitals((metric) => { + switch (metric.name) { + case "TTFB": + case "FCP": + case "LCP": + case "FID": + case "CLS": + case "INP": + appInsights.trackMetric( + { name: metric.name, average: metric.value }, + { page: router.asPath } + ); + break; + } + }); + return ( <> diff --git a/pages/[...filename].tsx b/pages/[...filename].tsx index cb7dc310da..a0e023bde3 100644 --- a/pages/[...filename].tsx +++ b/pages/[...filename].tsx @@ -1,8 +1,6 @@ import { Blocks } from "@/components/blocks-renderer"; import { componentRenderer } from "@/components/blocks/mdxComponentRenderer"; -import { useAppInsightsContext } from "@microsoft/applicationinsights-react-js"; import { InferGetStaticPropsType } from "next"; -import { useReportWebVitals } from "next/web-vitals"; import { tinaField, useTina } from "tinacms/dist/react"; import { TinaMarkdown } from "tinacms/dist/rich-text"; import { client } from "../.tina/__generated__/client"; @@ -23,24 +21,6 @@ export default function HomePage( variables: props.variables, }); - const appInsights = useAppInsightsContext(); - - useReportWebVitals((metric) => { - switch (metric.name) { - case "TTFB": - case "FCP": - case "LCP": - case "FID": - case "CLS": - case "INP": - appInsights.trackMetric( - { name: metric.name, average: metric.value }, - {} - ); - break; - } - }); - // Here due to components attempting to access pageBlock items before // they are initialised if (!pageBlocks) {