Ruby on Rails应用中如何跟踪所有点击事件并记录至Postgres数据库

Nice question—tracking every interactive click in a large Rails app can feel daunting, but a global, scalable approach will save you from manually updating hundreds of elements. Here's how to implement this smoothly, building on your existing AppEvent.record_event setup:

1. Frontend: Global Click Listener #

Instead of adding a click handler to every single element, attach a global listener to the document that catches all clicks and filters for interactive elements. This works even for dynamically loaded content (like Turbo frames or AJAX-rendered elements).

Add this to your JavaScript pack (e.g., app/javascript/packs/click_tracking.js):

document.addEventListener('click', function(e) {
  // Find the closest interactive element (handles nested elements like icons inside buttons)
  const targetElement = e.target.closest(
    'a, button, [data-clickable], [onclick], [role="button"], [style*="cursor:pointer"]'
  );

  // Skip if no interactive element was clicked
  if (!targetElement) return;

  // Skip elements we explicitly don't want to track
  if (targetElement.hasAttribute('data-no-track')) return;

  // Prevent duplicate tracking for nested elements (e.g., a span inside a link)
  if (e.target !== targetElement && ['A', 'BUTTON'].includes(targetElement.tagName)) return;

  // Gather context about the click
  const clickData = {
    event_type: 'element_click',
    url: window.location.href,
    element_type: targetElement.tagName.toLowerCase(),
    element_text: targetElement.textContent.trim() || targetElement.getAttribute('aria-label') || 'Unlabeled element',
    element_id: targetElement.id || null,
    element_classes: targetElement.className || null
  };

  // Send data to Rails backend asynchronously (won't block the user's click)
  fetch('/app_events/track_click', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
    },
    body: JSON.stringify(clickData)
  }).catch(err => console.error('Click tracking failed:', err));
});

Key Frontend Notes: #

• Use closest() to handle nested elements (e.g., an icon inside a button will still track the button click).
• Add a data-no-track attribute to any elements you want to exclude (e.g., <a href="/" data-no-track>Home</a>).
• We don't rely on frontend for user data—we'll validate that in the backend for security.

2. Backend: Route & Controller Action #

First, add a route to handle the click tracking request:

# config/routes.rb
post '/app_events/track_click', to: 'app_events#track_click'

Then update your AppEventsController to process the request and use your existing record_event method:

# app/controllers/app_events_controller.rb
def track_click
  # Use current_user instead of frontend data for security
  user_identifier = current_user&.name || 'Guest'

  # Pass metadata to capture element details (add a `metadata` jsonb column if you don't have it)
  AppEvent.record_event(
    event_type: params[:event_type],
    url: params[:url],
    user: user_identifier,
    metadata: params.permit(:element_type, :element_text, :element_id, :element_classes)
  )

  head :ok # No need to send a response body—keep it lightweight
end

3. Add Metadata Column (If Needed) #

To store element-specific details, add a metadata column to your app_events table (use jsonb for Postgres, which supports querying):

rails generate migration AddMetadataToAppEvents metadata:jsonb
rails db:migrate

Update your model to handle the metadata:

# app/models/app_event.rb
class AppEvent < ApplicationRecord
  # For jsonb, you can use store_accessors if you want to access fields directly
  store_accessor :metadata, :element_type, :element_text, :element_id, :element_classes
end

4. Scalability & Accuracy Improvements #

• Throttle Rapid Clicks: Prevent duplicate records if a user clicks quickly by adding a simple throttle:

  let isTrackingInProgress = false;
  document.addEventListener('click', function(e) {
    if (isTrackingInProgress) return;
    isTrackingInProgress = true;
    setTimeout(() => isTrackingInProgress = false, 300);
  
    // ... rest of your click handling code
  });
  

• Batch Events (High Traffic): For apps with lots of user activity, batch events on the frontend and send them every 5 seconds instead of one per click—reduces database load.
• Validate Requests: Add a before_action to ensure the request comes from an authenticated user (if applicable):

  # app/controllers/app_events_controller.rb
  before_action :authenticate_user!, only: [:track_click]
  

This approach will let you track all interactive clicks without touching every element in your large app, while keeping the implementation maintainable and secure.

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