Click Heatmap

Overview

The click heatmap feature allows you to track and visualize user clicks on your website. This helps you understand which elements users interact with most, identify usability issues, and optimize your UI for better user engagement.

Installation

Add the Serla heatmap tracker to your website by including the script in your HTML:

<script src="https://serla.dev/serla-heatmap.js"></script>
<script>
  SerlaHeatmap.init('YOUR_API_KEY', {
    batchSize: 10,
    batchInterval: 5000,
    sampleRate: 1.0
  });
</script>

Configuration Options

batchSize

Number of clicks to batch before sending to the server. Default: 10

batchInterval

Time in milliseconds between automatic batch sends. Default: 5000 (5 seconds)

sampleRate

Percentage of clicks to track (0.0 to 1.0). Use lower values for high-traffic sites. Default: 1.0 (100%)

Setting User ID

To track clicks per user, set the user ID after authentication:

SerlaHeatmap.setUserId('user_123');

Viewing Heatmaps

Navigate to the Heatmap page in your dashboard to visualize click data:

1. Select a project from the dropdown
2. Choose a specific page path to analyze
3. Adjust viewport size to match your target devices
4. Use intensity and radius sliders to fine-tune the visualization

Data Collection

For each click, the tracker captures:

• Click coordinates (x, y)
• Viewport dimensions
• Page URL and path
• Element tag, ID, class, and text
• User ID and session ID (if set)
• User agent and IP address
• Timestamp

Privacy Considerations

The heatmap tracker only tracks clicks, not mouse movement. This provides valuable insights while minimizing privacy concerns and performance impact. All data is stored in your own database.

API Endpoint

Click events are sent to POST /api/clicks/ingest. You can also send clicks programmatically using this endpoint:

curl -X POST https://serla.dev/api/clicks/ingest \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "clicks": [
      {
        "x": 450,
        "y": 320,
        "url": "https://example.com/page",
        "path": "/page",
        "viewportWidth": 1920,
        "viewportHeight": 1080,
        "elementTag": "button",
        "elementId": "submit-btn",
        "elementClass": "btn btn-primary",
        "elementText": "Submit",
        "userId": "user_123",
        "sessionId": "sess_abc",
        "timestamp": "2025-12-04T10:30:00.000Z"
      }
    ]
  }'