Add a nonce to the analytics script (#4160)

* Fork upstream GoogleAnalytics component

* Accept a nonce in our <GoogleAnalytics> fork

* Use our <GoogleAnalytics> fork

src/app/components/client/GoogleAnalyticsWorkaround.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable header/header */
+
+// Based on: https://github.com/vercel/next.js/blob/89fcf68c6acd62caf91a8cf0bfd3fdc566e75d9d/packages/third-parties/src/google/ga.tsx
+// License for this specific file:
+/*
+The MIT License (MIT)
+
+Copyright (c) 2024 Vercel, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+"use client";
+
+import { GAParams } from "@next/third-parties/dist/types/google";
+import Script, { ScriptProps } from "next/script";
+import { useEffect } from "react";
+
+let currDataLayerName: string | undefined = undefined;
+
+/**
+ * This component is based on <GoogleAnalytics> from `@next/third-parties`, but accepting a nonce
+ *
+ * @param props
+ */
+export const GoogleAnalyticsWorkaround = (
+  props: GAParams & { nonce: ScriptProps["nonce"] },
+) => {
+  const { gaId, dataLayerName = "dataLayer", nonce } = props;
+
+  if (currDataLayerName === undefined) {
+    currDataLayerName = dataLayerName;
+  }
+
+  useEffect(() => {
+    // performance.mark is being used as a feature use signal. While it is traditionally used for performance
+    // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
+    // existing API.
+    // The performance measurement will be handled by Chrome Aurora
+
+    performance.mark("mark_feature_usage", {
+      detail: {
+        feature: "next-third-parties-ga",
+      },
+    });
+  }, []);
+
+  return (
+    <>
+      <Script
+        id="_next-ga-init"
+        dangerouslySetInnerHTML={{
+          __html: `
+          window['${dataLayerName}'] = window['${dataLayerName}'] || [];
+          function gtag(){window['${dataLayerName}'].push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gaId}');`,
+        }}
+        nonce={nonce}
+      />
+      <Script
+        id="_next-ga"
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+        nonce={nonce}
+      />
+    </>
+  );
+};
+
+export const sendGAEvent = (...args: object[]) => {
+  if (currDataLayerName === undefined) {
+    console.warn(`@next/third-parties: GA has not been initialized`);
+    return;
+  }
+
+  if (window[currDataLayerName]) {
+    window[currDataLayerName].push(...args);
+  } else {
+    console.warn(
+      `@next/third-parties: GA dataLayer ${currDataLayerName} does not exist`,
+    );
+  }
+};

src/app/layout.tsx

@@ -14,8 +14,9 @@ import { SessionProvider } from "../contextProviders/session";
 import { authOptions } from "./api/utils/auth";
 import { metropolis } from "./fonts/Metropolis/metropolis";
 import { CONST_GA4_MEASUREMENT_ID } from "../constants";
-import { GoogleAnalytics } from "@next/third-parties/google";
 import { headers } from "next/headers";
+import { GoogleAnalyticsWorkaround } from "./components/client/GoogleAnalyticsWorkaround";
+import { getNonce } from "./deprecated/functions/server/getNonce";
 
 // DO NOT ADD SECRETS: Env variables added here become public.
 const PUBLIC_ENVS = {
@@ -72,7 +73,10 @@ export default async function RootLayout({
         </PublicEnvProvider>
       </body>
       {headers().get("DNT") !== "1" && (
-        <GoogleAnalytics gaId={CONST_GA4_MEASUREMENT_ID} />
+        <GoogleAnalyticsWorkaround
+          gaId={CONST_GA4_MEASUREMENT_ID}
+          nonce={getNonce()}
+        />
       )}
     </html>
   );