Mit einem Live-Abonnement-Dashboard behalten Sie den Überblick über wichtige Kennzahlen wie monatlichen Umsatz, Neukunden oder Kündigungsraten – doch wie lässt sich ein solches Tool ohne großen Aufwand realisieren? Viele Entwickler nutzen die integrierten Dashboards von Abrechnungsplattformen wie RevenueCat, stoßen dabei aber schnell an Grenzen: Diese Tools sind nicht anpassbar, lassen sich nicht in interne Systeme einbetten oder erlauben keine flexiblen Datenfilter. Die Lösung bietet die RevenueCat Charts API, die zwar leistungsstark, aber in der Praxis noch wenig verbreitet ist. Ein Entwickler zeigt, wie sich damit ein voll funktionsfähiges Dashboard in nur einer HTML-Datei umsetzen lässt – ohne Build-Systeme, npm oder aufwendige Deployments.
Was die Charts API leistet: Funktionen und Endpunkte im Überblick
Die Charts API von RevenueCat ist Teil der v2 REST-API und bietet drei zentrale Endpunkte, die Entwickler für Abonnement-Analysen nutzen können. Der erste Endpunkt /metrics/overview liefert eine Momentaufnahme der wichtigsten Kennzahlen wie monatlicher Umsatz (MRR), aktive Abonnements, Neukunden oder Kündigungsraten. Für detaillierte Zeitreihenanalysen stehen Endpunkte wie /charts/{chart_name} zur Verfügung, die spezifische Metriken wie Umsatztrends, Neukundenentwicklung oder die Konversionsrate von Testversionen in zahlende Kunden zurückgeben. Ein dritter Endpunkt, /charts/{chart_name}/options, ermöglicht es, verfügbare Filter- und Segmentierungsoptionen abzufragen – etwa nach Plattform oder Zeitraum.
Die Charts API unterstützt flexible Abfrageparameter wie resolution (Tages-, Wochen- oder Monatsdaten), start_time und end_time, um Daten gezielt zu analysieren. Die verfügbaren Chart-Namen umfassen unter anderem revenue (Umsatz pro Zeitraum in Cent), active_subscriptions (Anzahl aktiver Abonnements über die Zeit) oder mrr (monatlicher wiederkehrender Umsatz). Diese Struktur ermöglicht es, Daten nach eigenen Bedürfnissen zu visualisieren – sei es in einem internen Tool, einer Slack-Benachrichtigung oder einem Notion-Dashboard.
Architektur des Dashboards: So funktioniert die Datenabfrage
Ein zentrales Problem bei der Nutzung von APIs wie RevenueCat direkt aus dem Browser ist die CORS-Richtlinie (Cross-Origin Resource Sharing). Secret Keys, die für den Zugriff auf die Charts API erforderlich sind, sollten niemals im Client-Code landen. Die Lösung besteht in einem serverseitigen Proxy, der die Authentifizierung übernimmt und die Daten sicher an den Browser übermittelt.
Die Architektur des Dashboards folgt diesem Prinzip: Der Nutzer gibt in der HTML-Datei seine Projekt-ID und den gewünschten Zeitraum ein. Die Anfrage wird an einen Netlify Function-Proxy gesendet, der die Authentifizierung mit dem RevenueCat-API-Key übernimmt – dieser wird aus einer Umgebungsvariable ausgelesen und nie an den Client übermittelt. Der Proxy leitet die Anfrage weiter, erhält die JSON-Antwort von RevenueCat und gibt diese zurück an das Dashboard. Dort werden die Daten in KPI-Karten und Balkendiagrammen visualisiert.
Diese Struktur vermeidet nicht nur CORS-Fehler, sondern ermöglicht auch eine saubere Trennung von Frontend und Backend. Für lokale Tests ohne Proxy kann die API direkt mit einem cURL-Befehl aufgerufen werden, allerdings nur mit einem v2-API-Key und korrekter Authentifizierung.
CORS-Problem: Warum der Fehler kein Bug ist – und wie man ihn löst
Versucht man, die RevenueCat Charts API direkt aus dem Browser aufzurufen, scheitert die Anfrage mit einer Fehlermeldung wie „Failed to fetch“ und dem Hinweis auf fehlende CORS-Header. Dieser Fehler ist kein technischer Defekt, sondern eine bewusste Sicherheitsmaßnahme von RevenueCat. Der Grund: Die Charts API erfordert einen Secret Key mit erweiterten Berechtigungen, der nicht in Client-Code eingebettet werden darf. Ohne CORS-Header wird verhindert, dass unbefugte Quellen auf die API zugreifen.
Die Lösung ist ein serverloser Proxy, der die Authentifizierung übernimmt. Ein Beispiel für eine Netlify Function zeigt, wie einfach die Implementierung ist: Der Proxy liest den API-Key aus einer Umgebungsvariablen, fügt ihn als Bearer-Token in die Header ein und leitet die Anfrage an RevenueCat weiter. Der Browser ruft stattdessen den Proxy auf – das Problem ist umgangen, und die Daten fließen sicher zurück.
Für Entwickler, die das Dashboard ohne Proxy testen möchten, bietet RevenueCat eine klare Anleitung: Mit einem cURL-Befehl und einem gültigen v2-API-Key lässt sich die API direkt aufrufen. Allerdings ist dies nur für lokale Tests geeignet, da der API-Key dabei im Terminal sichtbar wird.
Projekt-ID finden und API-Key korrekt einrichten
Ein häufiger Stolperstein ist die Projekt-ID, die für API-Anfragen benötigt wird. Diese findet man in der URL des RevenueCat-Dashboards: Unter app.revenuecat.com/projects/proj_XXXXXXXXXXXX/apps entspricht der Abschnitt proj_XXXXXXXXXXXX der Projekt-ID. Wichtig ist, dass diese ID projektbezogen ist und nicht app-spezifisch – ein Projekt kann also mehrere Plattformen wie iOS, Android und Web umfassen.
Für den API-Zugriff ist ein v2-API-Key erforderlich, der explizit für die Charts API freigeschaltet ist. Dieser wird im RevenueCat-Dashboard unter „Settings → API Keys → + New“ erstellt, wobei die Option „version set to V2“ und die Berechtigung „charts_metrics:charts:read“ ausgewählt werden muss. Ein häufiger Fehler ist die Verwendung eines v1-Keys, der mit der Charts API nicht kompatibel ist. Zudem muss der API-Key im Proxy oder der Umgebungsvariable korrekt als Bearer-Token angegeben werden – die Angabe des Prefixes „Bearer“ ist zwingend erforderlich, sonst erhält man einen 401-Fehler ohne hilfreiche Fehlermeldung.
Ausblick: Datenanalyse nach Maß mit minimalem Aufwand
Die RevenueCat Charts API eröffnet Entwicklern die Möglichkeit, Abonnement-Daten flexibel zu analysieren und in bestehende Tools zu integrieren – sei es für interne Dashboards, automatisierte Berichte oder Echtzeit-Analysen. Mit der vorgestellten Architektur, die auf einem serverseitigen Proxy basiert, lassen sich CORS-Probleme elegant umgehen und Daten sicher abfragen.
Der große Vorteil liegt in der Einfachheit: Ein Dashboard in einer einzigen HTML-Datei, das ohne npm, Webpack oder andere Build-Tools auskommt, zeigt, wie leistungsstark moderne APIs sein können – wenn man die richtigen Muster kennt. Für Teams, die ihre Abonnement-Analysen professionalisieren möchten, bietet die Charts API eine solide Grundlage, um interne Tools zu erweitern oder externe Dashboards zu speisen. Der nächste Schritt könnte darin bestehen, die Daten mit weiteren Tools wie Google Sheets, Power BI oder sogar KI-gestützten Analysen zu verknüpfen – alles mit minimalem technischen Aufwand.
KI-Zusammenfassung
Learn how to create a live subscription dashboard using RevenueCat’s Charts API. Fetch MRR, churn, and conversion data with a single HTML file and avoid CORS issues with a serverless proxy.
