✨ feat: implement analytics consent banner and tracking functionality

Author: AR10Dev

src/components/AnalyticsConsent.astro

@@ -0,0 +1,28 @@
+<div
+  id="analytics-consent-banner"
+  class="fixed inset-x-4 bottom-4 z-[140] hidden rounded-2xl border border-[var(--border-strong)] bg-[var(--surface-elevated)] p-4 shadow-xl md:inset-x-auto md:right-6 md:max-w-md"
+  role="dialog"
+  aria-live="polite"
+  aria-label="Analytics consent"
+>
+  <p class="text-sm font-semibold text-[var(--text-strong)]">Privacy settings</p>
+  <p class="mt-1 text-sm text-[var(--text-muted)]">
+    This site uses analytics to measure performance and improve content. You can accept or decline tracking.
+  </p>
+  <div class="mt-4 flex flex-wrap gap-2">
+    <button
+      type="button"
+      data-consent-action="decline"
+      class="inline-flex min-h-[2.3rem] items-center justify-center rounded-lg border border-[var(--border-strong)] px-3 py-2 text-xs font-semibold uppercase tracking-[0.06em] text-[var(--text-strong)]"
+    >
+      Decline
+    </button>
+    <button
+      type="button"
+      data-consent-action="accept"
+      class="inline-flex min-h-[2.3rem] items-center justify-center rounded-lg bg-[linear-gradient(120deg,#db7a38,#b05422)] px-3 py-2 text-xs font-semibold uppercase tracking-[0.06em] text-white"
+    >
+      Accept analytics
+    </button>
+  </div>
+</div>

src/components/Footer.astro

@@ -7,11 +7,13 @@ const socialLinks = [
     kind: "linkedin" as const,
     href: "https://www.linkedin.com/in/ar10dev",
     label: "LinkedIn",
+    trackId: "footer_text_linkedin",
   },
   {
     kind: "github" as const,
     href: "https://github.com/AR10Dev",
     label: "GitHub",
+    trackId: "footer_text_github",
   },
 ];
 ---
@@ -26,6 +28,7 @@ const socialLinks = [
       Made by <a
         class="font-bold text-[var(--accent-strong)] hover:underline"
         href="https://github.com/AR10Dev"
+        data-track="footer_text_made_by"
         rel="me"
         >Avaab Razzaq (AR10Dev)
       </a>

src/components/FooterNav.astro

@@ -8,25 +8,47 @@ const socialLinks = [
     kind: "linkedin" as const,
     href: "https://www.linkedin.com/in/ar10dev",
     label: "LinkedIn",
+    trackId: "footer_open_linkedin",
   },
   {
     kind: "github" as const,
     href: "https://github.com/AR10Dev",
     label: "GitHub",
+    trackId: "footer_open_github",
   },
 ];
 
 const footerLinks = {
   services: [
-    { label: "AI & Automation", href: "/services/ai-automation/" },
-    { label: "Web Development", href: "/services/web-development/" },
-    { label: "SEO & Growth", href: "/services/seo-growth/" },
+    {
+      label: "AI & Automation",
+      href: "/services/ai-automation/",
+      trackId: "footer_service_ai_automation",
+    },
+    {
+      label: "Web Development",
+      href: "/services/web-development/",
+      trackId: "footer_service_web_development",
+    },
+    {
+      label: "SEO & Growth",
+      href: "/services/seo-growth/",
+      trackId: "footer_service_seo_growth",
+    },
   ],
   company: [
-    { label: "About", href: "/about/" },
-    { label: "Portfolio", href: "/portfolio/" },
-    { label: "Blog", href: "/blog/" },
-    { label: "Contact", href: "/contact/" },
+    { label: "About", href: "/about/", trackId: "footer_company_about" },
+    {
+      label: "Portfolio",
+      href: "/portfolio/",
+      trackId: "footer_company_portfolio",
+    },
+    { label: "Blog", href: "/blog/", trackId: "footer_company_blog" },
+    {
+      label: "Contact",
+      href: "/contact/",
+      trackId: "footer_company_contact",
+    },
   ],
 };
 
