replace posthog with google analytics

Author: maslianok

.github/workflows/deploy.yml

@@ -45,7 +45,6 @@ jobs:
           push: true
           tags: ghcr.io/gitranks/gitranks-ui:latest
           build-args: |
-            NEXT_PUBLIC_POSTHOG_KEY=${{ vars.NEXT_PUBLIC_POSTHOG_KEY }}
             NEXT_PUBLIC_URI=${{ vars.NEXT_PUBLIC_URI }}
             INTERNAL_JWT_SECRET=${{ secrets.INTERNAL_JWT_SECRET }}
             URI_GITRANKS=${{ vars.URI_GITRANKS }}
@@ -77,6 +76,5 @@ jobs:
               -e AUTH_URL='${{ vars.AUTH_URL }}' \
               -e AUTH_TRUST_HOST=true \
               -e NEXT_PUBLIC_URI='${{ vars.NEXT_PUBLIC_URI }}' \
-              -e NEXT_PUBLIC_POSTHOG_KEY='${{ vars.NEXT_PUBLIC_POSTHOG_KEY }}' \
               -p 3000:3000 \
               ghcr.io/gitranks/gitranks-ui:latest

Dockerfile

@@ -6,9 +6,6 @@ FROM node:22-alpine AS base
 # for now just make nextjs happy by setting this variable
 ENV MONGODB_URI_AUTH=mongodb://localhost:27020/auth
 
-ARG NEXT_PUBLIC_POSTHOG_KEY
-ENV NEXT_PUBLIC_POSTHOG_KEY=$NEXT_PUBLIC_POSTHOG_KEY
-
 ARG NEXT_PUBLIC_URI
 ENV NEXT_PUBLIC_URI=$NEXT_PUBLIC_URI
 

app/api/badge/[login]/route.tsx

@@ -5,7 +5,6 @@ import { BadgeTemplateType } from '@/badge/badge.types';
 import { BadgeZodSchema } from '@/badge/badge.zod';
 import { renderMediumBadge } from '@/badge/templates/medium/medium.render';
 import { renderSmallBadge } from '@/badge/templates/small/small.render';
-import { posthog } from '@/lib/posthog/posthog-node-client';
 
 type Props = { params: Promise<{ login: string }> };
 
@@ -37,12 +36,6 @@ export async function GET(req: NextRequest, { params }: Props) {
 
   const { rankingType, template, theme } = validationResult.data;
 
-  posthog.capture({
-    distinctId: login,
-    event: 'badge_rendered',
-    properties: { rankingType, template, theme },
-  });
-
   const svg = await getRendererByTemplate(template)({ theme, login, rankingType });
 
   if (!svg) {

app/api/badge/v2/[login]/route.tsx

@@ -3,7 +3,6 @@ import { NextRequest } from 'next/server';
 
 import { BadgeV2ZodSchema } from '@/badge/badge.zod';
 import { renderInlineBadge } from '@/badge/templates/inline/inline.render';
-import { posthog } from '@/lib/posthog/posthog-node-client';
 
 type Props = { params: Promise<{ login: string }> };
 
@@ -24,14 +23,14 @@ export async function GET(req: NextRequest, { params }: Props) {
     });
   }
 
-  const userAgent = req.headers.get('user-agent');
-  const referer = req.headers.get('referer');
+  // const userAgent = req.headers.get('user-agent');
+  // const referer = req.headers.get('referer');
 
-  posthog.capture({
-    distinctId: login,
-    event: 'badge_v2_rendered',
-    properties: { userAgent, referer },
-  });
+  // capture({
+  //   distinctId: login,
+  //   event: 'badge_v2_rendered',
+  //   properties: { userAgent, referer },
+  // });
 
   const svg = await renderInlineBadge({ login, params: validationResult.data });
 

app/components/search-profiile.tsx

