Setup GTM and config GA4 events

frontend/package.json

@@ -10,6 +10,7 @@
         "format": "prettier --write \"**/*.{js,jsx,ts,tsx}\""
     },
     "dependencies": {
+        "@next/third-parties": "^16.2.4",
         "highlight.js": "^11.11.1",
         "ky": "^1.14.3",
         "lucide-react": "^0.577.0",

frontend/src/api/common/analytics.enums.ts

@@ -0,0 +1,9 @@
+export enum AnalyticsEvent {
+    VIEW_SEARCH_RESULTS = 'view_search_results',
+    CLICK_TOOL_WEBSITE = 'click_tool_website',
+    CLICK_TOOL_GITHUB = 'click_tool_github',
+    ADD_TO_STACK = 'add_to_stack',
+    CLICK_RELATED_ARTICLE = 'click_related_article',
+    CLICK_COMPARISON = 'click_comparison',
+    SCROLL_75 = 'scroll_75',
+}

frontend/src/app/_components/SearchBar.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { sendGTMEvent } from '@next/third-parties/google';
 import { browserClient } from '@/src/lib/api/browser.client';
 import { listSoftware } from '@/src/api/software/software.api';
+import { AnalyticsEvent } from '@/src/api/common/analytics.enums';
 import type { SoftwareListItem } from '@/src/api/software/software.schemas';
 import SearchResultItem from './SearchResultItem';
 import { Search } from 'lucide-react';
@@ -43,6 +45,13 @@ export default function LiveSearchBar() {
             try {
                 const data = await listSoftware(browserClient, { q: query });
                 setResults(data.data);
+                if (data.data.length) {
+                    sendGTMEvent({
+                        event: AnalyticsEvent.VIEW_SEARCH_RESULTS,
+                        search_term: query,
+                        results_count: data.data.length,
+                    });
+                }
             } catch {
                 setResults([]);
             } finally {

frontend/src/app/article/[slug]/_components/SoftwareAlternatives.tsx

@@ -1,7 +1,8 @@
 import { createServerClient } from '@/src/lib/api/server.client';
 import { getSoftwareAlternatives } from '@/src/api/software/software.api';
 import Image from 'next/image';
-import Link from 'next/link';
+import TrackedLink from './TrackedLink';
+import { AnalyticsEvent } from '@/src/api/common/analytics.enums';
 
 interface SoftwareAlternativesProps {
     slug: string;
@@ -45,8 +46,13 @@ export default async function SoftwareAlternatives({
                         key={alt.id}
                         className="flex items-center justify-between p-4 rounded-2xl bg-zinc-900/40 border border-zinc-800 hover:bg-zinc-800/60 transition-colors group"
                     >
-                        <Link
+                        <TrackedLink
                             href={`/article/${alt.slug}`}
+                            eventName={AnalyticsEvent.CLICK_RELATED_ARTICLE}
+                            eventParams={{
+                                current_slug: slug,
+                                target_slug: alt.slug,
+                            }}
                             className="flex items-center gap-4 flex-1 min-w-0"
                         >
                             {alt.logoUrl ? (
@@ -77,14 +83,19 @@ export default async function SoftwareAlternatives({
                                     </span>
                                 )}
                             </div>
-                        </Link>
+                        </TrackedLink>
 
-                        <Link
+                        <TrackedLink
                             href={`/comparison?firstSoft=${slug}&secondSoft=${alt.slug}`}
+                            eventName={AnalyticsEvent.CLICK_COMPARISON}
+                            eventParams={{
+                                current_slug: slug,
+                                target_slug: alt.slug,
+                            }}
                             className="shrink-0 px-3 py-1.5 text-xs font-medium text-zinc-400 bg-zinc-500/10 hover:bg-zinc-500/20 border border-zinc-500/20 rounded-lg transition-colors"
                         >
                             Compare
-                        </Link>
+                        </TrackedLink>
                     </div>
                 ))}
             </div>

frontend/src/app/article/[slug]/_components/TrackedLink.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { sendGTMEvent } from '@next/third-parties/google';
+import Link from 'next/link';
+import React from 'react';
+import { AnalyticsEvent } from '@/src/api/common/analytics.enums';
+
+interface TrackedLinkProps {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    eventName: AnalyticsEvent;
+    eventParams?: Record<string, string | number | boolean | undefined>;
+}
+
+export default function TrackedLink({
+    href,
+    children,
+    className,
+    eventName,
+    eventParams = {},
+}: TrackedLinkProps) {
+    return (
+        <Link
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={className}
+            onClick={() => sendGTMEvent({ event: eventName, ...eventParams })}
+        >
+            {children}
+        </Link>
+    );
+}

frontend/src/app/article/[slug]/_components/UseSoftwareButton.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { useState } from 'react';
+import { sendGTMEvent } from '@next/third-parties/google';
 import { browserClient } from '@/src/lib/api/browser.client';
+import { AnalyticsEvent } from '@/src/api/common/analytics.enums';
 import {
     markSoftwareAsUsed,
     markSoftwareAsUnused,
@@ -12,11 +14,13 @@ import { useRouter } from 'next/navigation';
 interface UseSoftwareButtonProps {
     softwareId: number;
     initialIsUsed?: boolean;
+    softwareName?: string;
 }
 
 export default function UseSoftwareButton({
     softwareId,
     initialIsUsed = false,
+    softwareName = 'Unknown',
 }: UseSoftwareButtonProps) {
     const [isUsed, setIsUsed] = useState(initialIsUsed);
     const [isLoading, setIsLoading] = useState(false);
@@ -33,6 +37,11 @@ export default function UseSoftwareButton({
             } else {
                 await markSoftwareAsUsed(browserClient, softwareId);
                 setIsUsed(true);
+                sendGTMEvent({
+                    event: AnalyticsEvent.ADD_TO_STACK,
+                    software_id: softwareId,
+                    software_name: softwareName,
+                });
             }
             router.refresh();
         } catch (error) {

frontend/src/app/article/[slug]/page.tsx

@@ -8,16 +8,18 @@ import Image from 'next/image';
 import Link from 'next/link';
 import CategoryTags from '@/src/components/CategoryTags';
 import UseSoftwareButton from './_components/UseSoftwareButton';
+import TrackedLink from './_components/TrackedLink';
+import SoftwareReviewSection from './_components/SoftwareReviewSection';
+import ProsAndCons from './_components/ProsAndCons';
+import ScreenshotGallery from './_components/ScreenshotGallery';
+import SoftwareAlternatives from './_components/SoftwareAlternatives';
 import { notFound } from 'next/navigation';
 import { GlobeIcon, Users, ChevronRight } from 'lucide-react';
 import { Metadata } from 'next';
 import { absoluteUrl } from '@/src/lib/url';
 import { SoftwareApplication, WithContext } from 'schema-dts';
 import { safeJsonLdStringify } from '@/src/lib/utils';
-import SoftwareReviewSection from '@/src/app/article/[slug]/_components/SoftwareReviewSection';
-import ProsAndCons from '@/src/app/article/[slug]/_components/ProsAndCons';
-import ScreenshotGallery from '@/src/app/article/[slug]/_components/ScreenshotGallery';
-import SoftwareAlternatives from '@/src/app/article/[slug]/_components/SoftwareAlternatives';
+import { AnalyticsEvent } from '@/src/api/common/analytics.enums';
 
 export async function generateMetadata({
     params,
@@ -248,10 +250,13 @@ export default async function SoftwareArticlePage({
                 {/* Icons & Actions*/}
                 <div className="flex flex-wrap items-center gap-3 sm:gap-4 mt-2 sm:mt-0">
                     {software.gitRepoUrl && (
-                        <Link
+                        <TrackedLink
                             href={software.gitRepoUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                            eventName={AnalyticsEvent.CLICK_TOOL_GITHUB}
+                            eventParams={{
+                                software_id: software.id,
+                                software_name: software.name,
+                            }}
                             className="flex items-center justify-center w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-zinc-900/80 border border-zinc-800 hover:bg-zinc-800 transition-all duration-300 shrink-0"
                         >
                             <Image
@@ -261,26 +266,30 @@ export default async function SoftwareArticlePage({
                                 height={24}
                                 className="w-5 h-5 sm:w-6 sm:h-6 object-contain opacity-90"
                             />
-                        </Link>
+                        </TrackedLink>
                     )}
                     {software.websiteUrl && (
-                        <Link
+                        <TrackedLink
                             href={software.websiteUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                            eventName={AnalyticsEvent.CLICK_TOOL_WEBSITE}
+                            eventParams={{
+                                software_id: software.id,
+                                software_name: software.name,
+                            }}
                             className="flex items-center justify-center w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-zinc-900/80 border border-zinc-800 hover:bg-zinc-800 transition-all duration-300 shrink-0"
                         >
                             <GlobeIcon
                                 className="w-5 h-5 sm:w-6 sm:h-6 text-zinc-300"
                                 strokeWidth={1.5}
                             />
-                        </Link>
+                        </TrackedLink>
                     )}
 
                     {isAuthenticated && (
                         <UseSoftwareButton
                             softwareId={software.id}
                             initialIsUsed={isUsedByCurrentUser}
+                            softwareName={software.name}
                         />
                     )}
                 </div>

frontend/src/app/layout.tsx

@@ -1,7 +1,9 @@
 import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
+import { GoogleTagManager } from '@next/third-parties/google';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
+import ScrollTracker from '../components/ScrollTracker';
 import '../styles/globals.css';
 import React from 'react';
 import { createServerClient } from '../lib/api/server.client';
@@ -39,6 +41,8 @@ export default async function RootLayout({
             <body
                 className={`${geistSans.variable} ${geistMono.variable} flex flex-col min-h-screen antialiased`}
             >
+                <GoogleTagManager gtmId="GTM-K8BJMGSF" />
+                <ScrollTracker />
                 <Header user={user} />
 
                 <main className="flex-1">{children}</main>

frontend/src/components/ScrollTracker.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { sendGTMEvent } from '@next/third-parties/google';
+import { usePathname } from 'next/navigation';
+import { AnalyticsEvent } from '../api/common/analytics.enums';
+
+export default function ScrollTracker() {
+    const tracked75 = useRef(false);
+    const pathname = usePathname();
+
+    useEffect(() => {
+        // Skip tracking for non-SEO pages like /admin
+        if (pathname.startsWith('/admin')) {
+            return;
+        }
+
+        const handleScroll = () => {
+            if (tracked75.current) return;
+
+            const scrollHeight = document.documentElement.scrollHeight;
+            const scrollTop =
+                window.scrollY || document.documentElement.scrollTop;
+            const clientHeight = document.documentElement.clientHeight;
+
+            // If page is too short (fits in one viewport), we don't trigger scroll_75
+            // because the user didn't actually "scroll" through content
+            if (scrollHeight <= clientHeight) {
+                return;
+            }
+
+            const scrollPercentage =
+                ((scrollTop + clientHeight) / scrollHeight) * 100;
+
+            if (scrollPercentage >= 75) {
+                sendGTMEvent({
+                    event: AnalyticsEvent.SCROLL_75,
+                    page_path: pathname,
+                });
+                tracked75.current = true;
+            }
+        };
+
+        // Reset tracking state on pathname change
+        tracked75.current = false;
+
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        // Initial check in case page is already scrolled or we want to catch logic
+        handleScroll();
+
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [pathname]);
+
+    return null;
+}