Add Vercel Analytics

Author: webstackdev

_TODO.md

@@ -71,20 +71,6 @@ Implement mitigations in test/e2e/specs/07-performance/PERFORMANCE.md
 
 Right now we're using string literals to define HTML email templates for site mails. We should use Nunjucks with the rule-checking for valid CSS in HTML emails like we have in the corporate email footer repo.
 
-## Analytics
-
-Vercel Analytics
-
-- Highlighter component
-- Social Shares component
-- Social Embeds: Track embed interactions
-- Cookie Consent
-- Download Form component
-
-npm i @vercel/analytics
-import Analytics from '@vercel/analytics/astro'
-https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app
-
 ## Set up webmentions
 
 Needs to add real API key and test

src/components/Analytics/index.astro

@@ -0,0 +1,22 @@
+---
+import VercelAnalytics from '@vercel/analytics/astro'
+import { isProd } from '@components/scripts/utils/environmentClient'
+
+const prod = isProd()
+const mode = prod ? 'production' : 'development'
+const debug = !prod
+---
+
+<script>
+  window.webAnalyticsBeforeSend = (event) => {
+    /** Ignore testing pages in tracking */
+    if (event?.url?.includes('/testing/')) {
+      return null
+    }
+    return event
+  }
+</script>
+<VercelAnalytics
+  debug={debug}
+  mode={mode}
+/>

src/components/Pwa/PrefetchOfflinePage/index.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * Prefetch offline page during idle time for service worker
+ */
+---
+
+<script>
+  import { handleScriptError } from '@components/scripts/errors/handler'
+
+  const prefetch = (url: string) => {
+    try {
+      fetch(url, { credentials: 'same-origin' }).catch((error) => {
+        handleScriptError(error, { scriptName: 'BaseLayout', operation: `prefetch ${url}` })
+      })
+    } catch (error) {
+      handleScriptError(error, { scriptName: 'BaseLayout', operation: `prefetch ${url}` })
+    }
+  }
+  if (typeof requestIdleCallback === 'function') {
+    requestIdleCallback(() => prefetch('/offline'))
+  } else {
+    setTimeout(() => prefetch('/offline'), 500)
+  }
+</script>

src/layouts/BaseLayout.astro

@@ -1,11 +1,13 @@
 ---
+import Analytics from '@components/Analytics/index.astro'
 import Breadcrumbs from '@components/Breadcrumbs/index.astro'
 import Container from '@components/Layout/Container/index.astro'
 import CookieConsent from '@components/Consent/Banner/index.astro'
 import Footer from '@components/Footer/index.astro'
 import HeadContent from '@components/Head/index.astro'
 import Header from '@components/Header/index.astro'
 import Content from '@components/Layout/Content/index.astro'
+import PrefetchOfflinePage from '@components/Pwa/PrefetchOfflinePage/index.astro'
 import PwaTitleBar from '@components/Pwa/TitleBar/index.astro'
 import RegisterServiceWorker from '@components/Pwa/ServiceWorker/index.astro'
 import Skip from '@components/Layout/Skip/index.astro'
@@ -105,16 +107,12 @@ const {
         </Content>
         <Footer />
       </Container>
+      {/** Vercel Analytics */ }
+      <Analytics />
       {/* Register the service worker via @vite-pwa/astro virtual module */}
       <RegisterServiceWorker />
-      <script>
-        const prefetch = (url: string) => fetch(url, { credentials: 'same-origin' }).catch(() => {})
-        if (typeof requestIdleCallback === 'function') {
-          requestIdleCallback(() => prefetch('/offline'))
-        } else {
-          setTimeout(() => prefetch('/offline'), 500)
-        }
-      </script>
+      {/* Prefetch offline page during idle time for service worker */}
+      <PrefetchOfflinePage />
     </body>
   </>
 </html>