Use Posthog over Vercel analytics (#4389)

Author: marcoacierno

.github/workflows/build-frontend.yml

@@ -42,6 +42,10 @@ jobs:
           sentry_auth_token=$(aws ssm get-parameter --output text --query Parameter.Value --with-decryption --name /pythonit/${{ inputs.tf_environment }}/common/sentry-auth-token)
           echo "::add-mask::$sentry_auth_token"
           echo "SENTRY_AUTH_TOKEN=$sentry_auth_token" >> "$GITHUB_OUTPUT"
+
+          posthog_key=$(aws ssm get-parameter --output text --query Parameter.Value --with-decryption --name /pythonit/${{ inputs.tf_environment }}/pycon-frontend/posthog-key)
+          echo "::add-mask::$posthog_key"
+          echo "POSTHOG_KEY=$posthog_key" >> "$GITHUB_OUTPUT"
       - name: Build and push
         uses: docker/build-push-action@v6
         with:
@@ -62,4 +66,5 @@ jobs:
             CONFERENCE_CODE=${{ steps.vars.outputs.conference_code }}
             GIT_HASH=${{ inputs.githash }}
           secrets: |
-            "sentry_auth_token=${{ steps.vars.outputs.sentry_auth_token }}"
+            sentry_auth_token=${{ steps.vars.outputs.sentry_auth_token }}
+            posthog_key=${{ steps.vars.outputs.posthog_key }}

frontend/Dockerfile

@@ -26,6 +26,7 @@ COPY . .
 
 RUN corepack enable pnpm
 RUN --mount=type=secret,id=sentry_auth_token,env=SENTRY_AUTH_TOKEN \
+    --mount=type=secret,id=posthog_key,env=POSTHOG_KEY \
     pnpm run build
 
 FROM base AS runner

frontend/next.config.js

@@ -11,6 +11,7 @@ const {
   CMS_ADMIN_HOST = "admin.pycon.it",
   NEXT_PUBLIC_SITE_URL,
   SENTRY_AUTH_TOKEN,
+  POSTHOG_KEY,
 } = process.env;
 
 const nextConfig = {
@@ -21,6 +22,7 @@ const nextConfig = {
     localeDetection: false,
   },
   trailingSlash: false,
+  skipTrailingSlashRedirect: true,
   cacheHandler:
     process.env.VERCEL_ENV === "preview"
       ? undefined
@@ -89,6 +91,14 @@ const nextConfig = {
         source: "/graphql",
         destination: `${API_URL_SERVER}/graphql`,
       },
+      {
+        source: "/ingest/static/:path*",
+        destination: "https://eu-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/ingest/:path*",
+        destination: "https://eu.i.posthog.com/:path*",
+      },
     ];
 
     if (API_URL_SERVER.includes("http://backend")) {
@@ -111,6 +121,7 @@ const nextConfig = {
   env: {
     API_URL: API_URL,
     conferenceCode: CONFERENCE_CODE || "pycon-demo",
+    POSTHOG_KEY: POSTHOG_KEY,
     cmsHostname: CMS_HOSTNAME,
     NEXT_PUBLIC_SITE_URL: NEXT_PUBLIC_SITE_URL
       ? `https://${NEXT_PUBLIC_SITE_URL}/`

frontend/package.json

@@ -26,9 +26,7 @@
     "@neshca/cache-handler": "^1.9.0",
     "@python-italia/pycon-styleguide": "0.1.210",
     "@sentry/nextjs": "^8.45.0",
-    "@vercel/analytics": "^1.1.1",
     "@vercel/og": "^0.6.5",
-    "@vercel/speed-insights": "^1.0.12",
     "@xstate/react": "^3.0.1",
     "clsx": "^1.2.1",
     "concurrently": "^9.1.0",
@@ -45,6 +43,7 @@
     "next": "15.2.0",
     "next-cookies": "^2.0.3",
     "pdfkit": "^0.15.1",
+    "posthog-js": "^1.225.0",
     "react": "19.0.0",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",

frontend/pnpm-lock.yaml

@@ -5,7 +5,7 @@ import {
   Spacer,
   Text,
 } from "@python-italia/pycon-styleguide";
-import va from "@vercel/analytics";
+import posthog from "posthog-js";
 import { FormattedMessage } from "react-intl";
 import { useCurrentUser } from "~/helpers/use-current-user";
 import { useTranslatedMessage } from "~/helpers/use-translated-message";
@@ -38,7 +38,7 @@ export const AddScheduleToCalendarModal = ({ onClose }: Props) => {
   const autoSelectInput = (e: React.MouseEvent<HTMLInputElement>) => {
     (e.target as HTMLInputElement).select();
     document.execCommand("copy");
-    va.track("copy-calendar-url");
+    posthog.capture("copy-calendar-url");
   };
 
   const pleaseWaitMessage = useTranslatedMessage("login.loading");

frontend/src/components/add-schedule-to-calendar-modal/index.tsx

@@ -6,7 +6,8 @@ import {
   Spacer,
   Text,
 } from "@python-italia/pycon-styleguide";
-import va from "@vercel/analytics";
+import posthog from "posthog-js";
+
 import { isAfter, isBefore, parseISO } from "date-fns";
 import { fromZonedTime } from "date-fns-tz";
 import React, {
@@ -144,7 +145,7 @@ export const ScheduleView = ({
     setViewMode((current) => {
       const nextValue = current === "grid" ? "list" : "grid";
       prevViewMode.current = nextValue;
-      va.track("schedule-view", { view: nextValue });
+      posthog.capture("schedule-view", { view: nextValue });
       return nextValue;
     });
   }, []);

frontend/src/components/schedule-view/index.tsx

@@ -31,6 +31,7 @@ export async function middleware(req: NextRequest) {
     !PUBLIC_FILE.test(req.nextUrl.pathname) &&
     !req.nextUrl.pathname.includes("/api/") &&
     !req.nextUrl.pathname.includes("/admin") &&
+    !req.nextUrl.pathname.includes("/ingest") &&
     !req.nextUrl.pathname.includes("/local_files_upload") &&
     !req.nextUrl.pathname.includes("/media") &&
     !req.nextUrl.pathname.includes("/graphql") &&