analytics

Author: gaborcsapo

index.html

@@ -6,6 +6,16 @@
   <meta name="description" content="Portfolio of Gabor Csapo showcasing his projects, experiences, and expertise in IoT, Urbanism, and Data Science.">
   <title>Gabor Csapo - AI | Evaluation | Data</title>
 
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-4XDKY642L6"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-4XDKY642L6');
+  </script>
+
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Syne:wght@400..800&display=swap" rel="stylesheet">

src/js/heroAnimation.js

@@ -672,6 +672,17 @@ export function initAnimation() {
 
                 currentPaletteIndex = (currentPaletteIndex + 1) % artPalettes.length;
                 currentPalette = artPalettes[currentPaletteIndex];
+                
+                // Track color switching with Google Analytics
+                if (typeof gtag !== 'undefined') {
+                    gtag('event', 'color_switch', {
+                        event_category: 'Hero Animation',
+                        event_label: currentPalette.name,
+                        palette_index: currentPaletteIndex,
+                        previous_palette: artPalettes[(currentPaletteIndex - 1 + artPalettes.length) % artPalettes.length].name,
+                        interaction_method: 'click'
+                    });
+                }
                 // Don't change bgColor or circle colors immediately - wait for texture to be ready
 
                 // Generate new grain texture with updated palette
@@ -830,6 +841,17 @@ export function initAnimation() {
 
             currentPaletteIndex = (currentPaletteIndex + 1) % artPalettes.length;
             currentPalette = artPalettes[currentPaletteIndex];
+            
+            // Track programmatic color switching with Google Analytics
+            if (typeof gtag !== 'undefined') {
+                gtag('event', 'color_switch', {
+                    event_category: 'Hero Animation',
+                    event_label: currentPalette.name,
+                    palette_index: currentPaletteIndex,
+                    previous_palette: artPalettes[(currentPaletteIndex - 1 + artPalettes.length) % artPalettes.length].name,
+                    interaction_method: 'programmatic'
+                });
+            }
             // Don't change bgColor or circle colors immediately - wait for texture to be ready
 
             // Generate new grain texture with updated palette

src/js/main.js

@@ -13,6 +13,7 @@ function initializeApp() {
   initColorPicker();
   initSmoothScrolling();
   initScrollAnimations();
+  initSocialLinkTracking();
 
   // Initialize animation after p5 is loaded
   loadP5Animation();
@@ -81,9 +82,47 @@ function initScrollAnimations() {
   // No static elements need animation observers currently
 }
 
+function initSocialLinkTracking() {
+  // Track clicks on all social/contact links
+  const socialLinks = document.querySelectorAll('.contact-minimal a');
+  
+  socialLinks.forEach(link => {
+    link.addEventListener('click', function(event) {
+      if (typeof gtag !== 'undefined') {
+        const linkText = this.textContent.trim();
+        const linkUrl = this.href;
+        const isExternal = linkUrl.startsWith('http') && !linkUrl.includes(window.location.hostname);
+        
+        gtag('event', 'social_link_click', {
+          event_category: 'Social Links',
+          event_label: linkText,
+          link_url: linkUrl,
+          link_type: isExternal ? 'external' : 'internal',
+          destination: linkText.toLowerCase()
+        });
+        
+        // For external links, add a small delay to ensure tracking
+        if (isExternal && event.target.target === '_blank') {
+          // No delay needed for _blank links as they open in new window
+        }
+      }
+    });
+  });
+}
+
 function initAnalytics() {
-  // Analytics placeholder - add Google Analytics script to HTML if needed
-  console.log('Analytics initialized');
+  // Google Analytics is now loaded via gtag in HTML
+  if (typeof gtag !== 'undefined') {
+    console.log('Google Analytics initialized');
+    
+    // Track page view
+    gtag('event', 'page_view', {
+      page_title: document.title,
+      page_location: window.location.href
+    });
+  } else {
+    console.log('Google Analytics not available');
+  }
 }
 
 // Utility functions

src/js/timelineComponent.js

@@ -183,7 +183,7 @@ function renderContent() {
 }
 
 // Navigate to chapter with animation
-function navigateToChapter(newIndex) {
+function navigateToChapter(newIndex, interactionMethod = 'click') {
     if (isTransitioning || newIndex === activeChapter) return;
 
     // Hide the hint after first navigation
@@ -194,6 +194,19 @@ function navigateToChapter(newIndex) {
 
     isTransitioning = true;
     const direction = newIndex > activeChapter ? 'next' : 'prev';
+    
+    // Track timeline navigation with Google Analytics
+    if (typeof gtag !== 'undefined') {
+        const chapterName = chapters[newIndex]?.title || `Chapter ${newIndex}`;
+        gtag('event', 'timeline_navigation', {
+            event_category: 'Timeline',
+            event_label: chapterName,
+            chapter_index: newIndex,
+            direction: direction,
+            previous_chapter: activeChapter,
+            interaction_method: interactionMethod
+        });
+    }
 
     // Calculate timeline position
     const timelineElement = document.querySelector('.timeline-section');
@@ -260,11 +273,11 @@ function navigateToChapter(newIndex) {
 }
 
 // Navigate with buttons
-function navigate(direction) {
+function navigate(direction, interactionMethod = 'button') {
     const newIndex = direction === 'next'
         ? Math.min(activeChapter + 1, chapters.length - 1)
         : Math.max(activeChapter - 1, 0);
-    navigateToChapter(newIndex);
+    navigateToChapter(newIndex, interactionMethod);
 }
 
 // Initialize event listeners
@@ -285,10 +298,13 @@ function initEventListeners() {
 
     // Keyboard navigation
     document.addEventListener('keydown', (e) => {
-        if (e.key === 'ArrowLeft') navigate('prev');
-        if (e.key === 'ArrowRight') navigate('next');
+        if (e.key === 'ArrowLeft') navigate('prev', 'keyboard');
+        if (e.key === 'ArrowRight') navigate('next', 'keyboard');
     });
 
+    // Touch gesture navigation
+    initTouchGestures();
+
     // Handle resize
     let resizeTimeout;
     window.addEventListener('resize', () => {
@@ -299,6 +315,54 @@ function initEventListeners() {
     });
 }
 
+// Touch gesture support
+function initTouchGestures() {
+    if (!timelineSection) return;
+    
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchEndX = 0;
+    let touchEndY = 0;
+    
+    // Minimum distance for a swipe to register (in pixels)
+    const minSwipeDistance = 50;
+    // Maximum vertical movement allowed for horizontal swipe
+    const maxVerticalDeviation = 100;
+    
+    // Touch start
+    timelineSection.addEventListener('touchstart', (e) => {
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+    }, { passive: true });
+    
+    // Touch end
+    timelineSection.addEventListener('touchend', (e) => {
+        touchEndX = e.changedTouches[0].clientX;
+        touchEndY = e.changedTouches[0].clientY;
+        handleSwipe();
+    }, { passive: true });
+    
+    // Handle swipe gesture
+    function handleSwipe() {
+        const deltaX = touchEndX - touchStartX;
+        const deltaY = Math.abs(touchEndY - touchStartY);
+        
+        // Check if this was primarily a horizontal swipe
+        if (Math.abs(deltaX) > minSwipeDistance && deltaY < maxVerticalDeviation) {
+            // Prevent navigation if already transitioning
+            if (isTransitioning) return;
+            
+            // Swipe right (positive deltaX) = go to previous chapter
+            // Swipe left (negative deltaX) = go to next chapter
+            if (deltaX > 0) {
+                navigate('prev', 'swipe');
+            } else {
+                navigate('next', 'swipe');
+            }
+        }
+    }
+}
+
 // Main initialization function
 export function initTimelineComponent() {
     console.log('Initializing timeline component...');

src/styles/main.css

@@ -862,7 +862,7 @@ p, h1, h2, h3, h4, h5, h6 {
 
   .timeline-label {
     font-size: var(--text-xs);
-    opacity: 0.4;
+    opacity: 0;
     top: 2rem;
   }