Adds Google analytics and US gov analytics info (#298)

Co-authored-by: Tanner Heffner <tanner.heffner@agile6.com>
department-of-veterans-affairs · Dec 22, 2023 · ba55510 · ba55510
1 parent 286ec8f
commit ba55510
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/envs/.env.example b/envs/.env.example
@@ -20,7 +20,7 @@ REDIS_URL=redis://127.0.0.1:6379
 # for local assets from vets-website
 NEXT_PUBLIC_ASSETS_URL=/generated/
 
-# google analytics
-GOOGLE_TAG_MANAGER_AUTH=
-GOOGLE_TAG_MANAGER_PREVIEW=
-GOOGLE_TAG_MANAGER_ID=
+# google analytics (There are the dev environment credentials)
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-WFJWBD
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_AUTH=N9BisSDKAwJENFQtQIEvXQ
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_PREVIEW=env-423
diff --git a/envs/.env.tugboat b/envs/.env.tugboat
@@ -11,10 +11,9 @@ REDIS_URL=redis://redis:6379
 NEXT_PUBLIC_ASSETS_URL=/generated/
 
 # google analytics
-# move these to tugboat ui most likely
-GOOGLE_TAG_MANAGER_AUTH=
-GOOGLE_TAG_MANAGER_PREVIEW=
-GOOGLE_TAG_MANAGER_ID=
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-WFJWBD
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_AUTH=N9BisSDKAwJENFQtQIEvXQ
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_PREVIEW=env-423
 
 # For Drupal preview
 DRUPAL_PREVIEW_SECRET=secret

diff --git a/src/lib/analytics/index.tsx b/src/lib/analytics/index.tsx
@@ -1,9 +1,10 @@
 import TagManager from 'react-gtm-module'
+
 export const GTM_ID = process.env.GOOGLE_TAG_MANAGER_ID
 export const TAG_MANAGER_ARGS = {
-  gtmId: process.env.GOOGLE_TAG_MANAGER_ID,
-  auth: process.env.GOOGLE_TAG_MANAGER_AUTH,
-  preview: process.env.GOOGLE_TAG_MANAGER_PREVIEW,
+  gtmId: process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID,
+  auth: process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_AUTH,
+  preview: process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_PREVIEW,
 }
 
 /**

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -3,7 +3,7 @@ import type { AppProps } from 'next/app'
 import type { ReactElement, ReactNode } from 'react'
 import { useEffect } from 'react'
 import { defineCustomElements } from '@department-of-veterans-affairs/web-components/loader'
-import { TAG_MANAGER_ARGS } from '@/lib/analytics'
+import { TAG_MANAGER_ARGS, pageview } from '@/lib/analytics'
 import TagManager from 'react-gtm-module'
 import '@/assets/styles/globals.css'
 
@@ -31,7 +31,17 @@ export default function MyApp({
   useEffect(() => {
     TagManager.initialize(TAG_MANAGER_ARGS)
     defineCustomElements()
-  }, [])
+
+    const handleRouteChange = (url: string) => {
+      pageview(url)
+    }
+
+    router.events.on('routeChangeComplete', handleRouteChange)
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [router.events])
 
   return getLayout(<Component {...pageProps} key={router.asPath} />)
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -22,6 +22,9 @@ const Document = () => {
         />
         <link rel="stylesheet" href={`${ASSETS_URL}style.css`} />
 
+        {/* Preconnect to google tag manager domain */}
+        <link rel="preconnect" href="https://www.googletagmanager.com" />
+
         {/* Preload main fonts */}
         <link
           rel="preload"
@@ -107,6 +110,14 @@ const Document = () => {
           strategy="afterInteractive"
           src={`${ASSETS_URL}polyfills.entry.js`}
         />
+
+        {/* We participate in the US government’s analytics program. See the data at analytics.usa.gov. https://github.com/digital-analytics-program/gov-wide-code */}
+        <Script
+          src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=VA"
+          id="_fed_an_ua_tag"
+          strategy="afterInteractive"
+          async
+        />
       </Head>
       <body className="merger">
         <noscript>