Email

Setup

Alles, was Sie konfigurieren müssen, bevor Clerk.io E-Mails in Ihrem Namen versenden kann.

Dieser Leitfaden behandelt die erforderlichen Schritte, bevor Clerk.io E-Mails in deinem Namen versenden kann.

Er gilt für Kampagnen, Flows und automatisierte Trigger wie Abandoned Cart. Wenn du nur personalisierte Produktempfehlungen zu E-Mails hinzufügen möchtest, die von Klaviyo, Mailchimp oder einer anderen Plattform gesendet werden, gehe stattdessen zu Embeds.

Jedes unten stehende Konzept erklärt, wofür es dient, wann du es benötigst und wie du es mit Clerk.js oder der API verwaltest, sofern Code erforderlich ist.

Wähle den richtigen Einrichtungsweg #

Nutze den Abschnitt, der zu deiner Aufgabe passt:

Die Einrichtung ist aufgabenspezifisch. Beispielsweise erfordert Abandoned Cart eine E-Mail-Identifizierung und Warenkorb-Tracking, während eine einmalige Kampagne eine Sender Domain, Abonnenten und ein E-Mail-Design benötigt.

Setup Status #

Der Tab Setup Status bietet eine Live-Übersicht über deine E-Mail-Einrichtung.

Du findest ihn unter Email > Configuration > Setup Status. Er zeigt, ob die erforderlichen Komponenten konfiguriert sind, ob das Tracking funktioniert und ob E-Mails wie erwartet versendet werden.

Jeder Punkt hat einen farbigen Punkt. Grün bedeutet, alles ist in Ordnung, Rot signalisiert, dass etwas fehlt oder defekt ist, und Orange ist eine Warnung, die überprüft werden sollte.

Die Prüfungen sind in drei Bereiche unterteilt:

Konfiguration umfasst die grundlegende Einrichtung. Dazu gehört, ob das Versenden von E-Mails aktiviert ist, welche Sender Domain konfiguriert wurde, wie viele abonnierte Empfänger verfügbar sind und ob aktive Flow-Schritte E-Mail-Designs haben.

On-site Tracking zeigt, ob das Besucherverfolgung aktiv ist. Zudem wird angezeigt, wie viele Besucher oder Warenkörbe in den letzten sieben Tagen mit einer E-Mail-Adresse verknüpft wurden.

Flows & Versand zeigt, ob aktive Flows konfiguriert sind, wie viele Flow-Ereignisse anstehen, wie viele E-Mails kürzlich gesendet wurden und ob die Versandwarteschlange stabil ist.

Starte hier, wenn E-Mails nicht wie erwartet versendet werden. Es ist das, was einer E-Mail-Einrichtungs-Dashboard am nächsten kommt.

Sender Domain #

How Clerk.io sends emails from your domain — a three-step overview of DNS setup

Die Sender Domain ist die Domain, die Clerk.io beim Versand von E-Mails für deinen Shop verwendet.

Bevor Clerk.io von dieser Domain senden kann, musst du sie mit DNS-Einträgen authentifizieren. Diese Einträge teilen den empfangenden Mailservern mit, dass Clerk.io berechtigt ist, E-Mails in deinem Namen zu versenden.

Ohne diesen Nachweis können E-Mails abgelehnt oder im Spam landen. Mailserver sind per Definition misstrauisch und haben auch schon einiges erlebt.

DNS-Einträge #

Füge die erforderlichen DNS-Einträge bei deinem Domain-Host hinzu. Dies ist in der Regel die Stelle, an der du deine Domain verwaltest, z. B. Cloudflare, GoDaddy, Route 53 oder ein ähnlicher Anbieter.

Clerk.io verwendet drei Arten von DNS-Einträgen:

  • SPF gibt an, welche Dienste E-Mails von deiner Domain versenden dürfen.
  • DKIM fügt eine Signatur hinzu, damit Empfänger überprüfen können, dass die E-Mail tatsächlich von dir stammt und unterwegs nicht verändert wurde.
  • CNAME wird zum Tracken von Öffnungen und Klicks in deinen Kampagnen genutzt.
