Logo emitting, and google analytics

Author: Selcuk

README.md

@@ -34,3 +34,23 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+
+## Analytics (Google Analytics 4)
+
+This project supports GA4 to track visits and geography.
+
+1) Create a GA4 property and web data stream. Copy the Measurement ID (looks like `G-XXXXXXX`).
+
+2) Set the environment variable locally or in your hosting provider:
+
+```
+NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXX
+```
+
+You can use `.env.local` during development. See `.env.local.example`.
+
+3) The app automatically loads GA and tracks route changes. No additional setup is needed.
+
+Notes:
+- GA4 reports: Acquisition (source/medium/referrals) and Demographics (country/city).
+- GA4 does not identify individual users; data is aggregate. Ensure cookie/consent compliance as required.

src/app/custom-sequence-logo/page.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import CustomSequenceLogo from '@/components/CustomSequenceLogo';
 import PairwiseOverlapMatrix from '@/components/PairwiseOverlapMatrix';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import ConsensusEmitter from '@/components/ConsensusEmitter';
 
 export default function CustomSequenceLogoPage() {
   // All FASTA files in the custom_msa folder (without .fasta extension)
@@ -56,6 +57,9 @@ export default function CustomSequenceLogoPage() {
         </CardContent>
       </Card>
 
+      {/* Consensus Emitter */}
+      <ConsensusEmitter customFastaNames={fastaNames} customFolder={folder} />
+
       {/* Pairwise Overlap Matrix */}
       <PairwiseOverlapMatrix
         fastaNames={fastaNames}

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from 'next-themes';
 import './globals.css';
 import { TheHeader } from '@/components/TheHeader';
 import { Toaster } from '@/components/ui/sonner';
+import { Analytics } from '@/components/Analytics';
 
 const openSans = Open_Sans({
   subsets: ['latin'],
@@ -35,6 +36,7 @@ export default function RootLayout({
           <main className="grow">{children}</main>
         </ThemeProvider>
         <Toaster />
+        <Analytics />
       </body>
     </html>
   );

src/components/Analytics.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import Script from 'next/script';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { GA_MEASUREMENT_ID, trackPageview } from '@/lib/gtag';
+
+export function Analytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (!GA_MEASUREMENT_ID) return;
+    const url = `${pathname}${searchParams?.toString() ? `?${searchParams.toString()}` : ''}`;
+    trackPageview(url);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, searchParams]);
+
+  if (!GA_MEASUREMENT_ID) return null;
+
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+        strategy="afterInteractive"
+      />
+      <Script id="gtag-init" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${GA_MEASUREMENT_ID}');
+        `}
+      </Script>
+    </>
+  );
+}
+
+