How to track user activity in Replit apps

1CREATE TABLE IF NOT EXISTS user_events (
2  id SERIAL PRIMARY KEY,
3  event_type VARCHAR(50) NOT NULL,
4  page VARCHAR(255),
5  element VARCHAR(255),
6  session_id VARCHAR(100),
7  metadata JSONB DEFAULT '{}',
8  created_at TIMESTAMP DEFAULT NOW()
9);
10
11CREATE INDEX idx_events_type ON user_events(event_type);
12CREATE INDEX idx_events_created ON user_events(created_at);

1// server/routes/analytics.js
2import { Router } from 'express';
3import pg from 'pg';
4
5const router = Router();
6const pool = new pg.Pool({ connectionString: process.env.DATABASE_URL });
7
8router.post('/api/events', async (req, res) => {
9  const { event_type, page, element, session_id, metadata } = req.body;
10
11  if (!event_type) {
12    return res.status(400).json({ error: 'event_type is required' });
13  }
14
15  try {
16    await pool.query(
17      `INSERT INTO user_events (event_type, page, element, session_id, metadata)
18       VALUES ($1, $2, $3, $4, $5)`,
19      [event_type, page, element, session_id, JSON.stringify(metadata || {})]
20    );
21    res.status(201).json({ success: true });
22  } catch (err) {
23    console.error('Event logging error:', err.message);
24    res.status(500).json({ error: 'Failed to log event' });
25  }
26});
27
28export default router;

1// src/utils/tracker.ts
2const SESSION_ID = crypto.randomUUID();
3const API_URL = '/api/events';
4
5export function trackEvent(
6  eventType: string,
7  element?: string,
8  metadata?: Record<string, unknown>
9) {
10  try {
11    const payload = {
12      event_type: eventType,
13      page: window.location.pathname,
14      element,
15      session_id: SESSION_ID,
16      metadata
17    };
18
19    fetch(API_URL, {
20      method: 'POST',
21      headers: { 'Content-Type': 'application/json' },
22      body: JSON.stringify(payload)
23    }).catch(() => {}); // Silently ignore tracking failures
24  } catch {
25    // Never let tracking break the app
26  }
27}
28
29export function trackPageView() {
30  trackEvent('page_view');
31}

1// src/App.tsx
2import { useEffect } from 'react';
3import { useLocation } from 'react-router-dom';
4import { trackPageView } from './utils/tracker';
5
6function App() {
7  const location = useLocation();
8
9  useEffect(() => {
10    trackPageView();
11  }, [location.pathname]);
12
13  return (
14    // ... your routes and layout
15  );
16}

1// Example: tracking a button click
2import { trackEvent } from '../utils/tracker';
3
4function SignUpButton() {
5  const handleClick = () => {
6    trackEvent('click', 'signup_button', { plan: 'pro' });
7    // ... proceed with sign-up logic
8  };
9
10  return <button onClick={handleClick}>Sign Up</button>;
11}

1// GET /api/analytics?days=7
2router.get('/api/analytics', async (req, res) => {
3  const adminKey = req.headers['x-admin-key'];
4  if (adminKey !== process.env.ANALYTICS_ADMIN_KEY) {
5    return res.status(403).json({ error: 'Unauthorized' });
6  }
7
8  const days = parseInt(req.query.days) || 7;
9
10  try {
11    const result = await pool.query(
12      `SELECT event_type, COUNT(*) as count,
13              COUNT(DISTINCT session_id) as unique_sessions
14       FROM user_events
15       WHERE created_at > NOW() - INTERVAL '1 day' * $1
16       GROUP BY event_type
17       ORDER BY count DESC`,
18      [days]
19    );
20    res.json({ period_days: days, events: result.rows });
21  } catch (err) {
22    console.error('Analytics query error:', err.message);
23    res.status(500).json({ error: 'Query failed' });
24  }
25});