Analytics & Observability

Temps includes visitor analytics, session replay, Core Web Vitals tracking, funnel analysis, and AI crawler visibility — all built-in, no third-party service required. Add <TempsAnalyticsProvider> to your React app (or a <script> tag for vanilla JS) and data starts flowing immediately. Everything stays on your own infrastructure.

Overview

Unlike Vercel and other platforms that require third-party integrations, Temps provides production-ready analytics out of the box:

Architecture

Temps analytics is powered by:

• TimescaleDB: Time-series database for high-throughput event ingestion
• PostgreSQL: Hypertables for automatic data partitioning
• In-Memory Caching: Sub-100ms query performance
• Event Batching: Efficient network usage

Setup

For React and Next.js apps, wrap your application with the React provider:

import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

export function App() {
  return (
    <TempsAnalyticsProvider>
      <YourApp />
    </TempsAnalyticsProvider>
  );
}

For plain HTML pages, Astro, Alpine.js, htmx, or another non-React frontend, add the browser analytics script before </head>:

<script
  defer
  src="https://unpkg.com/@temps-sdk/analytics-browser@0.0.1/dist/temps.min.js"
></script>

Both options send events to the current site's relative /api/_temps/* endpoints by default. For apps deployed on Temps, the proxy handles those endpoints automatically.

How does Temps analytics work

Temps uses two first-party cookies set by the Pingora reverse proxy — _temps_visitor_id (long-lived visitor identifier) and _temps_sid (session identifier) — combined with the JS SDK which also reads/writes visitor ID from localStorage for client-side session continuity. No third-party cookies. In self-hosted mode, analytics data stays on your server. When you enable Temps Cloud, configured analytics and OpenTelemetry data is uploaded to Temps Cloud for managed storage and queries.

Visitor analytics

Track and analyze visitor behavior with detailed metrics and geographic data.

Metrics Tracked

Dashboard Views

Access analytics data via the dashboard. View real-time metrics, historical trends, and detailed visitor insights all in one place.

Time-Series Charts

View trends over time with customizable date ranges:

• Last 24 hours (hourly breakdown)
• Last 7 days (daily breakdown)
• Last 30 days (daily breakdown)
• Last 90 days (weekly breakdown)
• Custom date range

Bot filtering & engagement

Temps filters out automated traffic so your metrics reflect real humans. Bot detection and engagement scoring are built-in and run automatically — there are no flags, environment variables, or endpoints to configure. The thresholds and pattern list below are fixed in source.

How a session counts as "engaged"

A session is marked engaged only if at least one of these is true:

• The visitor spent ≥ 10 seconds of measured wall-clock time on the site (MAX(timestamp) − MIN(timestamp) across the session, or last_accessed_at − started_at for the per-session detail view), or
• The visitor fired a genuine interaction event.

Auto-fired view events do not mark a session engaged on their own, because intersection observers fire them for bots too. The following are excluded from the interaction count:

A session that only fires these view events still becomes engaged if it crosses the 10-second wall-clock threshold — that's the only way such a session counts.

Session replays exclude zero-duration sessions

Replay listings (both the count and the list) only include sessions whose recorded duration is greater than 0 ms. Sessions with a duration of 0 ms or NULL — never-finalized single-burst sessions, which are typically bots — are excluded, because they have nothing to play back.

User-agent bot detection

The events pipeline matches each visitor's user-agent string (case-insensitively, by substring) against a built-in list of 30+ known bot patterns. A match sets the event/visitor is_crawler flag and records the matched crawler_name. A missing or empty user-agent is also treated as a bot — real browsers always send one.

The pattern list covers:

This list is matched in addition to the underlying parser's own crawler classification; the substring match is the more specific signal and takes precedence.

Event tracking

Track custom events to understand user interactions and behavior.

Built-in Events

Temps automatically tracks:

• Page views
• Page exits
• Link clicks (external)
• Form submissions
• File downloads
• 404 errors
• JavaScript errors

Custom Events

Track any custom event in your application:

import { useTrackEvent } from '@temps-sdk/react-analytics';

function CheckoutButton() {
  const trackEvent = useTrackEvent();

  const handleCheckout = () => {
    trackEvent('checkout_completed', {
      orderId: '12345',
      amount: 99.99,
      currency: 'USD',
      items: 3
    });
  };

  return <button onClick={handleCheckout}>Complete Purchase</button>;
}

Event Properties

Querying Events

Query and filter events in the dashboard or via API:

// Filter events in dashboard
{
  "event": "purchase_completed",
  "dateRange": "last_30_days",
  "filters": {
    "properties.amount": { "gte": 100 },
    "properties.currency": "USD"
  },
  "groupBy": "properties.plan"
}

Session replay

Record and replay user sessions to understand how users interact with your application.

Features

Privacy Controls

import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

function App() {
  return (
    <TempsAnalyticsProvider
      enableSessionRecording={true}
      sessionRecordingConfig={{
        sessionSampleRate: 0.1, // Record 10% of sessions
        maskAllInputs: false,
        blockClass: 'sensitive-data',
        maskTextSelector: 'input[type="password"], input[type="email"]'
      }}
    >
      <YourApp />
    </TempsAnalyticsProvider>
  );
}

Replay Player

The replay player includes:

