Tracking Custom Events & Business Conversions

Learn how to record conversions, modal opens, ecommerce transactions, and button interactions using our lightweight browser API or direct server-to-server HTTP calls.

1. Client-Side Browser API (`window.OpenAnalytics.track`)

Once the open.js tracker is embedded on your page, it registers the global window.OpenAnalytics object. You can dispatch custom events with arbitrary JSON metadata properties.

// Basic event dispatch

window.OpenAnalytics.track("newsletter_subscribed");

// Event with custom metadata payload

window.OpenAnalytics.track("plan_selected", {

plan: "pro",

billing: "annual",

source: "pricing_table"

});

2. TypeScript Safe Utility Wrapper

Because the tracker loads asynchronously (deferred), we recommend defining a typed helper function to prevent undefined errors during server-side rendering or before the tracker executes.

// lib/analytics.ts
export function trackEvent(name: string, props?: Record<string, string | number | boolean>) {
  if (typeof window !== "undefined" && (window as any).OpenAnalytics) {
    (window as any).OpenAnalytics.track(name, props);
  }
}

3. E-commerce & SaaS Conversion Patterns

E-commerce Purchase

trackEvent("checkout_completed", {
  order_id: "ord_91823",
  currency: "USD",
  revenue: 129.00,
  items_count: 2
});

SaaS Trial Signup

trackEvent("trial_started", {
  tier: "enterprise",
  seats_requested: 5,
  invite_code: "LAUNCH2026"
});

4. Server-Side HTTP Ingestion

To record events from Stripe webhooks, mobile apps, or backend workers where client-side JavaScript is unavailable, send a POST request directly to our edge telemetry endpoint:

curl -X POST "https://api.openanalytics.org.in/v1/collect" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "custom",
    "projectId": "prj_your_project_id",
    "name": "subscription_renewed",
    "props": {
      "plan": "pro_annual",
      "amount": 180.00
    }
  }'

5. Verifying Your Events in Real Time

Once an event is triggered, it appears within sub-2-seconds on your dashboard. Open your Live Telemetry Feed (`/live-feed`) to inspect the incoming payload and ensure custom properties are formatted properly.

Next: Ingestion REST API Inspect Events in Console →