SPF-Einträge: Eine Domain kann nur einen SPF-TXT-Eintrag haben. Falls bereits einer existiert, füge die Direktive, z. B. include:mailgun.org, in den bestehenden Eintrag ein, anstatt einen zweiten zu erstellen.

Um deine Einträge zu finden, gehe zu Email > Configuration > Domain Setup und folge der Anleitung für deinen Hosting-Provider.

Nachdem du deine Sender Email und Sender Name eingetragen hast, generiert Clerk.io die exakten Werte für die Einträge. Füge sie bei deinem Domain-Host hinzu und kehre dann zu Email > Configuration > DNS Records zurück, um auf Verify Now zu klicken.

Abonnenten #

Ein Abonnent ist eine E-Mail-Adresse, die dem Erhalt von Marketing-E-Mails zugestimmt hat.

Clerk.io benötigt Abonnenten, bevor Kampagnen versendet werden können. Ein Flow kann zwar einen Besucher identifizieren und exakt wissen, was er angesehen hat, darf aber dennoch niemanden marketingtechnisch anschreiben, der sich nicht angemeldet hat.

Es gibt mehrere Möglichkeiten, Abonnenten zu Clerk.io zu bringen:

  • Synchronisiere sie aus einer bestehenden E-Mail-Plattform.
  • Importiere sie aus einer CSV-Datei.
  • Füge sie in deinen Datenfeed mit subscribed: true ein.
  • Sammle neue Anmeldungen über ein Formular auf deiner Website.

Bestehende Abonnenten synchronisieren #

Die Synchronisation von Abonnenten ist die beste Option, wenn du bereits Abonnenten in einer Plattform wie Klaviyo oder Mailchimp hast.

Verbinde zunächst deine E-Mail-Plattform unter Settings > Integrations. Gehe dann zu Email > Configuration > Sync Subscribers und aktiviere das Toggle für die jeweilige Integration.

Sync Subscribers tab in Email Configuration

Um die Anleitung für eine spezifische E-Mail-Plattform zu finden, nutze das Integrations-Menü in der Seitenleiste und folge der Sync Data-Anleitung.

Falls du keine externe E-Mail-Plattform nutzt, importiere Abonnenten per CSV-Datei oder füge sie in deinen Datenfeed mit subscribed: true in den Kunden-Datensätzen ein.

Neue Abonnenten gewinnen #

Neue Abonnenten gewinnen bedeutet, frische Anmeldungen direkt von deiner Website zu sammeln.

Dies unterscheidet sich vom Synchronisieren bestehender Abonnenten. Die Synchronisierung bringt Personen herein, die sich bereits anderswo angemeldet haben. Ein Anmeldeformular ermöglicht es neuen Besuchern, sich direkt über deinen Shop anzumelden.

Nutze dies, wenn Clerk.io deine primäre E-Mail-Plattform ist oder wenn du ein Formular verwenden möchtest, das Besucher direkt bei Clerk.io anmeldet.

Mit Clerk.js #

Nutze Clerk.js, wenn sich ein Besucher direkt auf deiner Website anmeldet.

Das folgende Beispiel meldet die eingegebene E-Mail-Adresse global an. Du kannst das Formular im Footer, auf der Startseite oder in einem Popup platzieren und dann so gestalten, dass es zu deinem Shop passt.

Subscriber sign-up form example
<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">Sign up now!</h2>
   <div class="clerk-sign-up-subtitle">Get personal offers and stay up-to-date with trends.</div>
   <div class="clerk-input-wrapper">
      <input type="text" id="clerk-add-subscriber-input" placeholder="Enter your email">
      <button id="clerk-add-subscriber-btn" onclick="add_subscriber()">Subscribe</button>
   </div>
   <div id="clerk-subscribe-message"></div>
</div>

