feat: add Plausible analytics tracking for code overlay interactions (#334)

# Add Plausible Analytics Event Tracking for Homepage Code Interactions

This PR adds analytics event tracking for user interactions with the code overlay component on the homepage:

- Added a global Plausible function definition in the site configuration to enable custom event tracking
- Implemented tracking for three specific user interactions:
  - When users click the "Reveal Code" button (`home:reveal-code` event)
  - When users manually scroll through the code (`home:code-scroll` event, tracked only once per session)
  - Added logic to distinguish between programmatic scrolling (auto-scroll or scroll-to-top) and manual user scrolling
- Added TypeScript declaration for the Plausible global function

These analytics will help us better understand how users engage with the code examples on our homepage.

Author: jumski

pkgs/website/astro.config.mjs

@@ -86,6 +86,10 @@ export default defineConfig({
             src: PLAUSIBLE_PROXY.url + PLAUSIBLE_PROXY.scriptPath,
           },
         },
+        {
+          tag: 'script',
+          content: `window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }`,
+        },
         {
           tag: 'meta',
           attrs: {

pkgs/website/src/components/CodeOverlay.astro

@@ -317,9 +317,22 @@
 </style>
 
 <script>
+  // TypeScript declaration for Plausible
+  declare global {
+    interface Window {
+      plausible?: (event: string, options?: { props?: Record<string, string | number> }) => void;
+    }
+  }
+
   // Global flag to track if auto-scroll animation is running
   let isAutoScrolling = false;
 
+  // Flag to track if programmatic scroll is happening (auto-scroll or scroll-to-top)
+  let isProgrammaticScroll = false;
+
+  // Flag to track if manual scroll event has been sent (only send once)
+  let hasTrackedManualScroll = false;
+
   const handleRevealButton = () => {
     const button = document.querySelector('.reveal-button') as HTMLElement | null;
     const overlay = document.querySelector('.code-overlay') as HTMLElement | null;
@@ -329,6 +342,11 @@
     if (!button || !overlay || !scrollableContainer || !scrollableInner) return;
 
     button.addEventListener('click', async () => {
+      // Track custom event in Plausible
+      if (typeof window.plausible !== 'undefined') {
+        window.plausible('home:reveal-code');
+      }
+
       const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
       // Helper to animate scroll with custom duration (cancellable on user interaction)
@@ -445,6 +463,14 @@
         return;
       }
 
+      // Track manual scroll event (only once, and only if not programmatic)
+      if (!hasTrackedManualScroll && !isProgrammaticScroll) {
+        hasTrackedManualScroll = true;
+        if (typeof window.plausible !== 'undefined') {
+          window.plausible('home:code-scroll');
+        }
+      }
+
       if (scrollableInner.scrollTop > 50) {
         button.style.display = 'block';
       } else {
@@ -456,7 +482,14 @@
     scrollableInner.addEventListener('scroll', updateButtonVisibility);
 
     button.addEventListener('click', () => {
+      // Mark as programmatic scroll to avoid tracking
+      isProgrammaticScroll = true;
       scrollableInner.scrollTo({ top: 0, behavior: 'smooth' });
+
+      // Reset flag after scroll completes
+      setTimeout(() => {
+        isProgrammaticScroll = false;
+      }, 1000);
     });
   };
 
@@ -480,6 +513,10 @@
       if (scrollTopButton) {
         scrollTopButton.style.display = 'none';
       }
+
+      // Note: hasTrackedManualScroll is NOT reset here
+      // This means we track manual scroll only once per page session,
+      // even if user reveals, resets, and reveals again
     });
   };