Add analytics tags for error pages and don't fire the pageLoad beacon…

… on them
DTS-STN · Oct 23, 2024 · b38baf4 · b38baf4
1 parent e9c70a9
commit b38baf4
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 25 deletions.
diff --git a/components/MetaData.tsx b/components/MetaData.tsx
@@ -1,5 +1,7 @@
 import Head from 'next/head'
+import router from 'next/router'
 import Script from 'next/script'
+import { useEffect } from 'react'
 
 interface Content {
   title: string
@@ -9,6 +11,7 @@ interface Content {
   creator: string
   accessRights: string
   service: string
+  statusCode: string
 }
 
 interface Data {
@@ -21,8 +24,45 @@ interface MetaDataProps {
   data: Data
 }
 
+// To help prevent double firing of adobe analytics pageLoad event
+let appPreviousLocationPathname = ''
+
+/* eslint-disable */
+// make typescript happy
+declare global {
+  interface Window {
+    adobeDataLayer: any
+  }
+}
+/* eslint-enable */
+
 const MetaData = ({ language, data }: MetaDataProps) => {
   const d = language === 'en' ? data.data_en : data.data_fr
+  const isErrorPage = typeof d.statusCode !== 'undefined'
+  /** Web Analytics - taken from Google Analytics example
+   *  @see https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics
+   * */
+  useEffect(() => {
+    const handleRouteChange = () => {
+      // only push event if pathname is different
+      if (window.location.pathname !== appPreviousLocationPathname) {
+        window.adobeDataLayer?.push?.({ event: 'pageLoad' })
+        appPreviousLocationPathname = window.location.pathname
+      }
+    }
+    if (isErrorPage) {
+      // Suppress the pageLoad entirely on error pages
+      return
+    }
+
+    handleRouteChange()
+    router.events.on('routeChangeComplete', handleRouteChange)
+    router.events.on('hashChangeComplete', handleRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+      router.events.off('hashChangeComplete', handleRouteChange)
+    }
+  }, [router.events])
 
   return (
     <>
@@ -42,8 +82,12 @@ const MetaData = ({ language, data }: MetaDataProps) => {
             }
           `}
         </style>
+        {isErrorPage ? (
+          <title data-gc-analytics-error={d.statusCode}>{d.title}</title>
+        ) : (
+          <title>{d.title}</title>
+        )}
 
-        <title>{d.title}</title>
         <meta charSet="utf-8" />
         <meta name="description" content={d.desc} />
         <meta name="author" content={d.author} />

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -60,6 +60,7 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
       service: 'ESDC-EDSC_MSCA-MSDC-SCH',
       creator: 'Employment and Social Development Canada',
       accessRights: '1',
+      statusCode: '404',
     },
     data_fr: {
       title: `Nous ne pouvons trouver cette page Web - 404 - Mon dossier Service Canada`,
@@ -69,6 +70,7 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
       service: 'ESDC-EDSC_MSCA-MSDC-SCH',
       creator: 'Emploi et Développement social Canada',
       accessRights: '1',
+      statusCode: '404',
     },
   }
   return {

diff --git a/pages/500.tsx b/pages/500.tsx
@@ -60,6 +60,7 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
       service: 'ESDC-EDSC_MSCA-MSDC-SCH',
       creator: 'Employment and Social Development Canada',
       accessRights: '1',
+      statusCode: '500',
     },
     data_fr: {
       title: `Nous ne pouvons trouver cette page Web - 500 - Mon dossier Service Canada`,
@@ -69,6 +70,7 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
       service: 'ESDC-EDSC_MSCA-MSDC-SCH',
       creator: 'Emploi et Développement social Canada',
       accessRights: '1',
+      statusCode: '500',
     },
   }
   return {

diff --git a/pages/_app.js b/pages/_app.js
@@ -8,9 +8,6 @@ import ErrorBoundary from '../components/ErrorBoundary'
 import { useEffect } from 'react'
 config.autoAddCss = false
 
-// To help prevent double firing of adobe analytics pageLoad event
-let appPreviousLocationPathname = ''
-
 export default function MyApp({ Component, pageProps, router }) {
   /* istanbul ignore next */
   if (Component.getLayout) {
@@ -20,27 +17,6 @@ export default function MyApp({ Component, pageProps, router }) {
   Modal.setAppElement('#__next')
   const display = { hideBanner: pageProps.hideBanner }
 
-  /** Web Analytics - taken from Google Analytics example
-   *  @see https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics
-   * */
-  useEffect(() => {
-    const handleRouteChange = () => {
-      // only push event if pathname is different
-      if (window.location.pathname !== appPreviousLocationPathname) {
-        window.adobeDataLayer?.push?.({ event: 'pageLoad' })
-        appPreviousLocationPathname = window.location.pathname
-      }
-    }
-
-    handleRouteChange()
-    router.events.on('routeChangeComplete', handleRouteChange)
-    router.events.on('hashChangeComplete', handleRouteChange)
-    return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
-      router.events.off('hashChangeComplete', handleRouteChange)
-    }
-  }, [router.events])
-
   /* istanbul ignore next */
   return (
     <ErrorBoundary>