<script>
   function add_subscriber() {
      var clerk_btn = document.getElementById("clerk-add-subscriber-btn");
      var clerk_input = document.getElementById("clerk-add-subscriber-input");
      var clerk_message = document.getElementById("clerk-subscribe-message");
      Clerk("call", "subscriber/subscribe", {
         email: clerk_input.value
      },
      function(response) {
         clerk_message.style.color = "#008001";
         clerk_message.innerText = "You are now subscribed!";
         clerk_btn.innerText = "Subscribed!";
         clerk_btn.style.opacity = "0.5";
         clerk_btn.disabled = true;
      },
      function(response) {
         clerk_message.style.color = "#EE360E";
         clerk_message.innerText = "Could not subscribe. Please try again.";
      });
   }
</script>

<style>
   .clerk-sign-up {
      width: 50%;
      padding: 60px 0;
      max-width: 800px;
      min-width: 500px;
      margin: 40px auto;
      background-color: #FEFAF4;
   }
   .clerk-sign-up-headline {
      margin: 0 14px 14px;
      text-align: center;
   }
   .clerk-sign-up-subtitle {
      margin: 14px 14px 28px;
      text-align: center;
      color: #808080;
   }
   .clerk-input-wrapper {
      margin: 10px auto;
      text-align: center;
   }
   #clerk-add-subscriber-input {
      height: 28px;
      width: 50%;
      padding: 0 0 0 6px;
      border: 1px solid #D3D3D3;
   }
   #clerk-add-subscriber-btn {
      height: 30px;
      background-color: #008001;
      border: 1px solid #008001;
      color: white;
      cursor: pointer;
   }
   #clerk-subscribe-message {
      height: 20px;
      margin: auto;
      text-align: center;
   }
</style>

Um in eine bestimmte Liste einzutragen, füge list_id hinzu. Die List IDs findest du unter Email > Subscribers > Lists.

Clerk("call", "subscriber/subscribe", {
  email: "customer@example.com",
  list_id: "FSY27248"
});

Mehr dazu unter Subscribers.

Nutzung der API #

Verwende die API, wenn dein Anmeldeformular oder dein Backend Abonnenten direkt verwalten soll.

Rufe subscriber/subscribe auf, um eine E-Mail-Adresse als Abonnent einzutragen:

curl -X POST https://api.clerk.io/v2/subscriber/subscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com"
  }'

Um zu einer bestimmten Liste anzumelden, füge list_id hinzu:

curl -X POST https://api.clerk.io/v2/subscriber/subscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "list_id": "FSY27248"
  }'

Die vollständige Referenz steht unter docs.clerk.io/reference/subscriberssubscribe.

Abmelden (Unsubscribing) #

Das Abmelden ist der Weg, wie Empfänger den Erhalt von Marketing-E-Mails abbestellen.

Jede Marketing-E-Mail muss eine Möglichkeit bieten, sich abzumelden. Wie dies behandelt wird, hängt davon ab, ob der Empfänger auf einen Link in einer E-Mail klickt oder ob dein Backend das Opt-out steuert.

Mit externer Plattform — Verwende wie gewohnt den vorhandenen Abmeldelink deiner Plattform. Klaviyo, Mailchimp oder deine andere Plattform kümmern sich um den Opt-out und halten die Abonnentenliste synchron.

Versand über Clerk.io — Füge den Clerk.io-Abmeldelink ins Design ein. Wenn du Ask Clerk.io verwendest, bitte es, einen Abmeldelink einzufügen – es wird automatisch einen hinzufügen.

Für Designs, die du manuell erstellst, verwende folgenden Link.

Die Variable {{ email }} wird beim Versand durch die jeweilige Empfängeradresse ersetzt. Ersetze YOUR_PUBLIC_API_KEY mit dem Public Key aus Developers > API Keys.

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&redirect=true">Unsubscribe</a>

Um sich nur von einer bestimmten Liste abzumelden, füge list_id hinzu:

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&list_id=FSY27248&redirect=true">Unsubscribe from this list</a>

