Ajout du tracking posthog sur le site

incubateur-ademe · May 14, 2024 · 0940a16 · 0940a16
1 parent 42b7970
commit 0940a16
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 161 deletions.
diff --git a/.github/workflows/cd-site.yml b/.github/workflows/cd-site.yml
@@ -45,7 +45,8 @@ jobs:
           --ENV_NAME=${{ github.event.inputs.target }}
           --ANON_KEY=${{ secrets.ANON_KEY }} --API_URL=${{ secrets.API_URL }}
           --STRAPI_KEY=${{ secrets.STRAPI_KEY }} --STRAPI_URL=${{ secrets.STRAPI_URL }} 
-          --AMPLITUDE_KEY=${{ vars.AMPLITUDE_KEY }}
+          --POSTHOG_HOST=${{ secrets.POSTHOG_HOST }} --POSTHOG_KEY=${{ secrets.POSTHOG_KEY }} 
+          --AXEPTIO_ID=${{ vars.AXEPTIO_ID }}
 
       - name: Deploy site on Koyeb
         run: >

diff --git a/Earthfile b/Earthfile
@@ -416,14 +416,18 @@ site-build: ## construit l'image du site
     ARG --required API_URL
     ARG --required STRAPI_KEY
     ARG --required STRAPI_URL
-    ARG AMPLITUDE_KEY
+    ARG POSTHOG_HOST
+    ARG POSTHOG_KEY
+    ARG AXEPTIO_ID
     ARG vars
     FROM +front-deps
     ENV NEXT_PUBLIC_STRAPI_KEY=$STRAPI_KEY
     ENV NEXT_PUBLIC_STRAPI_URL=$STRAPI_URL
     ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY
     ENV NEXT_PUBLIC_SUPABASE_URL=$API_URL
-    ENV NEXT_PUBLIC_AMPLITUDE_KEY=$AMPLITUDE_KEY
+    ENV NEXT_PUBLIC_POSTHOG_HOST=$POSTHOG_HOST
+    ENV NEXT_PUBLIC_POSTHOG_KEY=$POSTHOG_KEY
+    ENV NEXT_PUBLIC_AXEPTIO_ID=$AXEPTIO_ID
     ENV NEXT_TELEMETRY_DISABLED=1
     ENV PUBLIC_PATH="/app/packages/site/public"
     ENV PORT=80

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/site/.env.sample b/packages/site/.env.sample
@@ -1,3 +1,2 @@
 NEXT_PUBLIC_SUPABASE_URL=http://localhost:8000
-NEXT_PUBLIC_SUPABASE_ANON_KEY=${SUPABASE_ANON_KEY}
-NEXT_PUBLIC_AMPLITUDE_KEY
+NEXT_PUBLIC_SUPABASE_ANON_KEY=${SUPABASE_ANON_KEY}
diff --git a/packages/site/app/Amplitude.tsx b/packages/site/app/Amplitude.tsx
diff --git a/packages/site/app/TrackPage.tsx b/packages/site/app/TrackPage.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import {usePathname} from 'next/navigation';
+import {TrackPageView} from '@tet/ui';
+
+const TrackPage = () => {
+  const pathName = usePathname();
+
+  return (
+    <TrackPageView
+      pageName={`site${pathName === '/' ? '/accueil' : pathName}`}
+    />
+  );
+};
+
+export default TrackPage;
diff --git a/packages/site/app/api/amplitude/route.ts b/packages/site/app/api/amplitude/route.ts
diff --git a/packages/site/app/layout.tsx b/packages/site/app/layout.tsx
@@ -2,8 +2,9 @@ import './global.css';
 import AppHeader from './AppHeader';
 import {Metadata, Viewport} from 'next';
 import {getMetaData} from './utils';
-import {Amplitude} from './Amplitude';
 import Footer from '@components/layout/Footer';
+import {PHProvider} from 'providers/posthog';
+import TrackPage from './TrackPage';
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -70,15 +71,17 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default function RootLayout({children}: {children: JSX.Element}) {
   return (
-    <html>
-      <body className="min-h-screen flex flex-col justify-between">
-        <div className="grow flex flex-col">
-          <AppHeader />
-          <div className="grow flex flex-col">{children}</div>
-        </div>
-        <Footer />
-        <Amplitude />
-      </body>
-    </html>
+    <PHProvider>
+      <html>
+        <body className="min-h-screen flex flex-col justify-between">
+          <div className="grow flex flex-col">
+            <AppHeader />
+            <div className="grow flex flex-col">{children}</div>
+          </div>
+          <Footer />
+          <TrackPage />
+        </body>
+      </html>
+    </PHProvider>
   );
 }
