如何用GTM和GA4追踪商品筛选页的高频筛选条件？

Core Approach #

Combine initial state tracking with delta (change) detection to cover all filter scenarios: pre-filled filters from URLs/submenus, and incremental user-driven filter adjustments.

1. Track Initial Filter State on Page Load #

When the page loads—including cases where users arrive with pre-filled filters via URL or submenu links—parse the URL query parameters to extract all active filters, then log each as an initial selection:

• For checkbox-based filters (category/brand): Identify values present in the query string and push each to your data layer.
• For price range: Extract min/max values and log the range selection.

Example code snippet for initial state parsing:

// On page load
const urlParams = new URLSearchParams(window.location.search);
const initialFilters = {
  categories: urlParams.getAll('category'),
  brands: urlParams.getAll('brand'),
  priceMin: urlParams.get('priceMin'),
  priceMax: urlParams.get('priceMax')
};

// Push initial category selections to data layer
initialFilters.categories.forEach(category => {
  window.dataLayer.push({
    event: 'filter_selection',
    filter_type: 'category',
    filter_value: category,
    action: 'initial'
  });
});

// Repeat similar logic for brands and price range

2. Track Incremental Filter Changes with State Comparison #

Maintain a persistent currentFilters variable to store the last known filter state. Whenever a filter is modified (via checkbox click, price range update, or URL change):

1. Extract the new filter state from the URL or DOM elements.
2. Compare the new state with currentFilters to identify exactly what changed (added/removed checkbox values, updated price range).
3. Push only the changed items to the data layer with an action label (added or removed).
4. Update currentFilters to the new state.

Example logic for delta detection:

let currentFilters = {};

function updateFilters() {
  const urlParams = new URLSearchParams(window.location.search);
  const newFilters = {
    categories: urlParams.getAll('category'),
    brands: urlParams.getAll('brand'),
    priceMin: urlParams.get('priceMin'),
    priceMax: urlParams.get('priceMax')
  };

  // Detect category changes
  const addedCategories = newFilters.categories.filter(cat => !currentFilters.categories?.includes(cat));
  const removedCategories = currentFilters.categories?.filter(cat => !newFilters.categories.includes(cat)) || [];

  addedCategories.forEach(cat => {
    window.dataLayer.push({
      event: 'filter_selection',
      filter_type: 'category',
      filter_value: cat,
      action: 'added'
    });
  });

  removedCategories.forEach(cat => {
    window.dataLayer.push({
      event: 'filter_selection',
      filter_type: 'category',
      filter_value: cat,
      action: 'removed'
    });
  });

  // Repeat similar comparison logic for brands and price range

  // Update current filter state
  currentFilters = {...newFilters};
}

// Trigger updates on user interactions
document.querySelectorAll('.filter-checkbox').forEach(checkbox => {
  checkbox.addEventListener('change', updateFilters);
});
document.getElementById('price-min').addEventListener('input', updateFilters);
document.getElementById('price-max').addEventListener('input', updateFilters);

// Trigger updates when URL changes (e.g., from submenu links)
window.addEventListener('popstate', updateFilters);

// Initialize on page load
updateFilters();

3. Key Advantages #

• Covers All Entry Points: Initial state tracking captures filters set via direct URLs or submenu links, which click-event-only tracking misses.
• Avoids Duplicate Tracking: Delta detection ensures only actual changes are logged, so adjusting unrelated filters won’t re-track existing selections.
• Precise Action Context: Each event includes whether the filter was initially selected, added, or removed, giving you accurate data for popularity analysis (e.g., count how many times a category was actively chosen).

Additional Tips #

• For price range popularity stats, consider grouping ranges (e.g., $0-$50, $51-$100) instead of tracking exact min/max values if granularity isn’t needed.
• Align dataLayer event parameters with your analytics platform’s requirements (e.g., Google Analytics 4 event schemas).

内容的提问来源于stack exchange，提问作者Matthias