Um nach der Abmeldung auf eine eigene Bestätigungsseite weiterzuleiten, füge redirect_url hinzu:

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&redirect=true&redirect_url=https://yoursite.com/unsubscribed">Unsubscribe</a>

Nutzung der API #

Verwende subscriber/unsubscribe, um eine E-Mail-Adresse programmatisch abzumelden.

Dies eignet sich für eigene Abmeldeseiten oder Backend-Prozesse.

curl -X POST https://api.clerk.io/v2/subscriber/unsubscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com"
  }'

Dies meldet global ab. Um nur von einer bestimmten Liste abzumelden, füge list_id hinzu:

curl -X POST https://api.clerk.io/v2/subscriber/unsubscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "list_id": "FSY27248"
  }'

Die vollständige Referenz steht unter docs.clerk.io/reference/subscribersunsubscribe.

Store Personalization #

Email Configuration Personalization tab with store logo settings

Store Personalization steuert die Standard-Marken-Assets, die Clerk.io in E-Mail-Designs einsetzt.

Gehe zu Email > Configuration > Personalization, um dein Store-Logo festzulegen. Du kannst ein Bild manuell hochladen oder Auto-detect from website verwenden, damit Clerk.io es auf deiner Storefront findet.

Das hier gesetzte Logo wird als Standardlogo in von Clerk.io erstellten E-Mail-Designs verwendet. Wenn du Designs manuell erstellst, kannst du die Logo-URL trotzdem direkt im Template verwenden.

Email Designs #

Ask Clerk.io Design Studio showing an email design preview with product recommendations

Ein E-Mail-Design ist die visuelle Vorlage, die Clerk.io zum Erstellen der gesendeten E-Mail verwendet.

Jede Kampagne und jeder automatisierte Flow benötigt ein Design. Das Design steuert Layout, Farben, Texte, Produktblöcke, Abmeldelinks und alles andere, was der Empfänger sieht.

Mit Ask Clerk.io Design Studio #

Die einfachste Möglichkeit, ein Design zu erstellen, bietet das Ask Clerk.io Design Studio.

Beschreibe in Alltagssprache, was du möchtest – Layout, Farben, welche Produkte angezeigt werden und wie Aktionspreise aussehen sollen. Das Design Studio baut direkt im Chat eine Vorschau, die du prüfen und verfeinern kannst.

Du kannst auch deine Website angeben oder einen Screenshot anhängen. Dies wird als visuelle Referenz verwendet – das geht weit schneller, als einen bestimmten Grünton zu erklären.

Mehr dazu im Design Studio guide.

Mit MJML #

Nutze den integrierten MJML-Editor, wenn du mehr Kontrolle über das Markup möchtest.

MJML kompiliert zu HTML, das konsistent in Gmail, Outlook, Apple Mail und anderen E-Mail-Clients angezeigt wird. Eine vollständige Anleitung und Beispiele gibt es im MJML Designs guide.

Alle E-Mail-Designs in Clerk.io sind responsiv – sie passen sich automatisch an Desktop, Tablet und Mobilgeräte an.

Statische Bilder #

Verwende die Media Library für statische Bilder wie Banner, Logos und saisonale Header.

Dort hochgeladene Bilder erhalten eine Template-Referenz wie {{ media.your-image }}, die du in jedem Design verwenden kannst.

Du kannst auch ein Bild direkt in Ask Clerk.io anhängen – frage es, das Bild hochzuladen und im Design zu verwenden.

Email Identification #

Email Identification verknüpft eine Besuchersitzung mit einer E-Mail-Adresse.

Sie ist für automatisierte Flows wie Browse Abandonment, Welcome Series und Abandoned Cart erforderlich. Ohne sie erkennt Clerk.io zwar das Verhalten eines Besuchers, weiß aber nicht, wen es dazu per Mail kontaktieren soll.

