PennyLens

Event Tracking

PennyLens captures common user interactions automatically, and exposes a small API for custom events.

Auto-tracked events

Once the SDK loads, PennyLens captures the following without any configuration:

  • Pageviews — URL changes, including SPA route transitions
  • Clicks — element path, text, page coordinates (for heatmaps)
  • Scroll depth — per-page scroll % bucketed by viewport
  • Mouse movement — density for attention heatmaps
  • Form interactions — focus, completion, abandonment, submission
  • Errors — uncaught JavaScript errors and rejected promises

Custom events

Track business-specific actions:

PennyLens.track("checkout_started", {
  cart_value: 89.99,
  item_count: 3,
});

Event names should be lowercase with underscores. Properties are optional and can be any JSON-serializable value.

User identification

PennyLens.identify("user-123", {
  email: "user@example.com",
  plan: "pro",
});

identify() is accepted by the SDK today, but it's currently a client-side, in-memory call — the ID and traits aren't yet transmitted to PennyLens or attached to events. See User identification for what works today instead (reserved SaaS lifecycle events, order-webhook identity for e-commerce).

Privacy controls

Input masking

By default, all form inputs are masked in session recordings. This is always on and cannot be disabled.

Ignore specific elements

Add data-pl-ignore to exclude any element from recording:

<div data-pl-ignore>
  Sensitive content won't appear in recordings
</div>

Consent mode

If you need opt-in tracking (GDPR/CCPA), pass consentRequired: true to init() — no events are sent until the user accepts:

PennyLens.init({
  projectId: "YOUR_API_KEY", // your API key from Settings, not the project id
  consentRequired: true,
});

// After the user accepts your consent banner:
PennyLens.consent();

Next steps