feat: Enhance analytics tracking for user interactions with style filters and favorites

Author: wictorwilen

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2025.10.23] - 2025-10-23 08:33:51 UTC
+
+
+### Added
+- **Enhanced Analytics Tracking**: Added comprehensive tracking for user interactions including favorite toggles (add/remove with item names) and style filter selections (individual styles, select all, clear all) to better understand user preferences and behavior patterns
+
 ## [2025.10.23] - 2025-10-23 07:41:28 UTC
 
 

web/src/components/filters/StyleFilter.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import { trackStyleSelection } from '../../services/analytics';
 
 interface StyleFilterProps {
   selectedStyles: ('regular' | 'filled' | 'light' | 'flat' | 'color')[];
@@ -31,20 +32,33 @@ export default function StyleFilter({
   className,
 }: StyleFilterProps) {
   const handleStyleToggle = (style: 'regular' | 'filled' | 'light' | 'flat' | 'color') => {
+    let newStyles: ('regular' | 'filled' | 'light' | 'flat' | 'color')[];
+    
     if (selectedStyles.includes(style)) {
       // Remove the style
-      onStylesChange(selectedStyles.filter(s => s !== style));
+      newStyles = selectedStyles.filter(s => s !== style);
     } else {
       // Add the style
-      onStylesChange([...selectedStyles, style]);
+      newStyles = [...selectedStyles, style];
     }
+    
+    // Track the style selection change
+    trackStyleSelection(newStyles, availableStyles.length);
+    
+    onStylesChange(newStyles);
   };
 
   const handleSelectAll = () => {
+    // Track selecting all styles
+    trackStyleSelection(availableStyles, availableStyles.length);
+    
     onStylesChange(availableStyles);
   };
 
   const handleClearAll = () => {
+    // Track clearing all styles
+    trackStyleSelection([], availableStyles.length);
+    
     onStylesChange([]);
   };
 

web/src/components/icons/FavoriteButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Icon, Emoji } from '../../types';
 import { useFavorites } from '../../hooks/useFavorites';
 import { StarIcon, StarIconFilled } from './MinimalIcons';
+import { trackFavoriteToggle } from '../../services/analytics';
 
 interface FavoriteButtonProps {
   item: Icon | Emoji;
@@ -18,6 +19,12 @@ const FavoriteButton: React.FC<FavoriteButtonProps> = ({ item, itemType, classNa
     e.preventDefault();
     e.stopPropagation();
 
+    const action = isItemFavorite ? 'remove' : 'add';
+    const itemName = item.name || item.id;
+    
+    // Track the favorite toggle event
+    trackFavoriteToggle(itemType, itemName, action);
+    
     toggleFavorite(item, itemType);
   };
 

web/src/components/layout/Sidebar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ChevronRightIcon, StarIconFilled } from '../icons/MinimalIcons';
 import { useFavorites } from '../../hooks/useFavorites';
 import { useAnalytics } from '../../hooks/useAnalytics';
+import { trackFilter } from '../../services/analytics';
 import clsx from 'clsx';
 
 interface Category {
@@ -94,6 +95,9 @@ export default function Sidebar({
             {/* Favorites */}
             <button
               onClick={() => {
+                // Track favorites filter toggle
+                trackFilter('favorites', showFavoritesOnly ? 'off' : 'on');
+                
                 onToggleFavorites();
                 // Clear category selection when favorites is toggled on
                 if (!showFavoritesOnly && selectedCategory !== null) {

web/src/services/analytics.ts

@@ -197,3 +197,39 @@ export const trackExternalLink = (url: string, linkText: string): void => {
 export const trackError = (errorType: string, errorMessage: string): void => {
   trackEvent('error', 'application', `${errorType}: ${errorMessage}`);
 };
+
+/**
+ * Track favorite toggle events
+ */
+export const trackFavoriteToggle = (
+  itemType: 'icon' | 'emoji',
+  itemName: string,
+  action: 'add' | 'remove'
+): void => {
+  trackEvent(`favorite_${action}`, itemType, itemName);
+};
+
+/**
+ * Track style selection changes
+ */
+export const trackStyleSelection = (
+  selectedStyles: string[],
+  totalAvailableStyles: number
+): void => {
+  const selectedCount = selectedStyles.length;
+  const stylesList = selectedStyles.sort().join(', ') || 'none';
+  
+  trackEvent('style_filter', 'filter', stylesList, selectedCount);
+  
+  // Track specific analytics about style selection behavior
+  if (selectedCount === 0) {
+    trackEvent('style_filter_cleared', 'filter', 'all_styles_deselected');
+  } else if (selectedCount === totalAvailableStyles) {
+    trackEvent('style_filter_all', 'filter', 'all_styles_selected');
+  } else {
+    // Track individual popular styles
+    selectedStyles.forEach(style => {
+      trackEvent('style_selected', 'filter', style);
+    });
+  }
+};