managarten/memoro/apps/landing/src/components/UmamiTracking.astro

---
// This component adds Umami tracking to various elements
---

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Helper function to track Umami events
    const trackUmami = (eventName: string, eventData?: Record<string, any>) => {
      if (typeof window.umami !== 'undefined') {
        window.umami.track(eventName, eventData);
      }
    };

    // Track Homepage visits
    if (window.location.pathname === '/' || 
        window.location.pathname === '/de' || 
        window.location.pathname === '/de/' || 
        window.location.pathname === '/en' || 
        window.location.pathname === '/en/') {
      trackUmami('homepage-visit', { lang: document.documentElement.lang });
    }

    // Track Download Page visits
    if (window.location.pathname.includes('/download')) {
      trackUmami('download-page-visit', { lang: document.documentElement.lang });
    }

    // Track Contact Page visits
    if (window.location.pathname.includes('/contact')) {
      trackUmami('contact-page-visit', { lang: document.documentElement.lang });
    }

    // Track Download button clicks with platform detection
    const downloadButtons = document.querySelectorAll('[data-download-platform]');
    downloadButtons.forEach(button => {
      button.addEventListener('click', () => {
        const platform = button.getAttribute('data-download-platform');
        const source = button.closest('section')?.className || 'unknown';
        trackUmami('download-click', { 
          platform,
          source,
          lang: document.documentElement.lang
        });
      });
    });

    // Track iOS and Android download links
    const appStoreLinks = document.querySelectorAll('a[href*="apps.apple.com"], a[href*="testflight.apple.com"]');
    appStoreLinks.forEach(link => {
      link.addEventListener('click', () => {
        const isTestflight = link.getAttribute('href')?.includes('testflight') || false;
        trackUmami('ios-download', { 
          type: isTestflight ? 'testflight' : 'appstore',
          source: link.closest('section')?.className || 'unknown',
          lang: document.documentElement.lang
        });
      });
    });

    const playStoreLinks = document.querySelectorAll('a[href*="play.google.com"]');
    playStoreLinks.forEach(link => {
      link.addEventListener('click', () => {
        trackUmami('android-download', { 
          source: link.closest('section')?.className || 'unknown',
          lang: document.documentElement.lang
        });
      });
    });

    // Track Web App Login button clicks
    const loginButtons = document.querySelectorAll('a[href*="web.memoro.ai"], a[href*="app.memoro.ai"]');
    loginButtons.forEach(button => {
      button.addEventListener('click', () => {
        trackUmami('web-app-login', { 
          source: 'navigation',
          lang: document.documentElement.lang
        });
      });
    });

    // Track Pricing page visits
    if (window.location.pathname.includes('/prices') || window.location.pathname.includes('/pricing')) {
      trackUmami('pricing-page-visit', { lang: document.documentElement.lang });
    }

    // Track Features page visits
    if (window.location.pathname.includes('/features')) {
      trackUmami('features-page-visit', { lang: document.documentElement.lang });
    }

    // Track Industries page visits
    if (window.location.pathname.includes('/industries')) {
      const industryPath = window.location.pathname.split('/industries/')[1];
      const industry = industryPath ? industryPath.split('/')[0] : 'overview';
      trackUmami('industries-page-visit', { 
        industry,
        lang: document.documentElement.lang
      });
    }

    // Track Guides page visits
    if (window.location.pathname.includes('/guides')) {
      trackUmami('guides-page-visit', { lang: document.documentElement.lang });
    }

    // Track FAQ page visits
    if (window.location.pathname.includes('/faq')) {
      trackUmami('faq-page-visit', { lang: document.documentElement.lang });
    }

    // Track Team page visits
    if (window.location.pathname.includes('/team')) {
      trackUmami('team-page-visit', { lang: document.documentElement.lang });
    }

    // Track About page visits
    if (window.location.pathname.includes('/about')) {
      trackUmami('about-page-visit', { lang: document.documentElement.lang });
    }

    // Track Blog post reads
    if (window.location.pathname.includes('/blog/') && !window.location.pathname.endsWith('/blog/')) {
      const postSlug = window.location.pathname.split('/blog/')[1]?.replace('/', '');
      trackUmami('blog-post-read', { 
        post: postSlug,
        url: window.location.pathname,
        lang: document.documentElement.lang
      });
    }

    // Track Demo Video plays
    const videoButtons = document.querySelectorAll('[data-video-popup], .video-popup-trigger, button:has(svg[class*="play"])');
    videoButtons.forEach(button => {
      button.addEventListener('click', () => {
        trackUmami('demo-video-play', { 
          source: button.closest('section')?.className || 'unknown',
          lang: document.documentElement.lang
        });
      });
    });

    // Track all social media clicks
    const socialMediaTracking = [
      { selector: 'a[href*="linkedin.com/company/memoroai"]', event: 'linkedin-click' },
      { selector: 'a[href*="youtube.com/@memoroai"]', event: 'youtube-click' },
      { selector: 'a[href*="twitter.com/memoroai"], a[href*="x.com/memoroai"]', event: 'twitter-click' },
      { selector: 'a[href*="facebook.com"]', event: 'facebook-click' },
      { selector: 'a[href*="instagram.com/memoroai"]', event: 'instagram-click' },
    ];

    socialMediaTracking.forEach(({ selector, event }) => {
      const links = document.querySelectorAll(selector);
      links.forEach(link => {
        link.addEventListener('click', () => {
          const source = link.closest('footer') ? 'footer' : 
                         link.closest('[class*="contact"]') ? 'contact_page' : 'other';
          trackUmami(event, { 
            source,
            lang: document.documentElement.lang
          });
        });
      });
    });

    // Track language switches
    const languageLinks = document.querySelectorAll('a[href^="/de"], a[href^="/en"]');
    languageLinks.forEach(link => {
      const href = link.getAttribute('href');
      if (href && (href === '/de' || href === '/en' || href.match(/^\/(de|en)\/$/))) {
        link.addEventListener('click', () => {
          const newLang = href.includes('/de') ? 'de' : 'en';
          const currentLang = document.documentElement.lang;
          if (newLang !== currentLang) {
            trackUmami('language-switch', { 
              from: currentLang, 
              to: newLang 
            });
          }
        });
      }
    });

    // Track Newsletter signup form submissions
    const newsletterForms = document.querySelectorAll('form[action*="newsletter"], form[id*="newsletter"], form[class*="newsletter"]');
    newsletterForms.forEach(form => {
      form.addEventListener('submit', () => {
        trackUmami('newsletter-signup', { 
          source: form.closest('section')?.className || 'unknown',
          lang: document.documentElement.lang
        });
      });
    });

    // Track Contact form submissions
    const contactForms = document.querySelectorAll('form[action*="contact"], form[id*="contact"], form[class*="contact"]');
    contactForms.forEach(form => {
      form.addEventListener('submit', () => {
        trackUmami('contact-form-submit', { 
          lang: document.documentElement.lang
        });
      });
    });

    // Track Blueprint/Template views
    if (window.location.pathname.includes('/blueprints')) {
      const blueprintPath = window.location.pathname.split('/blueprints/')[1];
      const blueprint = blueprintPath ? blueprintPath.split('/')[0] : 'overview';
      trackUmami('blueprints-page-visit', { 
        blueprint,
        lang: document.documentElement.lang
      });
    }

    // Track Memories page visits
    if (window.location.pathname.includes('/memories')) {
      const memoryPath = window.location.pathname.split('/memories/')[1];
      const memory = memoryPath ? memoryPath.split('/')[0] : 'overview';
      trackUmami('memories-page-visit', { 
        memory,
        lang: document.documentElement.lang
      });
    }

    // Track Wallpaper downloads
    const wallpaperLinks = document.querySelectorAll('a[href*="/wallpapers"], a[download*="wallpaper"]');
    wallpaperLinks.forEach(link => {
      link.addEventListener('click', () => {
        trackUmami('wallpaper-download', { 
          file: link.getAttribute('download') || 'unknown',
          lang: document.documentElement.lang
        });
      });
    });

    // Track Press Kit access
    if (window.location.pathname.includes('/presskit') || window.location.pathname.includes('/press')) {
      trackUmami('presskit-page-visit', { lang: document.documentElement.lang });
    }

    // Track Statistics page visits
    if (window.location.pathname.includes('/statistics') || window.location.pathname.includes('/stats')) {
      trackUmami('statistics-page-visit', { lang: document.documentElement.lang });
    }

    // Track testimonials page visits
    if (window.location.pathname.includes('/testimonials')) {
      trackUmami('testimonials-page-visit', { lang: document.documentElement.lang });
    }

    // Track CTA button clicks
    const ctaButtons = document.querySelectorAll('[class*="cta"]:not([data-download-platform])');
    ctaButtons.forEach(button => {
      button.addEventListener('click', () => {
        const buttonText = button.textContent?.trim() || 'unknown';
        const href = button.getAttribute('href') || '';
        
        // Don't track if already tracked elsewhere
        if (!href.includes('download') && !href.includes('contact')) {
          trackUmami('cta-click', { 
            text: buttonText,
            destination: href,
            source: button.closest('section')?.className || 'unknown',
            lang: document.documentElement.lang
          });
        }
      });
    });

    // Track scroll depth
    let maxScroll = 0;
    let scrollTracked = { 25: false, 50: false, 75: false, 100: false };

    const trackScrollDepth = () => {
      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = Math.round((window.scrollY / scrollHeight) * 100);

      if (scrollPercent > maxScroll) {
        maxScroll = scrollPercent;

        if (scrollPercent >= 25 && !scrollTracked[25]) {
          scrollTracked[25] = true;
          trackUmami('scroll-depth', { depth: 25, page: window.location.pathname });
        }
        if (scrollPercent >= 50 && !scrollTracked[50]) {
          scrollTracked[50] = true;
          trackUmami('scroll-depth', { depth: 50, page: window.location.pathname });
        }
        if (scrollPercent >= 75 && !scrollTracked[75]) {
          scrollTracked[75] = true;
          trackUmami('scroll-depth', { depth: 75, page: window.location.pathname });
        }
        if (scrollPercent >= 95 && !scrollTracked[100]) {
          scrollTracked[100] = true;
          trackUmami('scroll-depth', { depth: 100, page: window.location.pathname });
        }
      }
    };

    // Throttle scroll tracking
    let scrollTimer: NodeJS.Timeout;
    window.addEventListener('scroll', () => {
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(trackScrollDepth, 100);
    });

    // Track page engagement time
    let startTime = Date.now();
    let isActive = true;

    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        if (isActive) {
          const timeSpent = Math.round((Date.now() - startTime) / 1000);
          trackUmami('page-engagement', { 
            seconds: timeSpent,
            page: window.location.pathname
          });
          isActive = false;
        }
      } else {
        startTime = Date.now();
        isActive = true;
      }
    });

    // Track before user leaves
    window.addEventListener('beforeunload', () => {
      if (isActive) {
        const timeSpent = Math.round((Date.now() - startTime) / 1000);
        trackUmami('page-engagement', { 
          seconds: timeSpent,
          page: window.location.pathname
        });
      }
    });
  });
</script>