devlog #2: Interactive Components & User Privacy

Enhancing Content with Dynamic Elements While Respecting User Preferences

Published: May 22, 2025

In this second entry of the Signals & Systems devlog, I’m diving into the art of crafting interactive components using Astro, while also implementing robust privacy measures. This combination creates content that’s not only engaging and educational, but also respectful of user consent and privacy preferences.

Balancing Interactivity and Privacy

Modern web platforms face a fundamental tension: creating rich, interactive experiences often involves tracking user behavior, which raises privacy concerns. My approach to this challenge has been to:

1. Build interactive components that enhance content value
2. Implement analytics systems with explicit user consent
3. Follow a content-first philosophy that respects user autonomy

Let’s explore each of these aspects in depth, starting with interactivity.

Astro Components: The Engine of Interactivity

This platform is built almost entirely on Astro’s native component system. Astro components allow for a seamless blend of static content and dynamic, interactive features - without the overhead of a full client-side framework. Every interactive element you see here, from charts to consent popups, is an Astro component designed for performance, accessibility, and reusability.

• Encapsulate logic and UI for easy reuse
• Enable partial hydration for minimal JavaScript
• Support strong typing and documentation
• Promote accessibility and progressive enhancement

Data Visualization: Beyond the Basics

Data visualization isn’t just about bar charts - it’s about telling a story with data. For this article, I’ve chosen a pie chart to emphasize the proportional significance of each platform value. This visualization highlights how each core value contributes to the overall philosophy of Signals & Systems:

This pie chart visualizes the relative importance of each of the values I prioritize: accessibility, performance, user experience, visualization, customization, and fun. By showing proportions, it underscores how each value shapes the overall direction of the platform.

Privacy & Consent: The Ethical Foundation

While building interactive components, I became increasingly aware of the importance of privacy and explicit consent. This led me to implement a consent-first analytics approach.

The Consent Popup Component

The ConsentPopup component is designed to be unobtrusive but clear about what data might be collected. It gives users a straightforward choice and remembers their preferences:

• Clear explanation of what data is collected
• Simple accept/decline options
• Preferences stored in localStorage
• No tracking scripts loaded until consent is granted

---
// ConsentPopup.astro - A pure Astro consent component with no framework dependencies
---
<script>
document.addEventListener('DOMContentLoaded', function () {
  const consentKey = 'ss-analytics-consent';
  if (!localStorage.getItem(consentKey)) {
    const popup = document.createElement('div');
    popup.id = 'astro-consent-popup';
    popup.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60';
    popup.innerHTML =       <div class='bg-white rounded-lg shadow-lg p-6 max-w-md w-full text-gray-900' role='dialog' aria-modal='true' aria-labelledby='consent-title'>
          <h2 id='consent-title' class='text-lg font-semibold mb-2'>Analytics Consent</h2>
          <p class='mb-4'>I use Google Tag Manager to collect usage data because I'm a curious nerd who loves understanding how people interact with my content.</p>
          <div class='flex gap-2 justify-end'>
            <button id='decline-btn' class='px-4 py-2 rounded bg-gray-200 hover:bg-gray-300'>Decline</button>
            <button id='accept-btn' class='px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700'>Accept</button>
          </div>
        </div>
      ';
    document.body?.appendChild(popup);
    popup.querySelector('#accept-btn')?.addEventListener('click', () => {
      localStorage.setItem(consentKey, 'granted');
      popup.remove();
    });
    popup.querySelector('#decline-btn')?.addEventListener('click', () => {
      localStorage.setItem(consentKey, 'denied');
      popup.remove();
    });
  }
});
</script>

Conditional GTM Loading

The magic happens in BaseLayout where Google Tag Manager is only loaded after consent:

<!-- GTM will be injected dynamically after consent -->
<div id="consent-root"></div>
<script type="module">
// Minimal consent logic and GTM loader
const consentKey = 'ss-analytics-consent';
function loadGTM() {
  if (document.getElementById('gtm-script')) return;
  const s = document.createElement('script');
  s.id = 'gtm-script';
  s.async = true;
  s.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX';
  document.head.appendChild(s);
  // noscript fallback
  const iframe = document.createElement('iframe');
  iframe.src = 'https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX';
  iframe.height = 0;
  iframe.width = 0;
  iframe.style.display = 'none';
  iframe.style.visibility = 'hidden';
  iframe.setAttribute('aria-hidden', 'true');
  document.body.appendChild(iframe);
}

if (typeof window !== 'undefined') {
  const consent = localStorage.getItem(consentKey);
  if (consent === 'granted') {
    loadGTM();
  }
}
</script>

This approach ensures no tracking occurs without explicit user permission.

Technical Implementation Highlights

• Astro’s Islands Architecture for minimal JS
• Astro Components for clean organization
• Consent-based analytics for privacy
• Dynamic chart rendering
• Progressive enhancement for accessibility

What’s Next

• More interactive components
• Enhanced code syntax highlighting
• Dark mode support
• Further privacy enhancements

JELL

Innovator, Educator & Technologist

GitHub LinkedIn

JELL is an innovator, educator, and technologist exploring the confluence of AI, higher education, and ethical technology. Through Signals & Systems, JELL shares insights, experiments, and reflections on building meaningful digital experiences, and other random things.

More about JELL →