Merge pull request #266 from NYPL/RENO-4391/ga4

charmingduchess · web-flow · commit 85a3c194de98 · 2025-03-05T09:47:51.000-05:00
use new google scripts
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -5,7 +5,6 @@ import "../src/styles/main.scss";
 import Head from "next/head";
 import { useForm, FormProvider } from "react-hook-form";
 import isEmpty from "lodash/isEmpty";
-import gaUtils, { getGoogleGACode } from "../src/externals/gaUtils";
 import {
   FormDataContextProvider,
   formInitialState,
@@ -28,24 +27,6 @@ interface MyAppProps {
   pageProps: any;
 }
 
-/**
- * Determines if we are running on server or in the client.
- * @return {boolean} true if running on server
- */
-function isServerRendered(): boolean {
-  return typeof window === "undefined";
-}
-
-// Get the Google Analytics code for the HTML snippet below.
-const isProduction = appConfig.nodeEnv === "production";
-const gaCode = getGoogleGACode(isProduction);
-// Set up Google Analytics if it isn't already. There's an HTML snippet in the
-// DOM below that initializes GA. If it fails, this tries again. The HTML
-// snippet is better since it works without javascript.
-if (!isServerRendered()) {
-  gaUtils.setupAnalytics(isProduction);
-}
-
 function MyApp({ Component, pageProps }: MyAppProps) {
   const router = useRouter();
   useRouterScroll({ top: 640 });
@@ -67,7 +48,6 @@ function MyApp({ Component, pageProps }: MyAppProps) {
   useEffect(() => {
     const handleRouteChange = () => {
       aaUtils.pageViewEvent(window.location);
-      gaUtils.trackPageview(window.location.pathname);
     };
     router.events.on("routeChangeComplete", () => handleRouteChange());
     return router.events.off("routeChangeComplete", () => handleRouteChange());
@@ -174,14 +154,12 @@ function MyApp({ Component, pageProps }: MyAppProps) {
         <script
           dangerouslySetInnerHTML={{
             __html: `
-              (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-              })(document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-              ga('create', '${gaCode}', 'auto');
-              ga('send', 'pageview');
-            `,
+            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+            })(window,document,'script','dataLayer','GTM-RKWC');
+          `,
           }}
         />
         {/* <!-- End Google Analytics --> */}
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -29,6 +29,15 @@ class MyDocument extends Document {
           <script src={adobeAnalyticsTag} async></script>
         </Head>
         <body>
+          <noscript>
+            <iframe
+              title="Google-tag-name"
+              src="https://www.googletagmanager.com/ns.html?id=GTM-RKWC"
+              height="0"
+              width="0"
+              style={{ display: "none", visibility: "hidden" }}
+            ></iframe>
+          </noscript>
           {/* <!-- NYPL Header Script --> */}
           <div id="nypl-header"></div>
           <script src={dsHeader} async></script>
diff --git a/pages/congrats/index.tsx b/pages/congrats/index.tsx
@@ -2,14 +2,15 @@
 import { Heading } from "@nypl/design-system-react-components";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useTranslation } from "next-i18next";
-import React from "react";
+import React, { useEffect } from "react";
 import { GetServerSideProps } from "next";
 
 import ConfirmationGraphic from "../../src/components/ConfirmationGraphic";
 import useFormDataContext from "../../src/context/FormDataContext";
 import { FormResults } from "../../src/interfaces";
 import { homePageRedirect } from "../../src/utils/utils";
 import { cookieDomain } from "../../appConfig";
+import ilsLibraryList from "../../src/data/ilsLibraryList";
 
 function ConfirmationPage(): JSX.Element {
   const { state } = useFormDataContext();
@@ -19,6 +20,15 @@ function ConfirmationPage(): JSX.Element {
   // shouldn't happen.
   const ptype = formResults?.ptype || 7;
   const temporary = ptype === 7;
+  useEffect(() => {
+    if (state.formValues.username) {
+      (window as any).dataLayer = (window as any).dataLayer || [];
+      (window as any).dataLayer.push({
+        event: "library_card_submission",
+        nypl_location: ilsLibraryList[state.formValues.homeLibraryCode],
+      });
+    }
+  }, []);
 
   return (
     <div>
diff --git a/src/components/AccountFormContainer/index.tsx b/src/components/AccountFormContainer/index.tsx
@@ -12,7 +12,7 @@ import RoutingLinks from "../RoutingLinks.tsx";
 import AccountFormFields from "../AccountFormFields";
 import AcceptTermsFormFields from "../AcceptTermsFormFields";
 import { findLibraryCode } from "../../utils/formDataUtils";
-import { lcaEvents } from "../../externals/gaUtils";
+
 import FormField from "../FormField";
 import { createQueryParams } from "../../utils/utils";
 
@@ -39,7 +39,6 @@ const AccountFormContainer = () => {
     });
 
     const nextUrl = `/review?${queryStr}`;
-    lcaEvents("Navigation", `Next button to ${nextUrl}`);
     router.push(nextUrl);
   };
 
diff --git a/src/components/AddressContainer/index.tsx b/src/components/AddressContainer/index.tsx
@@ -21,7 +21,7 @@ import {
 import Loader from "../Loader";
 import FormField from "../FormField";
 import { constructAddressType } from "../../utils/formDataUtils";
-import { lcaEvents } from "../../externals/gaUtils";
+
 import { nyCounties, nyCities, createQueryParams } from "../../utils/utils";
 import useFormDataContext from "../../context/FormDataContext";
 import { commonAPIErrors } from "../../data/apiErrorMessageTranslations";
@@ -122,7 +122,6 @@ const AddressContainer: React.FC = () => {
           } else {
             nextUrl = `/address-verification?${queryStr}`;
           }
-          lcaEvents("Navigation", `Next button to ${nextUrl}`);
           router.push(nextUrl);
         } else {
           setTimeout(() => {
diff --git a/src/components/AddressVerificationContainer/index.tsx b/src/components/AddressVerificationContainer/index.tsx
@@ -14,7 +14,7 @@ import useFormDataContext from "../../../src/context/FormDataContext";
 import { Address, AddressResponse } from "../../../src/interfaces";
 import RoutingLinks from "../../../src/components/RoutingLinks.tsx";
 import styles from "./AddressVerificationContainer.module.css";
-import { lcaEvents } from "../../externals/gaUtils";
+
 import FormField from "../FormField";
 import { createQueryParams } from "../../utils/utils";
 
@@ -131,7 +131,7 @@ function AddressVerificationContainer() {
 
     // Finally, go to the acount page.
     const nextUrl = `/account?${queryStr}`;
-    lcaEvents("Navigation", `Next button to ${nextUrl}`);
+
     router.push(nextUrl);
   };
 
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -13,17 +13,11 @@ interface BannerProps {
  * Simple component that returns the NYPL Design System's Hero component but
  * with other necessary components
  */
-const Banner = ({
-  fullImageSrc = defaultImageSrc,
-  heroDescription = defaultDescription,
-}: BannerProps) => {
+const Banner = ({ fullImageSrc = defaultImageSrc }: BannerProps) => {
   const { t } = useTranslation("common");
   const h1Heading = (
     <Heading id="hero-banner" level="one" text={t("banner.title")} />
   );
-  const subHeaderText = (
-    <div className="hero__body-text">{heroDescription}</div>
-  );
   return (
     <Hero
       backgroundColor="#333"
diff --git a/src/components/PersonalFormContainer/index.tsx b/src/components/PersonalFormContainer/index.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useFormDataContext from "../../context/FormDataContext";
 import PersonalFormFields from "../PersonalFormFields";
 import RoutingLinks from "../RoutingLinks.tsx";
-import { lcaEvents } from "../../externals/gaUtils";
+
 import FormField from "../FormField";
 import {
   Form,
@@ -39,7 +39,6 @@ const PersonalFormContainer = () => {
     });
 
     const nextUrl = `/location?${queryStr}`;
-    lcaEvents("Navigation", `Next button to ${nextUrl}`);
     router.push(nextUrl);
   };
 
diff --git a/src/components/ReviewFormContainer/index.tsx b/src/components/ReviewFormContainer/index.tsx
@@ -22,7 +22,7 @@ import styles from "./ReviewFormContainer.module.css";
 import AcceptTermsFormFields from "../AcceptTermsFormFields";
 import Loader from "../Loader";
 import FormField from "../FormField";
-import { lcaEvents } from "../../externals/gaUtils";
+
 import aaUtils from "../../externals/aaUtils";
 import { createQueryParams } from "../../utils/utils";
 import useFormDataContext from "../../../src/context/FormDataContext";
@@ -90,7 +90,6 @@ function ReviewFormContainer() {
         buttonType="primary"
         id={`editSectionButton-${sectionName}`}
         onClick={() => {
-          lcaEvents("Edit", sectionName);
           editSectionFlag(true);
         }}
       >
@@ -114,7 +113,6 @@ function ReviewFormContainer() {
         buttonType="primary"
         id="editAddressButton"
         onClick={() => {
-          lcaEvents("Edit", "Location/Address");
           router.push(`/location?${queryStr}`);
         }}
       >
@@ -134,7 +132,6 @@ function ReviewFormContainer() {
       <Button
         buttonType="primary"
         id="submitSectionButton"
-        onClick={() => {}}
         type="submit"
       >
         {t("button.submit")}
@@ -187,7 +184,7 @@ function ReviewFormContainer() {
       .then((response) => {
         // Update the global state with a successful form submission data.
         dispatch({ type: "SET_FORM_RESULTS", value: response.data });
-        lcaEvents("Submit", "Submit");
+        
 
         // Adobe Analytics
         aaUtils.trackApplicationSubmitEvent({
diff --git a/src/components/RoutingLinks.tsx/index.tsx b/src/components/RoutingLinks.tsx/index.tsx
@@ -5,7 +5,6 @@ import React from "react";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 
-import { lcaEvents } from "../../externals/gaUtils";
 import aaUtils from "../../externals/aaUtils";
 import styles from "./RoutingLinks.module.css";
 
@@ -41,14 +40,7 @@ function RoutingLinks({
     <div className={styles.container}>
       {previous?.url && (
         <Link href={previous.url}>
-          <a
-            className={styles.previous}
-            onClick={() =>
-              lcaEvents("Navigation", `Previous button to ${previous.url}`)
-            }
-          >
-            {previousText}
-          </a>
+          <a className={styles.previous}>{previousText}</a>
         </Link>
       )}
       {!next?.submit ? (
@@ -58,7 +50,6 @@ function RoutingLinks({
             // Just track the "Get Started" or "Submit" clicks. Routing events
             // are tracked at the component level in each "onSubmit".
             onClick={() => {
-              lcaEvents("Navigation", next.text);
               aaUtils.trackCtaEvent("Start Application", next.text, next.url);
             }}
           >
diff --git a/src/components/UsernameValidationFormFields/index.tsx b/src/components/UsernameValidationFormFields/index.tsx
@@ -14,7 +14,7 @@ import { isAlphanumeric } from "validator";
 import FormField from "../FormField";
 import useFormDataContext from "../../context/FormDataContext";
 import styles from "./UsernameValidationFormFields.module.css";
-import { lcaEvents } from "../../externals/gaUtils";
+
 import {
   apiErrorTranslations,
   commonAPIErrors,
@@ -71,8 +71,6 @@ const UsernameValidationForm = ({
         if (lang !== "en") {
           message = apiTranslations[message][lang] || message;
         }
-
-        lcaEvents("Availability Checker", "Username - available");
         setUsernameIsAvailable({
           available: true,
           message,
@@ -94,7 +92,6 @@ const UsernameValidationForm = ({
           message = apiErrorTranslations[message][lang] || message;
         }
 
-        lcaEvents("Availability Checker", "Username - unavailable");
         setUsernameIsAvailable({
           available: false,
           message,
diff --git a/src/components/WorkAddressContainer/index.tsx b/src/components/WorkAddressContainer/index.tsx
@@ -19,7 +19,7 @@ import {
 } from "../../interfaces";
 import Loader from "../Loader";
 import FormField from "../FormField";
-import { lcaEvents } from "../../externals/gaUtils";
+
 import { constructAddressType } from "../../utils/formDataUtils";
 import useFormDataContext from "../../context/FormDataContext";
 import { createQueryParams } from "../../utils/utils";
@@ -115,7 +115,7 @@ const AddressContainer: React.FC = () => {
           } else {
             setIsLoading(false);
             nextUrl = `/address-verification?${queryStr}`;
-            lcaEvents("Navigation", `Next button to ${nextUrl}`);
+
             router.push(nextUrl);
           }
         });
diff --git a/src/externals/gaUtils.test.ts b/src/externals/gaUtils.test.ts
diff --git a/src/externals/gaUtils.ts b/src/externals/gaUtils.ts