@@ -2,35 +2,29 @@
 
 import { Search } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { usePostHog } from 'posthog-js/react';
 import { useState } from 'react';
 import { ClipLoader } from 'react-spinners';
 
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { graphqlClient } from '@/lib/graphql/graphql-client';
-import { ProfileIdByLoginDocument } from '@/types/generated/graphql';
 
 export const SearchProfile = () => {
   const [login, setLogin] = useState('');
   const [loading, setLoading] = useState(false);
   const router = useRouter();
-  const posthog = usePostHog();
 
   const onSearch = async () => {
     if (!login) {
       return;
     }
 
     setLoading(true);
-    const data = await graphqlClient(ProfileIdByLoginDocument, { login });
-
-    const profileFound = data.globalRankByLogin?.githubId;
-
-    posthog.capture('landingPage.search', {
-      login,
-      profileFound,
-    });
+    // const data = await graphqlClient(ProfileIdByLoginDocument, { login });
+    // const profileFound = data.globalRankByLogin?.githubId;
+    // capture('landingPage.search', {
+    //   login,
+    //   profileFound,
+    // });
 
     return router.push(`/profile/${login}`);
   };

app/layout.tsx

@@ -1,3 +1,4 @@
+import { GoogleAnalytics } from '@next/third-parties/google';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { SessionProvider } from 'next-auth/react';
@@ -6,7 +7,6 @@ import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { Footer } from '@/components/footer/footer';
 import { ThemeProvider } from '@/components/theme-provider/theme-provider';
 import { Toaster } from '@/components/ui/sonner';
-import { PostHogClientOnlyProvider } from '@/lib/posthog/post-hog-client-only';
 
 import { FlagEmojiPolyfill } from './components/flag-emoji-polyfill';
 
@@ -31,20 +31,19 @@ export default function RootLayout({ children }: LayoutProps<'/'>) {
         style={{ ...inter.style, fontFamily: `'Twemoji Country Flags', ${inter.style.fontFamily}` }}
       >
         <SessionProvider>
-          <PostHogClientOnlyProvider>
-            <NuqsAdapter>
-              <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-                <FlagEmojiPolyfill />
-                <div className="flex flex-col min-h-screen">
-                  <div className="flex-grow">{children}</div>
-                  <Footer />
-                </div>
-                <Toaster richColors position="top-right" />
-              </ThemeProvider>
-            </NuqsAdapter>
-          </PostHogClientOnlyProvider>
+          <NuqsAdapter>
+            <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+              <FlagEmojiPolyfill />
+              <div className="flex flex-col min-h-screen">
+                <div className="flex-grow">{children}</div>
+                <Footer />
+              </div>
+              <Toaster richColors position="top-right" />
+            </ThemeProvider>
+          </NuqsAdapter>
         </SessionProvider>
       </body>
+      <GoogleAnalytics gaId="G-YKY54NVEGK" />
     </html>
   );
 }

app/profile/[login]/components/fetch-user-button.tsx

@@ -3,7 +3,6 @@
 import { RefreshCw } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { signIn, useSession } from 'next-auth/react';
-import { usePostHog } from 'posthog-js/react';
 import {
   Children,
   cloneElement,
@@ -54,7 +53,6 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
 }) => {
   const { data: session } = useSession();
   const { login } = useParams<{ login: string }>();
-  const posthog = usePostHog();
   const fetchAttempt = useRef(0);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const [loadingLabel, setLoadingLabel] = useState(FETCH_MESSAGES[fetchAttempt.current]);
@@ -109,7 +107,7 @@ export const FetchUserButton: FC<FetchUserButtonProps> = ({
   const fetchUser = async () => {
     setFetchingDuration(0);
 
-    posthog.capture('profile.fetch', { login });
+    // capture('profile.fetch', { login });
 
     // immediately invalidate the cache, so if the user reloads the page, the latest data is fetched
     fetch(`/api/revalidate?tag=${encodeURIComponent(`profile:${login}`)}`);

components/header/components/main-menu.tsx

@@ -18,7 +18,7 @@ import {
 } from '@/components/ui/navigation-menu';
 import { cn } from '@/lib/utils';
 
-export function MainMenu({ className }: { className?: string }) {
+export function MainMenu({ className }: Readonly<{ className?: string }>) {
   return (
     <NavigationMenu className={className}>
       <NavigationMenuList>