Getting started

From a Google sign-in to your first event, in about ten minutes.

SaaS Pro Max is a hosted service for application analytics and monitoring. Your applications send events to one endpoint, and you view and export them from one console. An organization owns applications; each application has three environments (production, staging, development), its own public and secret keys, and its own set of enabled modules.

1. Sign in#

Open /login and sign in with Google, then enrol a passkey — every console user needs one, on every sign-in, not just the first. A first-time visitor gets a workspace named with your first name followed by 's workspace (or My workspace if no name is available) and an application named My first app. Team members join through Organization → Members.

If you were invited to an existing organization, the invite link takes you through the same flow and opens that organization.

Passkeys across devices#

A passkey can be synced by your password manager or stored on one device or security key. Google sign-in to this console does not enable passkey sync. To use a synced passkey elsewhere, unlock the same password manager account on a compatible device. The console stores only the passkey's public credential, never the private part.

In Account and security → Passkeys, choose Add a passkey. Verify an existing passkey if prompted, then name your new passkey and choose where to save it. Select A nearby phone or tablet to ask the browser to offer phone registration, or A security key for a compatible key that supports FIDO2 (the authentication standard used by security keys) and user verification. Your browser controls the available choices. For a phone, keep both devices nearby with Bluetooth enabled and scan the browser's QR code with the phone camera. This creates a new credential on the phone; it does not copy a device-bound laptop credential.

When signing in elsewhere, use your synced password manager or select another device/security key in the browser prompt. A phone with an existing passkey can approve a sign-in on a supported nearby device. A computer-only passkey may not support this option. See Apple's passkey overview and Google's platform support.

Keep a backup credential independent of your main password manager and test it from another browser/device before deleting anything. Rename passkeys in Account to recognize them. Removing a passkey disables all its synced copies, but does not sign out active sessions; revoke sessions separately if a device is lost. The last registered passkey cannot be removed. Reported backup status does not prove that a particular device has a usable copy.

If you lose access, open Passkey help from the sign-in screen. Try your synced provider, a nearby phone or a spare security key, then your provider's own recovery process. There is no self-service reset when every passkey and provider backup is lost. Organization owners cannot reset a global user account's passkeys, and Google alone cannot authorize a replacement.

2. Your organization#

A new account already has one. Skip this if you were invited into someone else's.

To add another, go to /o/new, give the organization a name and a slug (a short, URL-safe identifier). The slug appears in every console URL (/o/<org>/…) and cannot be changed later. You become its owner, which carries every permission including permission to delete the organization.

Members are invited from Organization → Members with one of the seeded roles — owner, admin, developer, analyst, support, marketing, viewer — or a custom role you compose from the permission list.

3. Open your application#

On the organization page (/o/<org>), open My first app. You do not need to create another application. You can rename it and set its details in Settings.

Prefer working from Claude or a coding agent? Open Connect your coding agent to connect the published Claude connector or another Model Context Protocol (MCP) client. You can ask for your applications, explore reports and make supported changes with your existing permissions. Connecting is optional and remains available under Account → Coding agents and MCP. A coding agent can also help add the tracking code; the application still needs to send events before its reports contain data.

If your plan allows additional applications, use the New application panel on the organization page. These are the application details:

Production, staging and development environments are created for you. Every event, key and dashboard is scoped to one of them, and the environment selector in the top bar decides which one you are looking at.

On the free plan that first application is the only one, and it comes with 10,000 events a month across all three environments, two members including pending invitations, 30 days of retention, and the analytics, errors, metrics, flags and Pilot (the AI assistant) modules. Event acceptance stops at 100% of the quota rather than billing you for the overage, and the console warns at 80% first. Organization → Plan and usage (/o/<org>/billing) shows your monthly usage and lets you change plans. The pricing page lists the plans and event limits.

4. Create a public or secret key#

Open Settings → API keys (/o/<org>/apps/<app>/settings/keys), pick an environment and create a key.

The full value is shown once, at creation. Only a prefix, the last four characters and a SHA-256 hash (a one-way value used to verify the key) are stored, so a lost key is revoked and replaced, never recovered.

If your site is served from a fixed set of origins, list them under Settings → Data collection; ingest then rejects browser events from anywhere else.

5. Add the tracking code#

Use the script tag for the simplest setup, with no build step. The SDK (software development kit) packages below provide tracking code for React and Node.js applications:

<script defer src="https://saaspro.dev/spm.js" data-key="spm_pub_prod_xxxxxxxx"></script>

