From 057128c6b8a3aecc25086f6e8e2e1e8ab47db22a Mon Sep 17 00:00:00 2001
From: Jonathan Hutchison <jonathanhutchison@navapbc.com>
Date: Mon, 2 Feb 2026 14:01:05 -0500
Subject: [PATCH 1/3] Adds tealium script, attaches download attrs and
 listeners

---
 src/components/icon.astro         |  10 ++-
 src/components/link.astro         |  22 ++++-
 src/env.d.ts                      |   1 +
 src/layouts/base-layout.astro     |   3 +
 src/utils/tealium-click-events.ts | 144 ++++++++++++++++++++++++++++++
 5 files changed, 173 insertions(+), 7 deletions(-)
 create mode 100644 src/env.d.ts
 create mode 100644 src/utils/tealium-click-events.ts

diff --git a/src/components/icon.astro b/src/components/icon.astro
index 3aec152b..9e4c1606 100644
--- a/src/components/icon.astro
+++ b/src/components/icon.astro
@@ -4,9 +4,10 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 const iconStyles = cva({
-  base: 'usa-icon',
+  base: 'usa-icon text-middle',
   variants: {
     size: {
+      2: 'usa-icon--size-2',
       3: 'usa-icon--size-3',
       4: 'usa-icon--size-4',
       5: 'usa-icon--size-5',
@@ -20,10 +21,11 @@ const iconStyles = cva({
 })
 
 type Props = VariantProps<typeof iconStyles> & {
-  icon: SvgComponent
+  icon: SvgComponent,
+  class?: string
 }
 
-const { icon: Component, color, size, ...props } = Astro.props
+const { icon: Component, color, size, class: className, ...props } = Astro.props
 ---
 
-<Component {...props} class={iconStyles({ size, color })} aria-hidden="true" />
+<Component {...props} class={iconStyles({ size, color, className })} aria-hidden="true" />
diff --git a/src/components/link.astro b/src/components/link.astro
index cebbf016..c52a66e7 100644
--- a/src/components/link.astro
+++ b/src/components/link.astro
@@ -5,15 +5,21 @@ import type { RouteId } from 'astro-typesafe-routes/path'
 import type { HTMLAttributes } from 'astro/types'
 import type { VariantProps } from 'cva'
 import type { HrefOrTo } from '#utils/types'
+import Icon from './icon.astro'
+import FileDownload from '@uswds/uswds/img/usa-icons/file_download.svg'
+
 
 type Props<T extends RouteId> = Omit<HTMLAttributes<'a'>, 'href'> &
   VariantProps<typeof button> & {
     showIcon?: boolean
   } & HrefOrTo<T>
+    
+const downloadExts = ['.csv', '.pdf', '.json', '.docx', '.xlsx', '.xls']
 
 const props = Astro.props as Props<RouteId>
 
 let isExternal = false
+let isDownload = false
 let computedHref: string
 
 if ('to' in props && props.to) {
@@ -37,13 +43,23 @@ if ('to' in props && props.to) {
   throw new Error('Link component requires either "href" or "to" prop')
 }
 
+if(isExternal === false && downloadExts.some(ext => computedHref.endsWith(ext))){
+  isDownload = true
+}
+
 const { variant = 'link', size, showIcon = true, class: className, ...restProps } = props
 ---
 
 <a
   href={computedHref.replace(/\/+$/g, '/')}
-  target={isExternal ? '_blank' : undefined}
+  target={(isExternal || isDownload) ? '_blank' : undefined}
   rel={isExternal && !computedHref?.includes('cms.gov') ? 'noreferrer' : undefined}
-  class:list={[button({ variant, size }), isExternal && showIcon ? 'usa-link--external' : '', className]}
-  {...restProps}><slot /></a
+  class:list={[
+    button({ variant, size }), 
+    isExternal && showIcon ? 'usa-link--external' : '', 
+    className
+  ]}
+  data-tealium={isDownload ? 'download' : undefined}
+  {...restProps}
+  ><slot />{isDownload ? (<Icon icon={FileDownload} size={2} class="margin-left-05" />) : null}</a
 >
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 00000000..653b372e
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+declare let utag: any;
diff --git a/src/layouts/base-layout.astro b/src/layouts/base-layout.astro
index d6e6abfb..24848561 100644
--- a/src/layouts/base-layout.astro
+++ b/src/layouts/base-layout.astro
@@ -106,5 +106,8 @@ const getAbsolutePath = (path: string) => new URL(path, Astro.url.origin).toStri
         e.parentNode.insertBefore(f, e)
       })()
     </script>
+    <script>
+      import "#utils/tealium-click-events"
+    </script>
   </body>
 </html>
diff --git a/src/utils/tealium-click-events.ts b/src/utils/tealium-click-events.ts
new file mode 100644
index 00000000..04beb0c7
--- /dev/null
+++ b/src/utils/tealium-click-events.ts
@@ -0,0 +1,144 @@
+import { SITE_METADATA } from "./constants"
+const baseUrl = SITE_METADATA.url
+
+// Wait for USWDS js to finish
+document.addEventListener('DOMContentLoaded', () => {
+  const n_a = 'not applicable'
+
+  const links = document.querySelectorAll('a')
+  links.forEach((linkEl) => {
+    const tocContainer = document.getElementById('toc')
+    if (!linkEl.hasAttribute('data-tealium') && !tocContainer?.contains(linkEl)) {
+      linkEl.addEventListener('click', () => {
+        const currentTarget = linkEl
+
+        if (currentTarget.href.startsWith(baseUrl)) {
+          // internal link clicked
+          utag.link({
+            event_name: 'internal_link_clicked',
+            link_type: 'link_other',
+            link_url: linkEl.href,
+            parent_component_heading: n_a,
+            parent_component_type: n_a,
+            text: linkEl.textContent,
+          })
+        }
+        else {
+          // external link clicked
+          utag.link({
+            event_name: 'external_link_click',
+            text: currentTarget.textContent,
+            link_type: 'link_external',
+            link_url: currentTarget.href,
+            parent_component_heading: n_a,
+            parent_component_type: n_a,
+          })
+        }
+      })
+    }
+  })
+
+  // button clicks
+  const buttons = document.querySelectorAll('[data-tealium="copy_button"]')
+  buttons.forEach((buttonEl) => {
+    buttonEl.addEventListener('click', () => {
+      const currentTarget = buttonEl
+
+      utag.link({
+        event_name: 'button_engagement',
+        button_style: n_a,
+        button_type: 'button',
+        link_type: 'link_other',
+        link_url: n_a,
+        parent_component_heading: n_a,
+        parent_component_type: n_a,
+        text: currentTarget.textContent,
+      })
+    })
+  })
+
+  // accordion clicks
+  const accordions = document.querySelectorAll('[data-tealium="accordion"]')
+  accordions.forEach((accordionEl) => {
+    accordionEl.addEventListener('click', () => {
+      const currentTarget = accordionEl
+      if (currentTarget.getAttribute('aria-expanded') === 'false') {
+        utag.link({
+          event_name: 'accordion_opened',
+          heading: currentTarget.textContent,
+          parent_component_heading: n_a,
+          parent_component_type: n_a,
+        })
+      }
+    })
+  })
+
+  // file downloads
+  const downloads = document.querySelectorAll('[data-tealium="download"]')
+  downloads.forEach((downloadEl) => {
+    downloadEl.addEventListener('click', () => {
+      const currentTarget = downloadEl as HTMLAnchorElement
+
+      utag.link({
+        event_name: 'file_download',
+        file_name: currentTarget.pathname.split('/').pop(),
+        file_extension: currentTarget.href.split('.').pop(),
+        file_postDate: n_a,
+        link_type: 'link_download',
+        link_url: currentTarget.href,
+        text: currentTarget.textContent,
+      })
+    })
+  })
+
+  // Navigation clicks
+  const mainNavEls = document.querySelectorAll('[data-tealium="main_nav"]')
+  const identifierEls = document.querySelectorAll('[data-tealium="identifier"]')
+  const leftRailEls = document.querySelectorAll('[data-tealium="left_rail"]')
+  const footerEls = document.querySelectorAll('[data-tealium="footer"]')
+  const tocEls = document.querySelectorAll('[data-tealium="toc"] a');
+
+  [
+    ...mainNavEls,
+    ...identifierEls,
+    ...leftRailEls,
+    ...tocEls,
+    ...footerEls,
+  ].forEach((navigationEl) => {
+    navigationEl.addEventListener('click', () => {
+      const currentTarget = navigationEl as HTMLAnchorElement
+      const navigation_type = currentTarget.getAttribute('data-tealium') || 'right_rail'
+
+      let heading = n_a
+
+      if (navigation_type === 'right_rail') {
+        heading = 'On this page'
+      }
+      else if (navigation_type === 'left_rail') {
+        const closest = navigationEl?.closest('.usa-sidenav > .usa-sidenav__item')?.querySelector('a')
+
+        // Only track "parent" element as heading, ignore if clicked element was the "parent"
+        if (closest && closest !== navigationEl) {
+          heading = closest.textContent
+        }
+      }
+      else if (navigation_type === 'main_nav') {
+        const closest = navigationEl.closest('.usa-nav__primary .usa-nav__primary-item')?.querySelector('button')
+
+        // Only track "parent" element as heading, ignore if clicked element was the "parent"
+        if (closest && closest !== navigationEl) {
+          heading = closest.textContent
+        }
+      }
+
+      utag.link({
+        event_name: 'navigation_clicked',
+        heading,
+        link_type: 'link_other',
+        link_url: currentTarget.href,
+        navigation_type,
+        text: currentTarget.innerText,
+      })
+    })
+  })
+})

From e02a71e81425e6c39618eaedd6bfdde95b26fe8e Mon Sep 17 00:00:00 2001
From: Jonathan Hutchison <jonathanhutchison@navapbc.com>
Date: Thu, 12 Feb 2026 12:13:07 -0500
Subject: [PATCH 2/3] Add build environment to site for tealium

---
 astro.config.mjs                             | 14 +++++++++++++-
 ops/Jenkinsfile.cbc-build-deploy-akamai      |  3 +++
 ops/Jenkinsfile.cbc-build-deploy-prod-akamai |  3 +++
 src/layouts/base-layout.astro                |  5 +++--
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 11d0eede..154105a4 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -2,7 +2,7 @@ import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
 import expressiveCode from 'astro-expressive-code'
 import typesafeRoutes from 'astro-typesafe-routes'
-import { defineConfig } from 'astro/config'
+import { defineConfig, envField } from 'astro/config'
 
 import { SITE_METADATA } from './src/utils/constants'
 
@@ -14,6 +14,18 @@ export default defineConfig({
   },
   trailingSlash: 'always',
 
+  env: {
+    schema: {
+      // The deployed environment, set in Jenkins script
+      SITE_ENV: envField.enum({
+        context: 'client',
+        access: 'public',
+        values: ['test', 'staging', 'prod'],
+        default: 'prod',
+      }),
+    },
+  },
+
   markdown: {
     remarkRehype: {
       footnoteLabelProperties: {
diff --git a/ops/Jenkinsfile.cbc-build-deploy-akamai b/ops/Jenkinsfile.cbc-build-deploy-akamai
index dd861376..a5ac50c4 100644
--- a/ops/Jenkinsfile.cbc-build-deploy-akamai
+++ b/ops/Jenkinsfile.cbc-build-deploy-akamai
@@ -87,6 +87,9 @@ pipeline {
     }
 
     stage("Run Build script") {
+      environment {
+        SITE_ENV = params.SITE_ENV
+      }
       steps {
         sh """
         npm run build
diff --git a/ops/Jenkinsfile.cbc-build-deploy-prod-akamai b/ops/Jenkinsfile.cbc-build-deploy-prod-akamai
index 857c7fa7..f730166c 100644
--- a/ops/Jenkinsfile.cbc-build-deploy-prod-akamai
+++ b/ops/Jenkinsfile.cbc-build-deploy-prod-akamai
@@ -105,6 +105,9 @@ pipeline {
     }
     
     stage("Run Build script") {
+      environment {
+        SITE_ENV = params.SITE_ENV
+      }
       steps {
         sh """
         npm run build
diff --git a/src/layouts/base-layout.astro b/src/layouts/base-layout.astro
index 24848561..185f7996 100644
--- a/src/layouts/base-layout.astro
+++ b/src/layouts/base-layout.astro
@@ -8,6 +8,7 @@ import openSansWoff2 from '@fontsource-variable/open-sans/files/open-sans-latin-
 import '@fontsource-variable/open-sans'
 import '#assets/sass/styles.scss'
 import { SITE_METADATA } from '#utils/constants'
+import { SITE_ENV } from 'astro:env/client'
 
 type Props = {
   title: string
@@ -16,7 +17,7 @@ type Props = {
 
 const { title, description } = Astro.props
 
-const TEALIUM_ENV = import.meta.env.PROD ? 'prod' : 'dev'
+const TEALIUM_ENV = SITE_ENV === 'prod' ? 'prod' : 'dev'
 const getAbsolutePath = (path: string) => new URL(path, Astro.url.origin).toString()
 ---
 
@@ -107,7 +108,7 @@ const getAbsolutePath = (path: string) => new URL(path, Astro.url.origin).toStri
       })()
     </script>
     <script>
-      import "#utils/tealium-click-events"
+      import '#utils/tealium-click-events'
     </script>
   </body>
 </html>

From 10aa8b02edd0bdf46a89394e9d438ae8bbb6ba65 Mon Sep 17 00:00:00 2001
From: Jonathan Hutchison <jonathanhutchison@navapbc.com>
Date: Thu, 12 Feb 2026 14:48:36 -0500
Subject: [PATCH 3/3] Fix jenkins script syntax

---
 ops/Jenkinsfile.cbc-build-deploy-akamai      | 2 +-
 ops/Jenkinsfile.cbc-build-deploy-prod-akamai | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ops/Jenkinsfile.cbc-build-deploy-akamai b/ops/Jenkinsfile.cbc-build-deploy-akamai
index a5ac50c4..166a4517 100644
--- a/ops/Jenkinsfile.cbc-build-deploy-akamai
+++ b/ops/Jenkinsfile.cbc-build-deploy-akamai
@@ -88,7 +88,7 @@ pipeline {
 
     stage("Run Build script") {
       environment {
-        SITE_ENV = params.SITE_ENV
+        SITE_ENV = "${params.SITE_ENV}"
       }
       steps {
         sh """
diff --git a/ops/Jenkinsfile.cbc-build-deploy-prod-akamai b/ops/Jenkinsfile.cbc-build-deploy-prod-akamai
index f730166c..917ae02c 100644
--- a/ops/Jenkinsfile.cbc-build-deploy-prod-akamai
+++ b/ops/Jenkinsfile.cbc-build-deploy-prod-akamai
@@ -106,7 +106,7 @@ pipeline {
     
     stage("Run Build script") {
       environment {
-        SITE_ENV = params.SITE_ENV
+        SITE_ENV = "${params.SITE_ENV}"
       }
       steps {
         sh """