Add analytics tracking to homepage sections and CTAs

Introduced analytics tracking for section views and CTA clicks across the homepage. GallerySection now tracks when it enters the viewport, HeroSection and ServicesSection track CTA button clicks, and Home.tsx tracks when each main section becomes visible. This enables better insight into user engagement.

Author: PrimeBuild-pc

client/src/components/GallerySection.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import AnimatedElement from "@/lib/AnimatedElement";
 import ImageWithFallback from "@/lib/ImageWithFallback";
+import { trackGalleryView } from "@/lib/analytics";
 
 interface GalleryImage { src: string; alt: string }
 
@@ -33,6 +34,26 @@ export default function GallerySection() {
   // Measure the exact pixel distance for half track and compute duration = distance / speed
   const trackRef = useRef<HTMLDivElement>(null);
   const [styleVars, setStyleVars] = useState<React.CSSProperties>({});
+  const hasTrackedView = useRef(false);
+
+  useEffect(() => {
+    // Analytics tracking when gallery comes into view
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !hasTrackedView.current) {
+          trackGalleryView();
+          hasTrackedView.current = true;
+        }
+      },
+      { threshold: 0.2 }
+    );
+
+    if (trackRef.current) {
+      observer.observe(trackRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
 
   useEffect(() => {
     const measure = () => {

client/src/components/HeroSection.tsx

@@ -1,6 +1,7 @@
 import { motion } from "framer-motion";
 import ParticleCanvas from "./ParticleCanvas";
 import { FaChevronDown } from "react-icons/fa";
+import { trackCTAClick } from "@/lib/analytics";
 
 const HeroSection = () => {
   return (
@@ -53,12 +54,14 @@ const HeroSection = () => {
           >
             <a
               href="#builds"
+              onClick={() => trackCTAClick('Scopri le Build', 'hero')}
               className="bg-[#ff7514] hover:bg-[#e06500] text-black font-semibold py-3 px-8 rounded-md transition-all transform hover:scale-105"
             >
               Scopri le Build
             </a>
             <a
               href="#contact"
+              onClick={() => trackCTAClick('Contattaci', 'hero')}
               className="bg-transparent border-2 border-white hover:border-[#ff7514] hover:text-[#ff7514] text-white font-medium py-3 px-8 rounded-md transition-all transform hover:scale-105"
             >
               Contattaci

client/src/components/ServicesSection.tsx

@@ -1,5 +1,6 @@
 import { FaDesktop, FaTools, FaTachometerAlt, FaCheck, FaArrowRight } from "react-icons/fa";
 import AnimatedElement from "@/lib/AnimatedElement";
+import { trackCTAClick } from "@/lib/analytics";
 
 const ServiceCard = ({ 
   icon, 
@@ -34,6 +35,7 @@ const ServiceCard = ({
       </ul>
       <a
         href="#contact"
+        onClick={() => trackCTAClick(cta, 'services')}
         className="inline-block text-[#ff7514] hover:underline font-medium group"
       >
         {cta} <FaArrowRight className="inline ml-1 transform group-hover:translate-x-1 transition-transform" />

client/src/pages/Home.tsx

@@ -1,12 +1,42 @@
+import { useEffect, useRef } from "react";
 import HeroSection from "@/components/HeroSection";
 import ServicesSection from "@/components/ServicesSection";
 import GallerySection from "@/components/GallerySection";
 import BuildsSection from "@/components/BuildsSection";
 import ComponentsSection from "@/components/ComponentsSection";
 import AppsSection from "@/components/AppsSection";
 import ContactSection from "@/components/ContactSection";
+import { trackSectionView } from "@/lib/analytics";
 
 const Home = () => {
+  const sectionsRef = useRef<Map<string, boolean>>(new Map());
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const sectionId = entry.target.id;
+            // Only track each section once per session
+            if (sectionId && !sectionsRef.current.get(sectionId)) {
+              trackSectionView(sectionId);
+              sectionsRef.current.set(sectionId, true);
+            }
+          }
+        });
+      },
+      { threshold: 0.3 } // Trigger when 30% of section is visible
+    );
+
+    // Observe all sections
+    const sections = document.querySelectorAll('section[id]');
+    sections.forEach((section) => observer.observe(section));
+
+    return () => {
+      sections.forEach((section) => observer.unobserve(section));
+    };
+  }, []);
+
   return (
     <div className="overflow-hidden">
       <HeroSection />