• Playback controls (play, pause, speed adjustment)
• Timeline scrubber
• Event markers (clicks, navigation, errors)
• Console panel
• Network panel
• Device viewport emulation

Performance monitoring

Track Core Web Vitals and performance metrics to optimize user experience.

Core Web Vitals

Automatic Collection

Performance metrics are automatically collected when you use the Temps SDK:

import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

function App() {
  return (
    <TempsAnalyticsProvider
      autoTrackSpeedAnalytics={true}
    >
      <YourApp />
    </TempsAnalyticsProvider>
  );
}

Performance Insights

View performance trends in the dashboard:

• Historical performance scores (Lighthouse-style)
• Performance by page/route
• Performance by device/browser
• Performance by geography
• Percentile distributions (P50, P75, P95, P99)

Performance Budgets

Set performance budgets and get alerts when exceeded:

// Configure performance budgets
{
  "budgets": {
    "LCP": { "target": 2500, "alert": 4000 },
    "INP": { "target": 200, "alert": 500 },
    "CLS": { "target": 0.1, "alert": 0.25 }
  },
  "notifications": {
    "email": "devteam@example.com",
    "slack": "https://hooks.slack.com/..."
  }
}

Funnel analysis

Track multi-step conversion funnels to optimize user flows.

Create a Funnel

Define a sequence of events that represent a user journey:

// Create funnel via dashboard
{
  "name": "Signup Funnel",
  "steps": [
    {
      "name": "Landing Page View",
      "event": "pageview",
      "filters": { "path": "/" }
    },
    {
      "name": "Signup Page View",
      "event": "pageview",
      "filters": { "path": "/signup" }
    },
    {
      "name": "Form Submitted",
      "event": "signup_form_submit"
    },
    {
      "name": "Email Verified",
      "event": "email_verified"
    },
    {
      "name": "Onboarding Completed",
      "event": "onboarding_complete"
    }
  ],
  "timeWindow": "24h" // Max time between steps
}

Funnel Metrics

Funnel Visualization

The dashboard provides:

• Visual funnel chart with drop-off indicators
• Step-by-step conversion rates
• Time-to-convert distribution
• User segmentation (device, location, traffic source)
• Historical trends

AI agent tracking

Temps automatically detects and classifies AI crawler traffic from agents like ChatGPT, Claude, Perplexity, Googlebot, and 30+ others — no configuration required.

Via CLI

# Which AI agents are hitting your site?
bunx @temps-sdk/cli analytics ai-agents -p my-app --period 7d

# Grouped by AI provider (OpenAI, Anthropic, Google…)
bunx @temps-sdk/cli analytics ai-agents -p my-app --group-by provider

# Which pages do AI crawlers visit most?
bunx @temps-sdk/cli analytics ai-pages -p my-app --period 30d

# Show which agents crawl each page
bunx @temps-sdk/cli analytics ai-pages -p my-app --with-agents

Via REST API

# AI agent breakdown
curl https://your-temps.example.com/api/projects/{project_id}/analytics/ai-agents \
  -H "Authorization: Bearer <token>" \
  -G --data-urlencode "start_time=2025-01-01T00:00:00Z" \
      --data-urlencode "end_time=2025-01-08T00:00:00Z"

# Pages crawled by AI
curl https://your-temps.example.com/api/projects/{project_id}/analytics/ai-pages \
  -H "Authorization: Bearer <token>"

View all dimension data

The overview dashboard shows the top 5 or 10 rows for each chart. To see the full dataset, click the View all button in any chart header.

Dimension pages

Each chart's "View all" button opens a dedicated dimension page at /projects/:slug/analytics/dimensions/:dimension. These pages:

• Show up to 100 rows for the selected dimension and date range
• Include an inline text filter for client-side narrowing — useful when a dimension has many distinct values
• Preserve the currently selected date filter, so navigating to a dimension page and back does not reset your time range

The following dimensions have dedicated pages:

Event detail

Rows in the events dimension link through to the event detail view. The event detail page now shows:

• A first → last timestamp range for that event across all visitors in the selected period
• Per-visitor columns: visitor UUID, numeric visitor ID, device, browser, location, and referrer

Visitor segments

Clicking any row in a non-page dimension chart — for example "Chrome" in Browsers, "United States" in Countries, an event name, a UTM campaign value, or a referrer — opens a visitor segment page.

Segment pages

Segment pages are located at /projects/:slug/analytics/segments/:dimension/:value and show a paginated list of visitors who match that dimension value within the selected date range:

• 25 visitors per page, sorted by last action descending
• Each row links to the individual visitor detail page, where you can see the visitor's full session history, device information, and event timeline
• The active date filter is carried through the entire navigation chain: overview → dimension page → segment → visitor detail → back

Supported segment filters

The segment visitor list is powered by the /analytics/visitors endpoint, which accepts the following filter parameters:

SDKs

Track events from your frontend and enrich visitor records from your backend using the official SDKs.

Privacy & Compliance

Temps analytics is designed with privacy in mind and complies with GDPR, CCPA, and other regulations.

Data Ownership

GDPR Compliance

import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

function App() {
  const [consent, setConsent] = useState(false);

  return (
    <TempsAnalyticsProvider
      disabled={!consent} // Only track if user consents
    >
      <CookieBanner onAccept={() => setConsent(true)} />
      <YourApp />
    </TempsAnalyticsProvider>
  );
}

Compliance Features

Additional Resources