diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx index 3f7ab74..0777a75 100644 --- a/components/statistic/Statistic.tsx +++ b/components/statistic/Statistic.tsx @@ -3,21 +3,22 @@ import { FC } from 'react'; import { Page } from '../common/Page'; const statsDocs = [ - { label: 'Nombre de téléchargements', size: 20877 }, - { label: 'Volume total analysé (To)', size: 1293.1 }, - { label: 'Volume total tagué à éliminer (To)', size: 9.1 }, + { label: 'Nombre de téléchargements', size: 20877, date: '' }, + { label: 'Volume total analysé', size: '1293.1 To', date: '' }, + { label: 'Volume total tagué à éliminer', size: '9.1 To', date: '' }, + { label: 'Parcourus en avion', size: '8489 Kms', date: '' }, ]; const statsMails = [ - { label: 'Nombre de téléchargements', size: 5614 }, - { label: 'Nombre de pst déposés', size: 513 }, - { label: 'Volume total analysé (en mails)', size: 1373449 }, - { label: 'Volume total tagué à éliminer (en Mo)', size: 12.5 }, + { label: 'Nombre de téléchargements', size: 5614, date: '' }, + { label: 'Nombre de pst déposés', size: 513, date: '' }, + { label: 'Volume total analysé (en mails)', size: 1373449, date: '' }, + { label: 'Volume total tagué à éliminer (en Mo)', size: 12.5, date: '' }, ]; type TStat = { label: string; - size: number; + size: number | string; }; const Stat: FC = ({ size, label }) => { diff --git a/package.json b/package.json index 1e935c0..efb0618 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "include-media": "^1.4.10", "next": "12.1.6", "next-seo": "^5.4.0", + "posthog-js": "^1.79.0", "react": "18.1.0", "react-dom": "18.1.0", "react-markdown": "^8.0.3", diff --git a/pages/_app.tsx b/pages/_app.tsx index 2d14cd6..e6a15f1 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,7 +2,11 @@ import { PrismicPreview } from '@prismicio/next'; import { PrismicProvider } from '@prismicio/react'; import type { AppProps } from 'next/app'; import Link from 'next/link'; +import { useRouter } from 'next/router'; import { DefaultSeo } from 'next-seo'; +import posthog from 'posthog-js'; +import { PostHogProvider } from 'posthog-js/react'; +import { useEffect } from 'react'; import { Footer } from '../components/common/Footer'; import { Header } from '../components/common/Header'; import { Layout } from '../components/common/Layout'; @@ -11,103 +15,128 @@ import { repositoryName } from '../prismicConfiguration'; import '../styles/index.scss'; import { linkResolver } from '../utils/prismic/helpers'; +if (typeof window !== 'undefined') { + posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? '', { + api_host: + process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com', + // Enable debug mode in development + loaded: posthog => { + if (process.env.NODE_ENV === 'development') posthog.debug(); + }, + capture_pageview: false, // Disable automatic pageview capture, as we capture manually + }); +} + const App = ({ Component, pageProps }: AppProps) => { + const router = useRouter(); + + useEffect(() => { + // Track page views + const handleRouteChange = () => posthog?.capture('$pageview'); + router.events.on('routeChangeComplete', handleRouteChange); + + return () => { + router.events.off('routeChangeComplete', handleRouteChange); + }; + }, []); return ( - ( - - {children} - - )} - > - - - + ( + + {children} + + )} + > + + + -
-
- -
-