E-Mail-Marketing

Uebersicht

Das E-Mail-Marketing-System in TanStack Ship ermoeglicht das Erstellen, Senden und Verfolgen von HTML-E-Mail-Kampagnen an Ihre Benutzerbasis. Angetrieben von Resend fuer zuverlaessige Zustellung und Cloudflare Queues fuer asynchrone Verarbeitung, unterstuetzt es sowohl Broadcast-Marketing-E-Mails als auch transaktionale Kommunikation.

Als Teil der TanStack Ship Plattform integriert sich das E-Mail-Modul in das Abrechnungssystem fuer Zahlungsbelege, das Einladungssystem fuer Benutzer-Onboarding und das Analyse-Dashboard fuer Kampagnenleistungsverfolgung.

Design-Ablauf

Das E-Mail-Marketing-System orchestriert die gesamte Kampagnenzustellungspipeline von der Inhaltserstellung ueber die warteschlangenbasierte Zustellung bis zur Lieferverfolgung:

Kernfunktionen

Kampagnenerstellung & -verwaltung

Die Admin-Oberflaeche fuer E-Mail-Kampagnen (/dashboard/admin/email-campaigns) bietet:

• Rich-HTML-Editor — Erstellen Sie E-Mails mit einem visuellen Editor oder rohem HTML
• Betreffzeile & Vorschautext — Anpassbare Betreff- und Preheader-Texte
• Absenderkonfiguration — Absendername und E-Mail-Adresse
• Empfaengerauswahl — Alle Benutzer oder segmentierte Gruppen
• Zeitplanung — Sofort senden oder fuer ein bestimmtes Datum/Uhrzeit planen

Warteschlangenbasierte asynchrone Zustellung

E-Mails werden asynchron ueber Cloudflare Queues gesendet fuer Zuverlaessigkeit und Leistung:

1. Kampagne wird in der Datenbank mit dem Status DRAFT erstellt
2. Administrator zeigt Vorschau an und sendet die Kampagne
3. Empfaenger werden als einzelne Nachrichten in die Warteschlange eingereiht
4. Queue-Consumer verarbeitet jede Nachricht mit Wiederholungslogik
5. Zustellungsstatus wird nach jedem erfolgreichen oder fehlgeschlagenen Senden aktualisiert

Diese Architektur verhindert API-Zeitueberschreitungen und stellt sicher, dass die Zustellung auch bei fehlgeschlagener erster Anfrage abgeschlossen wird.

Transaktions-E-Mails

Ueber Marketingkampagnen hinaus verarbeitet das System automatisierte transaktionale E-Mails:

• Zahlungsbestaetigungen und digitale Belege
• Kontoverifizierung und Passwort-Zuruecksetzungs-Links
• Einladungsbenachrichtigungen
• Rechnungswarnungen, Abonnement-Updates und Zahlungsfehlermeldungen

Transaktions-E-Mails werden durch serverseitige Ereignisse ausgeloest und ueber dieselbe Resend-Integration gesendet.

Clientseitiges E-Mail-Kampagnenlisten-Beispiel:

import { useQuery } from '@tanstack/react-query'

export function CampaignList() {
  const { data } = useQuery({
    queryKey: ['email-campaigns'],
    queryFn: () =>
      fetch('/api/email-campaigns').then((r) => r.json()) as Promise<
        Array<{
          id: string
          subject: string
          status: string
          sentCount: number
          openRate: number
          createdAt: string
        }>
      >,
  })

  return (
    <div className="rounded-lg border divide-y">
      {data?.map((c) => (
        <div key={c.id} className="flex items-center justify-between p-4">
          <div>
            <p className="font-medium">{c.subject}</p>
            <p className="text-xs text-muted-foreground">
              {c.status} · {c.sentCount} gesendet · {c.openRate}% geoeffnet
            </p>
          </div>
        </div>
      ))}
    </div>
  )
}

Design-Philosophie

Standardmaessig asynchrone Zustellung

Alle E-Mail-Kampagnen werden asynchron ueber Cloudflare Queues gesendet, niemals synchron waehrend HTTP-Anfragen. Wenn ein Admin auf "Senden" klickt, werden die Kampagnenempfaenger sofort als einzelne Nachrichten in die Warteschlange eingereiht und die API kehrt sofort zurueck. Ein Hintergrund-Consumer verarbeitet jede Nachricht mit Wiederholungslogik und aktualisiert den Zustellungsstatus, sobald jeder Sendevorgang abgeschlossen ist. Diese Architektur verhindert HTTP-Zeitueberschreitungen, stellt sicher, dass die Zustellung auch bei temporaerer Nichtverfuegbarkeit der Resend-API abgeschlossen wird, und ermoeglicht dem System die Verarbeitung grosser Kampagnen (Tausende von Empfaengern), ohne Serverressourcen zu blockieren. Im Gegensatz zu den synchronen Sendemodi von Mailchimp oder SendGrid — die die HTTP-Antwort blockieren, bis die Zustellung abgeschlossen ist, und bei grossen Kampagnen zu Zeitueberschreitungen fuehren koennen — entkoppelt unsere warteschlangenbasierte Architektur das Senden vom Anfragelebenszyklus und ermoeglicht zuverlaessige Zustellung in jeder Groessenordnung ohne serverseitige Zeitueberschreitungen.

