diff --git a/envs/.env.example b/envs/.env.example
index c7777c16b..c37ce0dad 100644
--- 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
index ed4246a5a..e01269326 100644
--- 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
index fe13f8f02..46d285d24 100644
--- 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
index 5f1f3c400..19b68339d 100644
--- 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()
}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 79f8ed787..647955dae 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -22,6 +22,9 @@ const Document = () => {
/>
+ {/* Preconnect to google tag manager domain */}
+
+
{/* Preload main fonts */}
{
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 */}
+