diff --git a/packages/site/app/stats/EvolutionCollectivitesLabellisees.tsx b/packages/site/app/stats/EvolutionCollectivitesLabellisees.tsx
@@ -30,18 +30,14 @@ const useEvolutionCollectivitesLabellisees = (
 
       return data
         .filter(d => d.mois !== null)
-        .map(d => {
-          if (d.mois) console.log(new Date(d.mois).getFullYear());
-
-          return {
-            mois: d.mois,
-            '1 étoile': d.etoile_1 ?? 0,
-            '2 étoiles': d.etoile_2 ?? 0,
-            '3 étoiles': d.etoile_3 ?? 0,
-            '4 étoiles': d.etoile_4 ?? 0,
-            '5 étoiles': d.etoile_5 ?? 0,
-          };
-        });
+        .map(d => ({
+          mois: d.mois,
+          '1 étoile': d.etoile_1 ?? 0,
+          '2 étoiles': d.etoile_2 ?? 0,
+          '3 étoiles': d.etoile_3 ?? 0,
+          '4 étoiles': d.etoile_4 ?? 0,
+          '5 étoiles': d.etoile_5 ?? 0,
+        }));
     },
   );
 };

diff --git a/packages/site/middleware.ts b/packages/site/middleware.ts
@@ -25,7 +25,7 @@ export function middleware(request: NextRequest) {
   // options de la politique de sécurité
   const cspHeader = `
     default-src 'self';
-    script-src ${scriptSrc};
+    script-src ${scriptSrc} *.axept.io *.posthog.com;  
     style-src ${styleSrc};
     img-src 'self' blob: data: ytimg.com ${process.env.NEXT_PUBLIC_STRAPI_URL?.replace(
       'strapiapp',
@@ -36,7 +36,9 @@ export function middleware(request: NextRequest) {
     connect-src 'self'
       ${process.env.NEXT_PUBLIC_SUPABASE_URL!} 
       ${process.env.NEXT_PUBLIC_STRAPI_URL!}
-      ws://${request.nextUrl.host};
+      ws://${request.nextUrl.host}
+      *.posthog.com
+      *.axept.io;
     base-uri 'self';
     form-action 'self';
     frame-ancestors 'none';

diff --git a/packages/site/next.config.mjs b/packages/site/next.config.mjs
@@ -36,6 +36,15 @@ const nextConfig = {
       ],
     },
   ],
+  // Reverse Proxy vers PostHog : https://posthog.com/docs/advanced/proxy/nextjs
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/:path*',
+        destination: 'https://eu.posthog.com/:path*',
+      },
+    ];
+  },
 };
 
 // ajoute le traitement des fichiers mdx

diff --git a/packages/site/package.json b/packages/site/package.json
@@ -13,7 +13,6 @@
     "format": "prettier --write \"**/*.{js,ts,jsx,tsx}\""
   },
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.3.5",
     "@floating-ui/react": "^0.25.2",
     "@gouvfr/dsfr": "^1.10.0",
     "@mdx-js/loader": "^2.3.0",
@@ -34,6 +33,7 @@
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "next": "^14.0.4",
+    "posthog-js": "^1.131.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1",
@@ -64,4 +64,4 @@
   "main": ".prettierrc.js",
   "author": "",
   "license": "ISC"
-}
+}
diff --git a/packages/site/providers/posthog.tsx b/packages/site/providers/posthog.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import {
+  Consent,
+  createTrackingClient,
+  getConsent,
+  getNextConsentEnvId,
+  getNextTrackingEnv,
+  ScriptLikeProps,
+  TrackingProvider,
+} from '@tet/ui';
+import Script from 'next/script';
+
+const client = createTrackingClient(getNextTrackingEnv());
+
+const onConsentSave = () => {
+  client.set_config({persistence: getConsent() ? 'cookie' : 'memory'});
+};
+
+export const PHProvider = ({children}: {children: React.ReactNode}) => {
+  return (
+    <>
+      <TrackingProvider client={client}>{children}</TrackingProvider>
+      <Consent
+        onConsentSave={onConsentSave}
+        consentId={getNextConsentEnvId()}
+        script={(props: ScriptLikeProps) => <Script {...props} />}
+      />
+    </>
+  );
+};
diff --git a/packages/ui/src/components/tracking/TrackPageView.tsx b/packages/ui/src/components/tracking/TrackPageView.tsx
@@ -23,7 +23,7 @@ function isRelativeToCollectivite(object: unknown): object is {
 type TrackPageViewProps<N extends PageName> = {
   pageName: N;
 } & (TrackingPlan[N]['properties'] extends object
-  ? {properties: TrackingPlan[N]['properties']}
+  ? {properties?: TrackingPlan[N]['properties']}
   : {properties?: undefined});
 
 /**