Blog

Plan vs. Ist direkt in HubSpot: Vertriebssteuerung mit UI Extensions, n8n und BI-Daten

Wie wir Planzahlen, Saisonalität und BI-Daten in einer HubSpot UI Extension zusammengeführt haben. Mit n8n, React und echten Umsatzdaten aus Qlik.

Joshua Kresse
Joshua Kresse
Founder · Pipewave

Plan vs. Ist direkt in HubSpot: Vertriebssteuerung mit UI Extensions, n8n und BI-Daten

Planzahlen in Excel. Umsätze im BI-Tool. CRM-Daten in HubSpot. Und der Vertriebsleiter, der am Ende drei Tabs offen hat, um zu verstehen, ob ein Kunde im Plan liegt.

So sah die Realität bei einem unserer Kunden aus, einem mittelständischen Unternehmen im Holzhandel mit externem Vertrieb und einem Händlernetzwerk als Kundenstamm. Die Vertriebler hatten für 2026 saubere Planzahlen pro Händler geliefert. Die IST-Umsätze lagen in Qlik vor. Aber zusammengeführt wurde das nirgends. Schon gar nicht dort, wo der Vertrieb tatsächlich arbeitet: im CRM.

Die Frage war einfach: Kann man Plan vs. Ist direkt in HubSpot sichtbar machen? Pro Kunde, pro Monat, mit Saisonalität?

Die Antwort: Ja. Mit einer HubSpot UI Extension, einem n8n-Workflow und ein bisschen Mathematik.


Die Ausgangslage

Das Unternehmen verkauft nicht direkt an Endkunden, sondern arbeitet mit Händlern zusammen. Jeder Händler hat einen zuständigen Außendienstmitarbeiter, der Planzahlen für das kommende Jahr liefert: "Händler X soll 2026 insgesamt 120.000 € Umsatz machen."

Diese Planzahlen lebten bisher in Excel-Listen. Die tatsächlichen Umsätze wurden in Qlik (BI-Tool) ausgewertet. Ein Abgleich passierte, wenn überhaupt, quartalsweise und manuell.

Die Probleme:

  • Kein Echtzeit-Überblick, ob ein Händler im Plan liegt
  • Saisonalität wird ignoriert. Ein Händler mit 60.000 € Umsatz im Juni kann trotzdem im Plan sein, auch wenn das Jahresziel 120.000 € beträgt
  • Vertriebler müssen zwischen drei Tools springen
  • Plan-Ist-Abweichungen fallen zu spät auf

Die Idee: Alles dort zeigen, wo der Vertrieb arbeitet

Statt ein weiteres Dashboard in einem weiteren Tool zu bauen, war der Ansatz: Die Planzahlen und IST-Umsätze direkt in HubSpot zusammenführen. Auf der Unternehmensseite jedes Händlers, als Custom Card, die der Vertriebler sofort sieht.

Dafür brauchten wir vier Bausteine:

  1. Planzahlen in HubSpot, als Custom Properties am Unternehmen
  2. Saisonalitätsverteilung, damit die Monatsziele realistisch sind
  3. IST-Umsätze automatisch aus Qlik, per n8n-Workflow
  4. Eine UI Extension, die alles visuell zusammenführt

Schritt 1: Planzahlen importieren

Die Vertriebler lieferten ihre Jahresplanzahlen pro Händler als Excel-Datei. Diese wurden als Custom Property planzahl_2026 am jeweiligen Unternehmensobjekt in HubSpot importiert.

Klingt simpel. Ist es auch. Die Planzahl wird einmal pro Jahr gesetzt und dient als Referenzwert für alles Weitere. Kein laufender Sync nötig, ein einmaliger Import reicht.


Schritt 2: Saisonalität berechnen

Das Jahresziel einfach durch 12 zu teilen wäre falsch. Im Holzhandel gibt es massive saisonale Schwankungen. Im Januar wird deutlich mehr umgesetzt als im Dezember.

Aus den historischen Umsatzdaten in Qlik habe ich die durchschnittliche monatliche Verteilung des Jahresumsatzes berechnet. Das ergibt einen Saisonalitätsfaktor pro Monat:

MonatAnteil am JahresumsatzFaktor
Januar13,0 %0.130
Februar8,4 %0.084
März9,0 %0.090
April10,0 %0.100
Mai11,2 %0.112
Juni11,8 %0.118
Juli11,0 %0.110
August7,2 %0.072
September6,8 %0.068
Oktober5,1 %0.051
November4,3 %0.043
Dezember2,2 %0.022

Hinweis: Die Faktoren in diesem Artikel sind vereinfacht dargestellt.

Die Berechnung des SOLL-Umsatzes pro Monat:

SOLL_monat = Planzahl_Jahr × Saisonalitätsfaktor_monat

Beispiel: Ein Händler mit 1.000.000 € Jahresziel hat im Januar ein SOLL von 130.000 €, im Dezember nur 22.000 €. Ohne Saisonalität hätte man linear 83.333 € pro Monat angesetzt und wäre im Januar begeistert und im Dezember panisch. Beides grundlos.


Schritt 3: IST-Umsätze automatisch aus Qlik nach HubSpot

Die tatsächlichen Monatsumsätze pro Händler liegen in Qlik vor. Damit HubSpot immer aktuelle Daten hat, läuft ein n8n-Workflow, der die Daten automatisch synchronisiert.

