Addition of Adobe Analytics (#182)

* first pass at AA impl, scripts confirmed inserted and sending requests * Adding AA fixes * AA is not typesafe, _satellite requires 'false' not false * Updated creator field * SPA to stop multiple loads * removed jsAbort/spa hack * Trim whitespace from code * Added custom document to allow access to the HMTL body tag
DTS-STN · Feb 28, 2022 · e82a12f · e82a12f
1 parent 01c14f3
commit e82a12f
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 65 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next"
 }
diff --git a/client-state/store.ts b/client-state/store.ts
@@ -94,6 +94,18 @@ export const RootStore = types
     activeTab: types.optional(types.number, 0),
     lang: types.enumeration(Object.values(Language)),
   })
+  .views((self) => ({
+    getTabNameForAnalytics(index: number) {
+      if (index == 0) {
+        return 'questions'
+      } else if (index == 1) {
+        return 'results'
+      } else if (index == 2) {
+        return 'faq'
+      }
+      return 'unknown'
+    },
+  }))
   .actions((self) => ({
     setActiveTab(num: number) {
       self.activeTab = num

diff --git a/components/Document/index.tsx b/components/Document/index.tsx
@@ -0,0 +1,22 @@
+import Head from 'next/head'
+import { WebTranslations } from '../../i18n/web'
+import { useTranslation } from '../Hooks'
+
+export const HeadDoc = () => {
+  const tsln = useTranslation<WebTranslations>()
+
+  return (
+    <Head>
+      <title>{tsln.title}</title>
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      <link rel="preconnect" href="https://fonts.googleapis.com"></link>
+      <link rel="preconnect" href="https://fonts.gstatic.com"></link>
+      <link
+        href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Noto+Sans&family=Patua+One&display=swap"
+        rel="stylesheet"
+        crossOrigin="anonymous"
+      ></link>
+      <script src="//assets.adobedtm.com/be5dfd287373/0127575cd23a/launch-913b1beddf7a-staging.min.js"></script>
+    </Head>
+  )
+}
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -1,4 +1,3 @@
-import Head from 'next/head'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { WebTranslations } from '../../i18n/web'
@@ -19,17 +18,6 @@ export const Layout: React.VFC<{
 
   return (
     <>
-      <Head>
-        <title>{tsln.title}</title>
-        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-        <link rel="preconnect" href="https://fonts.googleapis.com"></link>
-        <link rel="preconnect" href="https://fonts.gstatic.com"></link>
-        <link
-          href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Noto+Sans&family=Patua+One&display=swap"
-          rel="stylesheet"
-          crossOrigin="anonymous"
-        ></link>
-      </Head>
       <SCLabsTestHeader />
       <main id="elig">
         <div className="mx-4 min-h-screen">

diff --git a/components/Tabs/index.tsx b/components/Tabs/index.tsx
@@ -1,9 +1,11 @@
 import { Tab } from '@headlessui/react'
 import { observer } from 'mobx-react'
 import { Instance } from 'mobx-state-tree'
+import { useRouter } from 'next/router'
 import { RootStore } from '../../client-state/store'
 import { WebTranslations } from '../../i18n/web'
 import { ResponseSuccess } from '../../utils/api/definitions/types'
+import { sendAnalyticsRequest } from '../../utils/web/helpers/utils'
 import { FAQ } from '../FAQ'
 import { ComponentFactory } from '../Forms/ComponentFactory'
 import { useStore, useTranslation } from '../Hooks'
@@ -12,13 +14,26 @@ import { ResultsPage } from '../ResultsPage'
 export const Tabs: React.FC<ResponseSuccess> = observer((props) => {
   const root: Instance<typeof RootStore> = useStore()
   const tsln = useTranslation<WebTranslations>()
+  const locale = useRouter().locale
 
   return (
     <Tab.Group
       key={root.activeTab}
       defaultIndex={root.activeTab}
       onChange={(index) => {
         root.setActiveTab(index)
+        if (process.browser) {
+          const win = window as Window &
+            typeof globalThis & { adobeDataLayer: any; _satellite: any }
+          const lang = tsln.langLong
+          const creator = tsln.creator
+          const title =
+            lang +
+            '-sc labs-eligibility estimator-' +
+            root.getTabNameForAnalytics(index)
+
+          sendAnalyticsRequest(lang, title, creator, win)
+        }
       }}
     >
       <Tab.List

diff --git a/i18n/web/en.ts b/i18n/web/en.ts
@@ -10,6 +10,8 @@ const en: WebTranslations = {
     'You cannot apply for services or benefits through this test site. Parts of this site may not work and will change.',
   otherLang: 'Français',
   otherLangCode: 'FR',
+  langLong: 'eng',
+  creator: 'Employment and Social Development Canada',
   search: 'Search Canada.ca',
   breadcrumb1Title: 'Canada.ca',
   breadcrumb1URL: 'https://www.canada.ca',

diff --git a/i18n/web/fr.ts b/i18n/web/fr.ts
@@ -10,6 +10,8 @@ const fr: WebTranslations = {
     'Vous ne pouvez pas demander de services ou de prestations par l’intermédiaire de ce site d’essai. Certaines parties du site pourraient ne pas fonctionner et seront modifiées.',
   otherLang: 'English',
   otherLangCode: 'EN',
+  langLong: 'fra',
+  creator: 'Emploi et Développement social Canada',
   search: 'Rechercher dans Canada.ca',
   breadcrumb1Title: 'Canada.ca',
   breadcrumb1URL: 'https://www.canada.ca/fr.html',

diff --git a/i18n/web/index.ts b/i18n/web/index.ts
@@ -12,6 +12,8 @@ export type WebTranslations = {
   testSiteHeader: string
   otherLang: string
   otherLangCode: string
+  langLong: string
+  creator: string
   search: string
   breadcrumb1Title: string
   breadcrumb1URL: string

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,15 @@
+import { Head, Html, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+        <script src="/scripts/adobe.js"></script>
+        <script type="text/javascript">_satellite.pageBottom()</script>
+      </body>
+    </Html>
+  )
+}
diff --git a/pages/eligibility/index.tsx b/pages/eligibility/index.tsx
@@ -1,15 +1,38 @@
 import { observer } from 'mobx-react'
 import { GetStaticProps, NextPage } from 'next'
+import { useEffect } from 'react'
+import { HeadDoc } from '../../components/Document'
+import { useStore, useTranslation } from '../../components/Hooks'
 import { Layout } from '../../components/Layout'
 import { Tabs } from '../../components/Tabs'
+import { WebTranslations } from '../../i18n/web'
 import { Language } from '../../utils/api/definitions/enums'
 import {
   ResponseError,
   ResponseSuccess,
 } from '../../utils/api/definitions/types'
+import { sendAnalyticsRequest } from '../../utils/web/helpers/utils'
 import { mockPartialGetRequest } from '../../__tests__/pages/api/factory'
 
 const Eligibility: NextPage<ResponseSuccess | ResponseError> = (props) => {
+  const root = useStore()
+  const tsln = useTranslation<WebTranslations>()
+
+  useEffect(() => {
+    if (process.browser) {
+      const win = window as Window &
+        typeof globalThis & { adobeDataLayer: any; _satellite: any }
+      const lang = tsln.langLong
+      const creator = tsln.creator
+      const title =
+        lang +
+        '-sc labs-eligibility estimator-' +
+        root.getTabNameForAnalytics(0)
+
+      sendAnalyticsRequest(lang, title, creator, win)
+    }
+  })
+
   if ('error' in props) {
     return (
       <Layout>
@@ -19,9 +42,12 @@ const Eligibility: NextPage<ResponseSuccess | ResponseError> = (props) => {
   }
 
   return (
-    <Layout>
-      <Tabs {...props} />
-    </Layout>
+    <>
+      <HeadDoc />
+      <Layout>
+        <Tabs {...props} />
+      </Layout>
+    </>
   )
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,68 +1,87 @@
 import type { GetStaticProps, NextPage } from 'next'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import { Alert } from '../components/Alert'
+import { HeadDoc } from '../components/Document'
 import { useTranslation } from '../components/Hooks'
 import { Layout } from '../components/Layout'
 import { WebTranslations } from '../i18n/web'
 import { EstimationSummaryState } from '../utils/api/definitions/enums'
+import { sendAnalyticsRequest } from '../utils/web/helpers/utils'
 
 const Home: NextPage = (props) => {
   const router = useRouter()
   const tsln = useTranslation<WebTranslations>()
-  return (
-    <Layout>
-      <div className="mt-18 text-black">
-        <p
-          className="mb-4 text-black"
-          dangerouslySetInnerHTML={{ __html: tsln.homePageP1 }}
-        />
-        <p
-          className="mb-4 text-black"
-          dangerouslySetInnerHTML={{ __html: tsln.homePageP2 }}
-        />
-        <p
-          className="mb-4 text-black"
-          dangerouslySetInnerHTML={{ __html: tsln.homePageP3 }}
-        />
-        <p
-          className="mb-4 text-black"
-          dangerouslySetInnerHTML={{ __html: tsln.homePageP4 }}
-        />
-        <p
-          className="mb-4 text-black"
-          dangerouslySetInnerHTML={{ __html: tsln.homePageP5 }}
-        />
-        <p
-          className="mb-4 text-black"
-          dangerouslySetInnerHTML={{ __html: tsln.homePageP6 }}
-        />
-      </div>
 
-      <details className="py-4">
-        <summary className="text-default-text">{tsln.privacyDiscTitle}</summary>
-        <div className="p-4">
+  useEffect(() => {
+    // only run on mount on the client
+    if (process.browser) {
+      const win = window as Window &
+        typeof globalThis & { adobeDataLayer: any; _satellite: any }
+      const lang = tsln.langLong
+      const creator = tsln.creator
+      const title = lang + '-sc labs-eligibility estimator-home'
+
+      sendAnalyticsRequest(lang, title, creator, win)
+    }
+  })
+
+  return (
+    <>
+      <HeadDoc />
+      <Layout>
+        <div className="mt-18 text-black">
+          <p
+            className="mb-4 text-black"
+            dangerouslySetInnerHTML={{ __html: tsln.homePageP1 }}
+          />
           <p
-            className="summary-link"
-            dangerouslySetInnerHTML={{ __html: tsln.privacyDisc }}
-          ></p>
+            className="mb-4 text-black"
+            dangerouslySetInnerHTML={{ __html: tsln.homePageP2 }}
+          />
+          <p
+            className="mb-4 text-black"
+            dangerouslySetInnerHTML={{ __html: tsln.homePageP3 }}
+          />
+          <p
+            className="mb-4 text-black"
+            dangerouslySetInnerHTML={{ __html: tsln.homePageP4 }}
+          />
+          <p
+            className="mb-4 text-black"
+            dangerouslySetInnerHTML={{ __html: tsln.homePageP5 }}
+          />
+          <p
+            className="mb-4 text-black"
+            dangerouslySetInnerHTML={{ __html: tsln.homePageP6 }}
+          />
         </div>
-      </details>
 
-      <Alert
-        title={tsln.disclaimerTitle}
-        type={EstimationSummaryState.UNAVAILABLE}
-        insertHTML
-      >
-        {tsln.disclaimer}
-      </Alert>
+        <details className="py-4">
+          <summary className="text-default-text">
+            {tsln.privacyDiscTitle}
+          </summary>
+          <div className="p-4">
+            <p>{tsln.privacyDisc}</p>
+          </div>
+        </details>
+
+        <Alert
+          title={tsln.disclaimerTitle}
+          type={EstimationSummaryState.UNAVAILABLE}
+          insertHTML
+        >
+          {tsln.disclaimer}
+        </Alert>
 
-      <button
-        className="btn btn-primary w-28 my-8"
-        onClick={(e) => router.push('/eligibility')}
-      >
-        {tsln.next}
-      </button>
-    </Layout>
+        <button
+          className="btn btn-primary w-28 my-8"
+          onClick={(e) => router.push('/eligibility')}
+        >
+          {tsln.next}
+        </button>
+      </Layout>
+    </>
   )
 }
 

diff --git a/public/scripts/adobe.js b/public/scripts/adobe.js
@@ -0,0 +1,2 @@
+window.adobeDataLayer = adobeDataLayer
+window._satellite = _satellite
diff --git a/utils/web/helpers/utils.ts b/utils/web/helpers/utils.ts
@@ -13,3 +13,24 @@ export async function dataFetcher(url) {
   }
   return data
 }
+
+export const sendAnalyticsRequest = (
+  lang: string,
+  title: string,
+  creator: string,
+  window: Window & typeof globalThis & { adobeDataLayer: any; _satellite: any }
+) => {
+  if (process.browser) {
+    window.adobeDataLayer.push({
+      event: 'pageLoad',
+      page: {
+        title: title.trim(),
+        language: lang.trim(),
+        creator: creator.trim(),
+        accessRights: '2',
+        service:
+          'ESDC-EDSC_OldAgeBenefitsEstimator-EstimateurDePrestationsDeVieillesse',
+      },
+    })
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		window.adobeDataLayer = adobeDataLayer
		window._satellite = _satellite