diff --git a/.eslintrc.json b/.eslintrc.json index bffb357a7..15b1ed91a 100644 --- 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 index 947445b94..9f075aff3 100644 --- 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 new file mode 100644 index 000000000..4666f5737 --- /dev/null +++ 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() + + return ( + + {tsln.title} + + + + + + + ) +} diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx index edbe074b7..a747c2d84 100644 --- 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 ( <> - - {tsln.title} - - - - -
diff --git a/components/Tabs/index.tsx b/components/Tabs/index.tsx index 510c411ef..db560c592 100644 --- 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,6 +14,7 @@ import { ResultsPage } from '../ResultsPage' export const Tabs: React.FC = observer((props) => { const root: Instance = useStore() const tsln = useTranslation() + const locale = useRouter().locale return ( = observer((props) => { 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) + } }} > + + +
+ + + + + + ) +} diff --git a/pages/eligibility/index.tsx b/pages/eligibility/index.tsx index 5abfd866f..12a46af75 100644 --- 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 = (props) => { + const root = useStore() + const tsln = useTranslation() + + 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 ( @@ -19,9 +42,12 @@ const Eligibility: NextPage = (props) => { } return ( - - - + <> + + + + + ) } diff --git a/pages/index.tsx b/pages/index.tsx index b3c13014d..ede650465 100644 --- 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() - return ( - -
-

-

-

-

-

-

-

-
- {tsln.privacyDiscTitle} -
+ 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 ( + <> + + +
+

+ className="mb-4 text-black" + dangerouslySetInnerHTML={{ __html: tsln.homePageP2 }} + /> +

+

+

+

-
- - {tsln.disclaimer} - +
+ + {tsln.privacyDiscTitle} + +
+

{tsln.privacyDisc}

+
+
+ + + {tsln.disclaimer} + - - + + + ) } diff --git a/public/scripts/adobe.js b/public/scripts/adobe.js new file mode 100644 index 000000000..c979f8886 --- /dev/null +++ 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 index 85b4d9e80..79f668a37 100644 --- 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', + }, + }) + } +}