So funktioniert der Workflow:

  1. Qlik API → Umsatzdaten abrufen
  2. n8n → Daten pro Unternehmen zuordnen
  3. HubSpot → Custom Properties aktualisieren (umsatz_jan, umsatz_feb, ...)

Der Workflow läuft regelmäßig und aktualisiert die monatlichen IST-Umsätze als Custom Properties am Unternehmen in HubSpot. So hat jedes Unternehmen zwei Datensätze:

  • SOLL: planzahl_2026 + Saisonalitätsfaktoren → berechnetes Monatsziel
  • IST: umsatz_jan_2026, umsatz_feb_2026, ... → tatsächliche Monatswerte

Schritt 4: Die UI Extension

Der sichtbare Teil: eine HubSpot UI Extension, gebaut mit React im offiziellen HubSpot Developer Framework. Die Extension erscheint als Custom Card direkt auf der Unternehmensseite in HubSpot.

Was die Extension zeigt:

  • Jahresübersicht: SOLL (Planzahl), IST (kumulierter Umsatz), Delta und Erfüllungsgrad in Prozent
  • Fortschrittsbalken: Visuelle Gesamterfüllung
  • Monatsansicht: Aktueller Monat mit Plan YTD, Plan Rest und Erfüllung YTD
  • Chart: Plan vs. Ist pro Monat als Balkendiagramm mit saisonbereinigten Zielwerten

Vereinfachtes Code-Beispiel, Saisonalitätsberechnung in der Extension:

// Saisonalitätsfaktoren (vereinfacht)
const SEASONAL_FACTORS = [
  0.130, 0.084, 0.090, 0.100, 0.112, 0.118,
  0.110, 0.072, 0.068, 0.051, 0.043, 0.022
];
 
// Monatliches SOLL berechnen
const getMonthlyTarget = (yearlyPlan, monthIndex) => {
  return yearlyPlan * SEASONAL_FACTORS[monthIndex];
};
 
// YTD-SOLL berechnen (kumuliert bis zum aktuellen Monat)
const getYtdTarget = (yearlyPlan, currentMonth) => {
  return SEASONAL_FACTORS
    .slice(0, currentMonth + 1)
    .reduce((sum, factor) => sum + yearlyPlan * factor, 0);
};
 
// Beispiel: 1.000.000 € Jahresziel
getMonthlyTarget(1000000, 0);  // Januar: 130.000 €
getYtdTarget(1000000, 1);      // Bis Feb: 214.000 €

Vereinfachtes Code-Beispiel, CRM-Daten in der Extension laden:

// Properties vom Unternehmen laden
const properties = [
  'planzahl_2026',
  'umsatz_jan_2026', 'umsatz_feb_2026', // ...
];
 
// In der Extension
const yearlyPlan = company.properties.planzahl_2026;
const actualRevenue = getYtdRevenue(company.properties);
const fulfillment = (actualRevenue / getYtdTarget(yearlyPlan, currentMonth)) * 100;

Die Code-Beispiele sind vereinfacht und zeigen das Grundprinzip. Die produktive Extension enthält zusätzlich Fehlerbehandlung, Ladeanimationen und Formatierungslogik.


Das Ergebnis

Der Vertriebsleiter öffnet ein Unternehmen in HubSpot und sieht sofort:

  • Liegt der Händler im Plan? Erfüllungsgrad als Prozentwert und Fortschrittsbalken
  • Wie verteilt sich das über das Jahr? Monatliches Balkendiagramm mit saisonbereinigten Zielen
  • Wo stehen wir YTD? Kumulierter Vergleich, nicht nur der aktuelle Monat

Kein Tab-Wechsel zu Qlik. Kein Excel öffnen. Kein Quartals-Meeting abwarten.

Ein Beispiel aus dem Projekt:

  • Jahresplan: 1.000.000 €
  • IST-Umsatz: 1.173.700 €
  • Erfüllung: 117,4 %, der Händler liegt über Plan
  • Der Vertriebler sieht das, sobald er den Kontakt öffnet

Der Tech Stack

KomponenteRolle
HubSpot CRMZentrale Datenhaltung (Planzahlen + IST-Umsätze als Custom Properties)
HubSpot UI Extension (React)Visuelle Darstellung als Custom Card auf der Unternehmensseite
n8nAutomatisierter Sync der IST-Umsätze aus Qlik nach HubSpot
QlikBI-Tool als Datenquelle für tatsächliche Umsätze

Warum das funktioniert

Das Problem kennen viele B2B-Unternehmen mit indirektem Vertrieb: Planzahlen und Realität leben in verschiedenen Systemen. Abweichungen werden zu spät erkannt, Vertriebler verlieren den Überblick, und das CRM bleibt ein Kontaktverzeichnis statt Steuerungsinstrument.

Mit einer UI Extension, n8n als Daten-Pipeline und saisonbereinigter Planzahlberechnung wird der Plan-Ist-Vergleich direkt dort sichtbar, wo der Vertrieb arbeitet: im CRM.

Die Lösung funktioniert bereits mit HubSpot Free CRM. Für die UI Extension braucht man lediglich einen HubSpot Developer Account.


Du willst etwas Ähnliches umsetzen?

Wenn dein Vertriebsteam heute zwischen drei Tools springt, um eine einfache Frage zu beantworten, lass uns sprechen.

→ Kostenloses Erstgespräch buchen


Geschrieben von Joshua Kresse – Gründer von Pipewave. Ich baue Automatisierungen und Integrationen für B2B-Unternehmen, die HubSpot als CRM nutzen.