Zuverlaessigkeit in grossem Massstab

Das warteschlangenbasierte Zustellungssystem implementiert exponentielle Backoff-Wiederholungen fuer fehlgeschlagene Zustellungen und wiederholt automatisch voruebergehende Fehler (Ratenbegrenzungen, Netzwerkzeitueberschreitungen), waehrend dauerhaft fehlgeschlagene Zustellungen schliesslich markiert werden. Diese Zuverlaessigkeitsschicht arbeitet unabhaengig von der Admin-Oberflaeche — Kampagnen werden vollstaendig verarbeitet, selbst wenn der Admin, der sie gesendet hat, seinen Browser schliesst. Der Zustellungsstatus wird pro Empfaenger verfolgt und gibt Administratoren vollstaendige Transparenz ueber die Kampagnenleistung.

Einheitliche Kommunikationspipeline

Transaktions-E-Mails (Belege, Benachrichtigungen, Warnungen) und Marketingkampagnen teilen sich dieselbe Zustellungspipeline — dieselbe Warteschlangeninfrastruktur, dieselbe Resend-Integration, dieselbe Lieferverfolgung. Dieser einheitliche Ansatz reduziert die Betriebskomplexitaet: Es gibt ein Sendesystem zu ueberwachen, eine Reihe von Zustellungsmetriken zu verfolgen und eine Konfiguration (SPF, DKIM, DMARC) zu warten. Transaktions-E-Mails umgehen den Kampagnen-Workflow und werden direkt durch serverseitige Ereignisse ausgeloest.

Best Practices

E-Mail-Design fuer Zustellbarkeit

Verwenden Sie Klartext-Alternativen neben HTML-Inhalten. Halten Sie die HTML-Struktur einfach — vermeiden Sie uebermaessige Bilder und komplexe Layouts, die Spam-Filter ausloesen koennten.

Vor dem Senden segmentieren

Testen Sie Kampagnen immer zuerst an einem kleinen Segment, bevor Sie an alle Benutzer senden. Das System unterstuetzt das Senden an ausgewaehlte Benutzersegmente fuer A/B-Tests.

Ruecklaufquoten ueberwachen

Ueberpruefen Sie regelmaessig die Kampagnenanalyse auf Ruecklaufquoten und Abmeldungen. Hohe Ruecklaufquoten deuten auf Listenhygieneprobleme hin, die behoben werden sollten.

Haeufig gestellte Fragen

Welchen E-Mail-Anbieter verwendet das System? Das System verwendet Resend fuer die E-Mail-Zustellung. Ein Resend-API-Schluessel ist sowohl fuer die Entwicklung als auch fuer die Produktion erforderlich.

Kann ich E-Mails an bestimmte Benutzersegmente senden? Ja. Die Kampagnenerstellungsoberflaeche unterstuetzt die Auswahl aller Benutzer oder bestimmter Benutzersegmente fuer gezielte Kampagnen.

Wie behandelt das System fehlgeschlagene E-Mail-Zustellungen? Der Cloudflare-Queue-Consumer implementiert eine Wiederholungslogik mit exponentiellem Backoff fuer fehlgeschlagene Zustellungen. Nach Erschoepfung der Wiederholungen wird die Zustellung im Kampagnenprotokoll als fehlgeschlagen markiert.

Konfiguration

Die E-Mail-Zustellung erfordert einen Resend-API-Schluessel und eine Absenderkonfiguration in .dev.vars:

RESEND_API_KEY=re_...
RESEND_FROM_EMAIL=updates@yourdomain.com
RESEND_FROM_NAME=Your Product

Fuer die asynchrone E-Mail-Zustellung in der Produktion ist eine Cloudflare-Queue-Konfiguration erforderlich. Der Queue-Consumer wird als Cloudflare Worker bereitgestellt.

Integrationspunkte

• Benutzersystem — Empfaengerliste wird aus Benutzerdatenbankeintraegen mit Segmentierungsunterstuetzung bezogen
• Abrechnung — Transaktions-E-Mails fuer Zahlungsbestaetigungen, Belege und Abonnement-Updates
• Einladungssystem — Einladungsbenachrichtigungen und Willkommens-E-Mails ueber das E-Mail-Kampagnensystem
• Analyse-Dashboard — Verfolgen Sie Oeffnungsraten, Klickraten und Zustellkennzahlen von E-Mail-Kampagnen