{l10n.getString("exposure-landing-hero-heading")}
diff --git a/src/app/(nextjs_migration)/components/client/PageLoadEvent.tsx b/src/app/(nextjs_migration)/components/client/PageLoadEvent.tsx
new file mode 100644
index 000000000..4ff6bb2dd
--- /dev/null
+++ b/src/app/(nextjs_migration)/components/client/PageLoadEvent.tsx
@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use client";
+
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useGlean } from "../../../hooks/useGlean";
+
+// Empty component that records a page view on first load.
+export const PageLoadEvent = () => {
+ const { pageEvents } = useGlean();
+ const pathname = usePathname();
+
+ // On first load of the page, record a page view.
+ useEffect(() => {
+ pageEvents.view.record({ path: pathname });
+ }, [pageEvents.view, pathname]);
+
+ // This component doesn't render anything.
+ return <>;
+};
diff --git a/src/app/hooks/useGlean.ts b/src/app/hooks/useGlean.ts
new file mode 100644
index 000000000..9976ebb5e
--- /dev/null
+++ b/src/app/hooks/useGlean.ts
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use client";
+
+import { useEffect } from "react";
+import Glean from "@mozilla/glean/web";
+import * as pageEvents from "../../telemetry/generated/page";
+
+// Custom hook that initializes Glean and returns the Glean objects required
+// to record data.
+export const useGlean = () => {
+ // Initialize Glean only on the first render
+ // of our custom hook.
+ useEffect(() => {
+ // Enable upload only if the user has not opted out of tracking.
+ const uploadEnabled = navigator.doNotTrack !== "1";
+
+ Glean.initialize("monitor.frontend", uploadEnabled, {
+ // This will submit an events ping every time an event is recorded.
+ maxEvents: 1,
+ });
+
+ // Glean debugging options can be found here:
+ // https://mozilla.github.io/glean/book/reference/debug/index.html
+ if (process.env.NEXT_PUBLIC_APP_ENV === "local") {
+ // Enable logging pings to the browser console.
+ Glean.setLogPings(true);
+ }
+ }, []);
+
+ // Return all generated Glean objects required for recording data.
+ return {
+ pageEvents,
+ };
+};
diff --git a/src/middleware.ts b/src/middleware.ts
index 8124956fd..e70179065 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -65,7 +65,7 @@ function generateCspData() {
"script-src-attr 'none'",
`connect-src 'self' ${
process.env.NODE_ENV === "development" ? "webpack://*" : ""
- } https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.ingest.sentry.io`,
+ } https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.ingest.sentry.io https://incoming.telemetry.mozilla.org`,
// `withSentryConfig` in next.config.js messes up the type, but we know that
// it's a valid NextConfig with `images.remotePatterns` set:
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/telemetry/metrics.yaml b/src/telemetry/metrics.yaml
new file mode 100644
index 000000000..2ed336a88
--- /dev/null
+++ b/src/telemetry/metrics.yaml
@@ -0,0 +1,28 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# For more information on configuring this file:
+# https://mozilla.github.io/glean/book/reference/yaml/metrics.html
+
+---
+$schema: moz://mozilla.org/schemas/glean/metrics/2-0-0
+
+page:
+ view:
+ type: event
+ description: |
+ An event triggered when the page is loaded.
+ bugs:
+ - https://mozilla-hub.atlassian.net/browse/MNTOR-2022
+ data_reviews:
+ - https://bugzilla.mozilla.org/show_bug.cgi?id=1848664#c6
+ data_sensitivity:
+ - interaction
+ notification_emails:
+ - rhelmer@mozilla.com
+ expires: never
+ extra_keys:
+ path:
+ description: The path of the page.
+ type: string