@@ -42,7 +64,7 @@ const contactInfo = {
     <div class="grid gap-10 md:grid-cols-2 lg:grid-cols-4">
       {/* Brand Column */}
       <div class="lg:col-span-1">
-        <a href="/" class="text-xl font-bold text-[var(--text-strong)]">
+        <a href="/" class="text-xl font-bold text-[var(--text-strong)]" data-track="footer_brand_home">
           Avaab Razzaq
         </a>
         <p class="mt-3 text-sm text-[var(--text-muted)] leading-relaxed">
@@ -61,6 +83,7 @@ const contactInfo = {
             <li>
               <a 
                 href={link.href} 
+                data-track={link.trackId}
                 class="text-sm text-[var(--text-muted)] hover:text-[var(--accent-strong)] transition-colors"
               >
                 {link.label}
@@ -80,6 +103,7 @@ const contactInfo = {
             <li>
               <a 
                 href={link.href} 
+                data-track={link.trackId}
                 class="text-sm text-[var(--text-muted)] hover:text-[var(--accent-strong)] transition-colors"
               >
                 {link.label}
@@ -114,13 +138,14 @@ const contactInfo = {
               <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
               <polyline points="22,6 12,13 2,6"/>
             </svg>
-            <a href={`mailto:${contactInfo.email}`} class="hover:text-[var(--accent-strong)] transition-colors">
+            <a href={`mailto:${contactInfo.email}`} data-track="footer_contact_email" class="hover:text-[var(--accent-strong)] transition-colors">
               {contactInfo.email}
             </a>
           </li>
         </ul>
         <a 
           href="/contact/" 
+          data-track="footer_contact_cta"
           class="mt-5 inline-flex items-center gap-2 rounded-lg bg-[linear-gradient(120deg,#db7a38,#b05422)] px-4 py-2 text-sm font-bold text-white shadow-md hover:shadow-lg transition-shadow"
         >
           Get in Touch

src/components/GoogleAnalytics.astro

@@ -14,10 +14,54 @@ const { id } = Astro.props;
 ></script>
 
 <script is:inline type="text/partytown" define:vars={{ id }}>
+  const deniedConsent = {
+    ad_storage: "denied",
+    analytics_storage: "denied",
+    ad_user_data: "denied",
+    ad_personalization: "denied",
+  };
+  const grantedConsent = {
+    ad_storage: "granted",
+    analytics_storage: "granted",
+    ad_user_data: "granted",
+    ad_personalization: "granted",
+  };
+  let hasConfiguredAnalytics = false;
+
+  const applyConsent = (consent) => {
+    if (consent === "granted") {
+      window.gtag("consent", "update", grantedConsent);
+
+      if (!hasConfiguredAnalytics) {
+        window.gtag("config", id);
+        hasConfiguredAnalytics = true;
+      }
+
+      return;
+    }
+
+    window.gtag("consent", "update", deniedConsent);
+  };
+
   window.dataLayer = window.dataLayer || [];
   window.gtag = function () {
     dataLayer.push(arguments);
   };
+
   window.gtag('js', new Date());
-  window.gtag('config', id);
+  window.gtag("consent", "default", {
+    ...deniedConsent,
+    wait_for_update: 500,
+  });
+
+  applyConsent("denied");
+
+  window.addEventListener("analytics:consent", (event) => {
+    const consent =
+      event instanceof CustomEvent && event.detail?.consent === "granted"
+        ? "granted"
+        : "denied";
+
+    applyConsent(consent);
+  });
 </script>

src/components/HeaderNav.astro

@@ -29,7 +29,7 @@ const headerBackground =
 
 <header class={`fixed inset-x-0 top-0 z-50 w-full transition-all duration-300 ${headerBackground}`}>
   <div class="mx-auto flex max-w-screen-lg items-center gap-3 px-4 py-3 xl:max-w-screen-xl">
-    <a href="/" class="flex-none" aria-label="Avaab Razzaq - Home">
+    <a href="/" class="flex-none" aria-label="Avaab Razzaq - Home" data-track="nav_logo_home">
       <Image 
         src={logo}
         alt="Avaab Razzaq - AI Growth Engineer" 

src/components/solid/Navigation.tsx

@@ -48,6 +48,12 @@ const Navigation: Component<NavigationProps> = (props) => {
   const mobileActiveClass =
     "!text-[var(--accent-strong)] bg-[var(--surface-elevated)]";
 
+  const toTrackToken = (value: string): string =>
+    value
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "_")
+      .replace(/^_+|_+$/g, "");
+
   return (
     <nav class="flex items-center" aria-label="Main navigation">
       {/* Desktop Navigation */}
@@ -58,6 +64,7 @@ const Navigation: Component<NavigationProps> = (props) => {
               <a
                 class={`${baseClass} ${isActive(link.href) ? activeClass : ""}`}
                 href={link.href}
+                data-track={`nav_desktop_${toTrackToken(link.label)}`}
                 aria-current={isActive(link.href) ? "page" : undefined}
               >
                 {link.label}
@@ -162,6 +169,7 @@ const Navigation: Component<NavigationProps> = (props) => {
                   <a
                     class={`${mobileBaseClass} ${isActive(link.href) ? mobileActiveClass : ""}`}
                     href={link.href}
+                    data-track={`nav_mobile_${toTrackToken(link.label)}`}
                     onClick={() => setIsOpen(false)}
                     aria-current={isActive(link.href) ? "page" : undefined}
                   >
@@ -175,6 +183,7 @@ const Navigation: Component<NavigationProps> = (props) => {
             <a
               href="/contact/"
               class="block w-full rounded-lg bg-[linear-gradient(120deg,#db7a38,#b05422)] px-4 py-3 text-center font-bold text-white shadow-lg"
+              data-track="nav_mobile_contact_cta"
               onClick={() => setIsOpen(false)}
             >
               Get in Touch

src/env.d.ts

@@ -1 +1,9 @@
 /// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly PUBLIC_GA_MEASUREMENT_ID?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/layouts/BaseLayout.astro

@@ -1,4 +1,5 @@
 ---
+import AnalyticsConsent from "@components/AnalyticsConsent.astro";
 import FooterNav from "@components/FooterNav.astro";
 import GoogleAnalytics from "@components/GoogleAnalytics.astro";
 import HeaderNav from "@components/HeaderNav.astro";
@@ -28,6 +29,7 @@ const {
 const defaultKeywords =
   "AI Growth Engineer, AI Automation, Full-Stack Developer, SEO Expert, Miami Florida, Web Development, LLM Integration, Workflow Automation";
 const finalKeywords = keywords || defaultKeywords;
+const gaMeasurementId = import.meta.env.PUBLIC_GA_MEASUREMENT_ID?.trim();
 
 const currentPath = Astro.url.pathname;
 ---
@@ -37,8 +39,12 @@ const currentPath = Astro.url.pathname;
   <head>
     <meta charset="UTF-8" />
 
-    <!-- Google Analytics -->
-    <GoogleAnalytics id="G-LKVQYYL9XZ" />
+    {import.meta.env.PROD && gaMeasurementId && (
+      <>
+        <!-- Google Analytics -->
+        <GoogleAnalytics id={gaMeasurementId} />
+      </>
+    )}
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <meta name="description" content={description} />
@@ -121,6 +127,8 @@ const currentPath = Astro.url.pathname;
 
     <FooterNav />
 
+    {import.meta.env.PROD && gaMeasurementId && <AnalyticsConsent />}
+
     <script>
       import "../scripts/homepage.ts";
     </script>

src/layouts/Layout.astro

@@ -1,4 +1,5 @@
 ---
+import AnalyticsConsent from "@components/AnalyticsConsent.astro";
 import Footer from "@components/Footer.astro";
 import GoogleAnalytics from "@components/GoogleAnalytics.astro";
 import Header from "@components/Header.astro";
@@ -22,14 +23,19 @@ const {
   structuredData,
   headerBackground,
 } = Astro.props as Props;
+const gaMeasurementId = import.meta.env.PUBLIC_GA_MEASUREMENT_ID?.trim();
 ---
 
 <html lang="en" class="scroll-smooth">
   <head>
     <meta charset="UTF-8" />
 
-    <!-- Google Analytics -->
-    <GoogleAnalytics id="G-LKVQYYL9XZ" />
+    {import.meta.env.PROD && gaMeasurementId && (
+      <>
+        <!-- Google Analytics -->
+        <GoogleAnalytics id={gaMeasurementId} />
+      </>
+    )}
 
     <meta
       name="viewport"
@@ -98,6 +104,7 @@ const {
     </main>
 
     <Footer />
+    {import.meta.env.PROD && gaMeasurementId && <AnalyticsConsent />}
     <script>
       import "../scripts/homepage.ts";
     </script>