[Issue #1889] Updating GA4 for nextjs v2 (#2002)

## Summary Fixes #1889 ### Time to review: __5 mins__ ## Changes proposed > Added manual "search" api call for GA4 on search bar click > Updated template to call GA4 correctly > Updated @next/third-party to canary to fix issues ## Context for reviewers > Context in Eng Slack Thread ## Additional information > Screenshots, GIF demos, code examples or output to help show the changes working as expected.
HHS · May 13, 2024 · bb423dc · bb423dc · github-actions · May 13, 2024
1 parent aa4d15f
commit bb423dc
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,7 +24,7 @@
     "ts:check": "tsc --noEmit"
   },
   "dependencies": {
-    "@next/third-parties": "^14.0.4",
+    "@next/third-parties": "^14.3.0-canary.59",
     "@opentelemetry/api": "^1.8.0",
     "@trussworks/react-uswds": "^7.0.0",
     "@uswds/uswds": "^3.6.0",

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -29,14 +29,16 @@ export default function RootLayout({ children, params }: LayoutProps) {
 
   return (
     <html lang={locale}>
+      <head>
+        <GoogleAnalytics gaId={PUBLIC_ENV.GOOGLE_ANALYTICS_ID} />
+      </head>
       <body>
         {/* Separate layout component for the inner-body UI elements since Storybook
             and tests trip over the fact that this file renders an <html> tag */}
 
         {/* TODO: Add locale="english" prop when ready for i18n */}
         <Layout locale={locale}>{children}</Layout>
       </body>
-      <GoogleAnalytics gaId={PUBLIC_ENV.GOOGLE_ANALYTICS_ID} />
     </html>
   );
 }
diff --git a/frontend/src/app/template.tsx b/frontend/src/app/template.tsx
@@ -10,7 +10,7 @@ export default function Template({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     isProd &&
       PUBLIC_ENV.GOOGLE_ANALYTICS_ID &&
-      sendGAEvent({ event: "page_view" });
+      sendGAEvent("event", "page_view");
   }, [isProd]);
 
   return <div>{children}</div>;

diff --git a/frontend/src/components/search/SearchBar.tsx b/frontend/src/components/search/SearchBar.tsx
@@ -3,6 +3,7 @@
 import { Icon } from "@trussworks/react-uswds";
 import { useSearchParamUpdater } from "../../hooks/useSearchParamUpdater";
 import { useState } from "react";
+import { sendGAEvent } from "@next/third-parties/google";
 
 interface SearchBarProps {
   initialQueryParams: string;
@@ -14,6 +15,7 @@ export default function SearchBar({ initialQueryParams }: SearchBarProps) {
 
   const handleSubmit = () => {
     updateQueryParams(inputValue, "query");
+    sendGAEvent("event", "search", { search_term: inputValue });
   };
 
   return (
St.^❔	Category	Percentage	Covered / Total
🟢	Statements	84.14%	870/1034
🟡	Branches	65.01%	223/343
🟡	Functions	75.58%	164/217
🟢	Lines	84.18%	809/961