That starts a session, sends a $pageview, follows client-side route changes, captures uncaught errors and web vitals, and exposes window.spm. See script tag for every data- attribute.

React and Next.js:

npm install @saaspro/react

import { SaaSProMaxProvider } from "@saaspro/react";
import { SPMPageview } from "@saaspro/react/next";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <SaaSProMaxProvider config={{ key: process.env.NEXT_PUBLIC_SPM_KEY! }}>
      <SPMPageview />
      {children}
    </SaaSProMaxProvider>
  );
}

Your server, worker or command-line application:

npm install @saaspro/node

import { SaaSProMax } from "@saaspro/node";

const spm = new SaaSProMax({ secretKey: process.env.SPM_SECRET_KEY! });

spm.track({ distinctId: "user_123", event: "subscription started", value: 49, currency: "EUR" });
await spm.flush();

Full references: browser, react, node, and the recipes for Next.js, Vite, plain HTML, Express and Hono.

6. Watch the events arrive#

Open Analytics → Live (/o/<org>/apps/<app>/analytics/live) and load a page in your application. A visitor appears within a couple of seconds.

Nothing showing up? In order:

1. Check the key's environment matches the environment selector.
2. Check the browser network tab for a 202 from /api/v1/ingest.
3. Turn on debug: true (or data-debug) and watch the browser console — every queued event and every request is logged.
4. Check Settings → Data collection if you have restricted allowed origins.

The Events page (/o/<org>/apps/<app>/events) is the raw feed: every event name, its properties, and the person and session it belongs to.

7. Turn modules on#

Settings → Modules (/o/<org>/apps/<app>/settings/modules) decides which dashboards are enabled for this application, within your plan limits. Free applications have analytics, errors, metrics, flags and Pilot enabled. Paid applications can also use People, which is part of the default module settings. Other modules can be enabled when your plan includes them.

When you disable a module, its navigation entry disappears and its page explains that it is disabled. Modules outside your plan show the plan required to use them.

Settings → Navigation (/o/<org>/apps/<app>/settings/navigation) controls sidebar visibility: clear an entry and it leaves the sidebar for everyone in the organization, while the page stays enabled and reachable from More at the bottom of the sidebar and from search. Changing it needs permission to edit application settings and is recorded in the audit log.

Public reports live under Settings → Public sharing. Overview and each funnel are separate switches, off by default. A published report is available at /s/<slug> and as an embed at /embed/<slug>. Only summary totals are published; individual event and person records are excluded.

8. Connect an agent#

Everything the console can read, an agent can read — through the same permission-filtered query layer, never raw SQL.

Create an access token first: Account → Personal access tokens for one that acts as you, or Organization → Tokens for one that carries the developer role. Scopes are read, write and admin; choose the scope with only the permissions the agent needs.

Then point the MCP server at your instance:

{
  "mcpServers": {
    "saaspromax": {
      "command": "npx",
      "args": ["-y", "@saaspro/mcp"],
      "env": { "SPM_TOKEN": "spm_pat_xxxxxxxx", "SPM_HOST": "https://saaspro.dev" }
    }
  }
}

That gives Claude Code, Claude Desktop or Cursor tools for analytics, people, errors, metrics, flags, revenue and the assistant — plus your documentation as resources and three prompts (integrate_app, weekly_report, investigate_error). See MCP server for the full tool list and what each scope unlocks.

For an agent that writes code rather than answers questions, install the agent skills: saaspromax-integrate guides you through adding tracking code, and saaspromax-analyze helps query and interpret your application data.

9. Automate with the Management API#

The same token is a bearer credential for /api/v1:

curl -H "authorization: Bearer $SPM_TOKEN" \
  "https://saaspro.dev/api/v1/apps/<org>/<app>/analytics/overview?range=7d"

Applications, keys, events, people, errors, metrics, monitors, alerts, flags, funnels, revenue and destinations are all reachable, {app} is either an application id or orgSlug/appSlug, and every list answers { data, nextCursor }. The full reference is in the Management API, and the machine-readable contract is openapi.json, also served live at /api/v1/openapi.json.

Where to go next#

• SDK overview — which package for which runtime, and the event format every one of them sends.
• Connector — read and act on your own application's users from the console without sharing a database.
• Management API — every endpoint, with scopes and cursors.
• MCP server and agent skills — the agent surface.
• Charts — the chart primitives the console renders, if you are extending it.