From 0940a1615b56bc39f4b91d118ef2887734dbc3ae Mon Sep 17 00:00:00 2001 From: Marine Heckler Date: Thu, 9 May 2024 11:46:10 +0200 Subject: [PATCH] Ajout du tracking posthog sur le site --- .github/workflows/cd-site.yml | 3 +- Earthfile | 8 ++- package-lock.json | 68 +++---------------- packages/site/.env.sample | 3 +- packages/site/app/Amplitude.tsx | 25 ------- packages/site/app/TrackPage.tsx | 16 +++++ packages/site/app/api/amplitude/route.ts | 45 ------------ packages/site/app/layout.tsx | 25 ++++--- .../EvolutionCollectivitesLabellisees.tsx | 20 +++--- packages/site/middleware.ts | 6 +- packages/site/next.config.mjs | 9 +++ packages/site/package.json | 4 +- packages/site/providers/posthog.tsx | 31 +++++++++ .../src/components/tracking/TrackPageView.tsx | 2 +- 14 files changed, 104 insertions(+), 161 deletions(-) delete mode 100644 packages/site/app/Amplitude.tsx create mode 100644 packages/site/app/TrackPage.tsx delete mode 100644 packages/site/app/api/amplitude/route.ts create mode 100644 packages/site/providers/posthog.tsx diff --git a/.github/workflows/cd-site.yml b/.github/workflows/cd-site.yml index 43c49995cfe..90921849975 100644 --- 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 index 88f7278d779..a778374c08f 100644 --- 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 index 09edfb26af9..4e500b05a3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1904,63 +1904,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@amplitude/analytics-browser": { - "version": "2.3.5", - "license": "MIT", - "dependencies": { - "@amplitude/analytics-client-common": "^2.0.8", - "@amplitude/analytics-core": "^2.1.1", - "@amplitude/analytics-types": "^2.3.1", - "@amplitude/plugin-page-view-tracking-browser": "^2.0.15", - "@amplitude/plugin-web-attribution-browser": "^2.0.15", - "tslib": "^2.4.1" - } - }, - "node_modules/@amplitude/analytics-client-common": { - "version": "2.0.8", - "license": "MIT", - "dependencies": { - "@amplitude/analytics-connector": "^1.4.8", - "@amplitude/analytics-core": "^2.1.1", - "@amplitude/analytics-types": "^2.3.1", - "tslib": "^2.4.1" - } - }, - "node_modules/@amplitude/analytics-connector": { - "version": "1.5.0", - "license": "MIT" - }, - "node_modules/@amplitude/analytics-core": { - "version": "2.1.1", - "license": "MIT", - "dependencies": { - "@amplitude/analytics-types": "^2.3.1", - "tslib": "^2.4.1" - } - }, - "node_modules/@amplitude/analytics-types": { - "version": "2.3.1", - "license": "MIT" - }, - "node_modules/@amplitude/plugin-page-view-tracking-browser": { - "version": "2.0.15", - "license": "MIT", - "dependencies": { - "@amplitude/analytics-client-common": "^2.0.8", - "@amplitude/analytics-types": "^2.3.1", - "tslib": "^2.4.1" - } - }, - "node_modules/@amplitude/plugin-web-attribution-browser": { - "version": "2.0.15", - "license": "MIT", - "dependencies": { - "@amplitude/analytics-client-common": "^2.0.8", - "@amplitude/analytics-core": "^2.1.1", - "@amplitude/analytics-types": "^2.3.1", - "tslib": "^2.4.1" - } - }, "node_modules/@ampproject/remapping": { "version": "2.2.1", "license": "Apache-2.0", @@ -42943,7 +42886,6 @@ "version": "0.1.0", "license": "ISC", "dependencies": { - "@amplitude/analytics-browser": "^2.3.5", "@floating-ui/react": "^0.25.2", "@gouvfr/dsfr": "^1.10.0", "@mdx-js/loader": "^2.3.0", @@ -42964,6 +42906,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", @@ -43573,6 +43516,15 @@ "version": "0.2.0", "license": "MIT" }, + "packages/site/node_modules/posthog-js": { + "version": "1.131.3", + "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.131.3.tgz", + "integrity": "sha512-ds/TADDS+rT/WgUyeW4cJ+X+fX+O1KdkOyssNI/tP90PrFf0IJsck5B42YOLhfz87U2vgTyBaKHkdlMgWuOFog==", + "dependencies": { + "fflate": "^0.4.8", + "preact": "^10.19.3" + } + }, "packages/site/node_modules/prettier": { "version": "3.0.1", "dev": true, diff --git a/packages/site/.env.sample b/packages/site/.env.sample index af1ef7c6cb2..118585979f5 100644 --- 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} \ No newline at end of file diff --git a/packages/site/app/Amplitude.tsx b/packages/site/app/Amplitude.tsx deleted file mode 100644 index df9f65012d0..00000000000 --- a/packages/site/app/Amplitude.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client' -import * as amplitude from '@amplitude/analytics-browser'; -import {useEffect} from "react"; - -const key = process.env.NEXT_PUBLIC_AMPLITUDE_KEY; - -/** - * Initialise Amplitude pour une utilisation dans le navigateur. - * - * Ce composant doit être monté sur chaque page pour que la SDK soit bien initialisée. - * Le tracking en tant que tel est fait par la SDK Amplitude. - */ -export function Amplitude() { - useEffect(() => { - if (typeof window !== 'undefined' && window.location.origin && key && key.length == 32) { - amplitude.init(key, { - defaultTracking: true, - serverZone: 'EU', - serverUrl: `${window.location.origin}/api/amplitude` - }); - } - }, []); - - return null; -} diff --git a/packages/site/app/TrackPage.tsx b/packages/site/app/TrackPage.tsx new file mode 100644 index 00000000000..3574979f9ec --- /dev/null +++ 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 ( + + ); +}; + +export default TrackPage; diff --git a/packages/site/app/api/amplitude/route.ts b/packages/site/app/api/amplitude/route.ts deleted file mode 100644 index c943278675d..00000000000 --- a/packages/site/app/api/amplitude/route.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {NextRequest, NextResponse} from 'next/server' - -const key = process.env.NEXT_PUBLIC_AMPLITUDE_KEY; -const url = 'https://api.eu.amplitude.com/2/httpapi'; - -/** - * Fait suivre les événements à Amplitude - * Renvoi la réponse d'Amplitude en cas de succès. - * - * @param request La requête avec la payload Amplitude - */ -export async function POST(request: NextRequest) { - if (key && key.length == 32) { - const payload = await request.json(); - - if (!payload["api_key"] || !payload["events"]) { - return NextResponse.json({ - 'error': 'Invalid payload', - }, {status: 400}); - } - - if (payload["api_key"] !== key) { - return NextResponse.json({ - 'error': 'The payload key does not match the server key', - 'hint': 'check "NEXT_PUBLIC_AMPLITUDE_KEY"' - }, {status: 400}); - } - - const amplitudeResponse = await fetch( - url, - { - method: 'POST', - body: JSON.stringify(payload), - cache: 'no-cache' - } - ) - - return NextResponse.json(await amplitudeResponse.json(), {status: amplitudeResponse.status}); - } else { - return NextResponse.json({ - 'error': 'No valid amplitude key on server', - 'hint': 'check "NEXT_PUBLIC_AMPLITUDE_KEY"' - }, {status: 500}); - } -} diff --git a/packages/site/app/layout.tsx b/packages/site/app/layout.tsx index e49607480fe..8bf7dd179ed 100644 --- 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 { export default function RootLayout({children}: {children: JSX.Element}) { return ( - - -
- -
{children}
-
-