Jeder Besucher deiner Seite erhält eine Besucher-ID. Anfangs ist die Besucher-ID anonym. Die Email Identification verbindet die ID mit einer E-Mail-Adresse, sobald der Besucher diese eingibt oder eingeloggt zurückkehrt.

Mit Clerk.js #

Nutze collect_email, um Clerk.js E-Mail-Felder automatisch erkennen zu lassen.

Wenn du eines der installierbaren Clerk.io-Plugins nutzt, aktiviere collect_email direkt in den Plugin-Einstellungen. Gilt für DanDomain Classic, Magento 1, Magento 2, PrestaShop, Shopware 6, VTEX und WooCommerce.

Bei anderen Setups aktiviere es in deiner Clerk.js-Konfiguration:

Clerk('config', {
  key: 'your-public-api-key',
  collect_email: true
});

Clerk.js überwacht E-Mail-Eingabefelder und protokolliert die Adresse, wenn ein Besucher sie einträgt.

Dies gilt für Checkout-Felder, Newsletter-Anmeldungen, Login-Formulare und alle anderen <input type="email">-Elemente.

Ist ein Kunde bereits eingeloggt, protokolliere seine E-Mail einmal pro Sitzung mit Clerk('call', 'log/email').

if (!sessionStorage.getItem('clerk_email_logged')) {
  Clerk('call', 'log/email', {
    email: 'CUSTOMER_EMAIL'
  });
  sessionStorage.setItem('clerk_email_logged', '1');
}

Ersetze CUSTOMER_EMAIL durch die tatsächliche E-Mail-Adresse aus deiner Plattform. Rendern den Script nur, wenn eine E-Mail-Adresse vorliegt.

Mit der API #

Nutze log/email, um eine Besucher-ID mit einer E-Mail-Adresse zu verknüpfen.

Rufe sie einmal pro Sitzung auf, wenn eine E-Mail-Adresse vorhanden ist (z. B. beim Login oder wenn der Kunde bereits eingeloggt zurückkehrt).

curl -X POST https://api.clerk.io/v2/log/email \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "visitor": "SESSION_VISITOR_ID"
  }'

Ersetze SESSION_VISITOR_ID durch die Besucher-ID der aktuellen Sitzung.

Bei Nutzung der API bist du für die Vergabe und Verwaltung der Besucher-ID verantwortlich. Details siehe im Tracking guide.

Cart Tracking #

Cart Tracking teilt Clerk.io mit, was ein Besucher aktuell im Warenkorb hat.

Dies ist erforderlich für Abandoned Cart E-Mails. Verlässt ein Besucher ohne Kauf den Shop, kann Clerk.io den Warenkorbinhalt nur versenden, wenn der Warenkorb getrackt wurde.

Rufe das Cart Tracking jedes Mal auf, wenn sich der Warenkorb ändert. Dies umfasst das Hinzufügen oder Entfernen eines Produkts sowie das vollständige Aktualisieren des Warenkorbs.

Mit Clerk.js #

Wenn du das Magento 1, Magento 2, PrestaShop oder WooCommerce Plugin verwendest, erfolgt das Warenkorb-Tracking automatisch.

Bei anderen Setups informiere Clerk.io über den aktuellen Warenkorbinhalt mit der Methode set. Jeder Aufruf ist der aktuellen Besuchersitzung zugeordnet.

Clerk('cart', 'set', [1234, 5678, 42]);

Mehr dazu in der Shopping Cart integration.

Mit der API #

Nutze log/cart/update, um den Warenkorb auf dessen aktuellen Stand zu setzen.

Rufe sie jedes Mal auf, wenn sich der Warenkorb ändert, und übergebe die vollständige Produktliste im Warenkorb.

curl -X POST https://api.clerk.io/v2/log/cart/update \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "visitor": "SESSION_VISITOR_ID",
    "products": [
      {"id": 1234, "quantity": 2},
      {"id": 5678, "quantity": 1}
    ]
  }'

Du kannst auch email anstatt – oder zusätzlich zu – visitor angeben, wenn die E-Mail-Adresse bereits bekannt ist.

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.