Setup

Dieser Leitfaden behandelt alles, was Sie einrichten müssen, bevor Clerk.io in der Lage ist, E-Mails in Ihrem Namen zu versenden.

Diese Schritte gelten nur, wenn Sie E-Mails über Clerk.io versenden möchten – Kampagnen, Flows und automatisierte Trigger wie Warenkorbabbruch. Wenn Sie nur personalisierte Produktempfehlungen zu E-Mails hinzufügen wollen, die Sie bereits über Klaviyo, Mailchimp oder eine andere Plattform senden, ist keines davon erforderlich. Gehen Sie stattdessen direkt zu Embeds.

Konfiguration #

Diese Schritte autorisieren Clerk.io dazu, E-Mails von Ihrer Domain zu versenden, stellen eine Empfängerliste bereit und bereiten Ihr erstes E-Mail-Design vor. Sie benötigen Zugriff auf my.clerk.io, den Hosting-Anbieter Ihrer Domain und Ihre existierende E-Mail-Plattform.

Einrichtungsstatus #

Die Registerkarte Einrichtungsstatus unter Email > Configuration > Setup Status gibt Ihnen einen Live-Überblick darüber, ob Ihre E-Mail-Einrichtung abgeschlossen und gesund ist.

Jeder Punkt in der Liste zeigt einen farbigen Punkt an – Grün bedeutet, alles ist in Ordnung, Rot zeigt an, dass etwas fehlt oder defekt ist, und Orange ist eine Warnung, die überprüft werden sollte. Die Überschrift der Registerkarte zeigt die Anzahl fehlender erforderlicher Schritte, damit Sie auf einen Blick sehen können, ob Handlungsbedarf besteht.

Die Prüfungen sind in drei Bereiche gruppiert:

Konfiguration umfasst die grundlegenden Setup-Anforderungen – ob Ihr Shop und Ihr Unternehmen aktiviert sind, ob der E-Mail-Versand aktiv ist, welche Absenderdomain konfiguriert wurde, wie viele abonnierte Empfänger zur Verfügung stehen und ob allen aktiven Flow-Schritten ein E-Mail-Design zugewiesen ist.

On-site-Tracking zeigt an, ob das Besucherverfolgung läuft und wie viele Besucher oder Warenkörbe in den letzten sieben Tagen mit einer E-Mail-Adresse verknüpft wurden. Geringe Zahlen deuten hier meist auf eine fehlende E-Mail-Collection hin.

Flows & Versand zeigt, ob aktive Flows eingerichtet sind, wie viele Flow-Ereignisse aktuell ausstehen, wie viele E-Mails kürzlich gesendet wurden und ob die Versandwarteschlange gesund ist. Wenn E-Mails nicht wie erwartet versendet werden, prüfen Sie zuerst diesen Abschnitt.

DNS-Einrichtung #

Die DNS-Einrichtung ist für alle Shops erforderlich, die Clerk.io Email nutzen. Bevor Clerk.io überhaupt E-Mails senden kann, müssen Sie Ihre Absenderdomain authentifizieren, indem Sie DNS-Einträge beim Hosting-Anbieter Ihrer Domain hinzufügen.

Stellen Sie sich das so vor: Wenn Clerk.io eine E-Mail in Ihrem Namen verschickt, muss das beim Empfänger-Mailserver nachweisen, dass es tatsächlich autorisiert wurde. Ohne diesen Nachweis wirkt die E-Mail verdächtig – wie jemand, der behauptet, Sie zu sein, aber keinen Ausweis hat. Mailserver lehnen solche E-Mails ab oder verschieben sie direkt in den Spam.

Mit DNS-Einträgen erteilen Sie diese Autorisierung. Sie fügen Ihrer Domain-Konfiguration (wo auch immer Sie Ihre Domain verwalten – Route 53, Cloudflare, GoDaddy, etc.) einige Einträge hinzu, und diese Einträge teilen dem Internet mit: „Clerk.io darf in unserem Namen E-Mails senden.“

Es gibt drei Typen von Einträgen, die Sie hinzufügen müssen:

• SPF – Gibt an, welche Dienste berechtigt sind, E-Mails von Ihrer Domain zu senden.
• DKIM – Fügt ausgehenden E-Mails eine kryptografische Signatur hinzu, damit Empfänger prüfen können, ob sie wirklich von Ihnen stammen und unterwegs nicht verändert wurden.
• CNAME – Wird verwendet, um Öffnungen und Klicks in Ihren Kampagnen zu tracken.

SPF-Einträge: Eine Domain darf nur einen SPF TXT-Eintrag haben. Falls Sie bereits einen haben, müssen Sie die Direktive, z. B. include:mailgun.org, in den bestehenden Eintrag einfügen, anstatt einen zweiten zu erstellen.

Um Ihre DNS-Einträge zu finden, gehen Sie zu Email > Configuration > Domain Setup und folgen Sie der Schritt-für-Schritt-Anleitung für Ihren Hosting-Anbieter.

Nachdem Sie Ihre Absender-E-Mail und den Absendernamen eingegeben haben, erzeugt Clerk.io die genauen Werte der benötigten Einträge. Nachdem Sie diese bei Ihrem Hosting-Anbieter hinterlegt haben, gehen Sie zurück zu Email > Configuration > DNS Records und klicken Sie auf Jetzt verifizieren. Clerk.io prüft dann, ob alle drei Einträge korrekt konfiguriert sind.

Abonnenten-Synchronisierung #

Die Abonnenten-Synchronisierung ist für alle Shops erforderlich, die Clerk.io Email nutzen. Ein Abonnent ist eine E-Mail-Adresse, die dem E-Mail-Marketing zugestimmt hat. Clerk.io muss wissen, wer diese Personen sind, bevor Kampagnen gesendet werden können.

Falls Sie bereits Abonnenten z. B. in Klaviyo oder MailChimp haben, können Sie sie direkt mit Clerk.io synchronisieren. So haben Sie vom ersten Tag an eine komplette Abonnentenliste zur Verfügung.

Richten Sie eine Synchronisierung ein, indem Sie zu Settings > Integrations gehen und Ihre E-Mail-Plattform verbinden. Sobald die Integration gespeichert ist, gehen Sie zu Email > Configuration > Sync Subscribers und aktivieren Sie den Schalter neben der gewünschten Integration.

Die Anleitung für Ihre spezifische E-Mail-Plattform finden Sie im Integrationsmenü in der Seitenleiste und folgen dem dortigen „Sync Data“-Leitfaden.

Wenn Sie keine externe E-Mail-Plattform nutzen, können Sie Abonnenten per CSV-Datei importieren oder sie über Ihr Datenfeed mit dem Attribut subscribed: true bei Kunden-Datensätzen hinzufügen.

Personalisierung #

Im Reiter Personalisierung unter Email > Configuration > Personalization können Sie ein Shop-Logo hinterlegen, das Clerk.io in allen E-Mail-Designs verwendet.

Sie können entweder ein Bild direkt hochladen oder Automatisch von der Website erkennen verwenden – dann sucht und übernimmt Clerk.io das Logo direkt von Ihrer Shopseite. Das ist am schnellsten, wenn Ihr Logo bereits auf der Seite sichtbar ist – Clerk.io findet es und übernimmt es ohne manuellen Upload.

Das hier gesetzte Logo wird als Standardlogo in Clerk.io-E-Mail-Designs verwendet. Wenn Sie Ihre Designs manuell erstellen, können Sie die Logourl direkt im Template nutzen.

E-Mail-Design #

Jede Kampagne und jeder automatisierte Flow benötigt ein E-Mail-Design – das visuelle Template, mit dem Clerk.io die eigentliche E-Mail erstellt.

Am einfachsten erstellen Sie dieses mit dem Ask Clerk.io Design Studio. Beschreiben Sie einfach in Alltagssprache, was Sie möchten – Layout, Farben, welche Produkte angezeigt werden, wie Rabatte aussehen sollen – und das Studio baut eine passende Vorschau direkt im Chat, die Sie prüfen und anpassen können. Sie können es auch auf Ihre Seite zeigen oder einen Screenshot hochladen und es wird den vorhandenen Stil übernehmen. Mehr dazu im Design Studio Guide.

Für mehr Kontrolle steht der integrierte MJML-Editor zur Verfügung, in dem Sie Designs als strukturiertes Markup schreiben. MJML wird in HTML übersetzt, das in Gmail, Outlook und Apple Mail zuverlässig dargestellt wird. Eine vollständige Anleitung und Beispiele finden Sie im MJML Designs Guide.

Alle E-Mail-Designs in Clerk.io sind responsiv – sie passen sich automatisch jeder Bildschirmgröße an, sodass sie immer ansprechend aussehen, egal ob auf Desktop, Tablet oder Mobilgerät.

Möchten Sie statische Bilder in Designs einbinden – Banner, Logos, saisonale Header –, können Sie diese direkt auf den Servern von Clerk.io in der Medienbibliothek hosten. Hochgeladene Bilder erhalten eine Template-Referenz wie {{ media.your-image }}, die Sie direkt ins Design einfügen können. Sie können auch ein Bild direkt in Ask Clerk.io anhängen und bitten, das Bild hochzuladen und im Design zu verwenden – den Rest übernimmt das Studio.

Abmelde-Links #

Jede Marketing-E-Mail muss eine Möglichkeit bieten, sich abzumelden. Wie das passiert, hängt davon ab, wie Sie E-Mails versenden.

Bei Nutzung einer externen Plattform (Klaviyo, Mailchimp, etc.) – Verwenden Sie weiterhin den Abmelde-Link Ihrer bestehenden Plattform. Diese übernimmt den Opt-out und hält Ihre Abonnentenliste automatisch synchron.

Versand aller E-Mails über Clerk.io – Fügen Sie den Abmelde-Link von Clerk.io in Ihr Design ein. Falls Sie das Design über Ask Clerk.io erstellen, genügt es, anzugeben, dass ein Abmelde-Link enthalten sein soll, und der Rest erfolgt automatisch.

Für Designs, die Sie manuell erstellen, verwenden Sie den untenstehenden Link. Die Variable {{ email }} wird beim Versand mit der jeweiligen E-Mail-Adresse ersetzt. Ersetzen Sie YOUR_PUBLIC_API_KEY durch den Public Key aus Developers > API Keys.

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

Wenn Sie sich nur von einer bestimmten Liste abmelden möchten, fügen Sie list_id hinzu:

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&list_id=FSY27248&redirect=true">Von dieser Liste abmelden</a>

Wenn nach dem Abmelden auf eine eigene Bestätigungsseite weitergeleitet werden soll, fügen Sie 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">Abmelden</a>

On-Site-Setup #

Diese Schritte erfordern Anpassungen an Ihrem Shop und aktivieren Personalisierung, Automatisierungen und Warenkorbabbruch. Nicht jedes Geschäft benötigt alle – welche Sie benötigen, hängt von Ihren Zielen für den Versand ab.

E-Mail-Erfassung #

Erforderlich für alle automatisierten Flows – Sitzungsabbruch, Willkommensserien und Warenkorbabbruch.

Jeder Besucher Ihrer Seite erhält eine Besucher-ID. Clerk.io nutzt diese, um nachzuverfolgen, was dieser Besucher ansieht, sucht und in den Warenkorb legt.

Das Problem: Die Besucher-ID ist zunächst anonym – Clerk.io kann diesen Besucher erst dann kontaktieren, wenn dessen E-Mail-Adresse bekannt ist. Die E-Mail-Erfassung ist der Schritt, der beides verknüpft.

Sobald die E-Mail einer Besucher-ID zugeordnet ist, kann sämtliches Sitzungsverhalten genutzt werden, um E-Mails auszulösen und zu personalisieren.

Es gibt zwei Situationen, in denen diese Verknüpfung nötig ist:

Wenn ein Besucher seine E-Mail eingibt – Gibt ein Besucher irgendwo auf der Seite seine E-Mail ein (Eingabefeld im Checkout, Newsletter-Anmeldung, Login-Formular), kann Clerk.io dies automatisch erkennen und aufzeichnen. Dies geschieht über die collect_email-Funktion, die Sie in Ihrer Clerk.js-Konfiguration oder über Developers > Clerk.js Config in my.clerk.io aktivieren können.

Wenn ein Kunde bereits eingeloggt ist – Kommt ein Kunde bereits authentifiziert zurück, ist seine E-Mail sofort verfügbar. In diesem Fall kann ein kurzes Skript auf jeder Seite die E-Mail einmal pro Sitzung loggen – die Verbindung wird hergestellt, ohne dass der Kunde noch etwas eingeben muss.

Warenkorb-Tracking #

Erforderlich für Warenkorbabbruch.

Wenn ein Besucher den Shop verlässt, ohne zu kaufen, kann Clerk.io ihm eine E-Mail mit den von ihm im Warenkorb zurückgelassenen Produkten senden – dies funktioniert jedoch nur, wenn bekannt ist, was sich im Warenkorb befindet.

Das Warenkorb-Tracking sollte jedes Mal aufgerufen werden, wenn sich der Warenkorb ändert: Produkt hinzufügen, entfernen oder der Warenkorb komplett aktualisiert wird. Ohne dies hat der Warenkorbabbruch-Flow keine Produktdaten zur Verfügung.

Abonnentenformulare #

Optional – nur notwendig, wenn Sie neue Anmeldungen direkt über Clerk.io erfassen.

Wenn Sie Clerk.io als primäre E-Mail-Plattform verwenden, benötigen Sie eine Möglichkeit für Besucher, sich direkt auf Ihrer Seite anzumelden. So wächst Ihre Abonnentenliste in Clerk.io, ohne dass eine externe Plattform für Anmeldungen benötigt wird.

Wenn Sie weiterhin die Erfassung in Klaviyo oder einer anderen Plattform bevorzugen, sollte die Abonnenten-Synchronisierung dauerhaft laufen, damit neue Anmeldungen regelmäßig übernommen werden. Dann sind Abonnentenformulare nicht nötig – diesen Abschnitt können Sie überspringen.

Siehe den Implementierungsabschnitt unten für ein sofort einsetzbares Anmeldeformular.

Mit Clerk.js #

DNS-Einrichtung und Abonnenten-Synchronisierung erfolgen immer über Email > Configuration und Settings > Integrations in my.clerk.io – hierfür ist kein Code notwendig.

Automatische Erkennung von E-Mail-Feldern #

Wenn Sie eines der installierbaren Clerk.io-Plugins (DanDomain Classic, Magento 1, Magento 2, PrestaShop, Shopware 6, VTEX oder WooCommerce) verwenden, aktivieren Sie collect_email direkt in den Plugin-Einstellungen. Ansonsten aktivieren Sie diese Option in Ihrer Clerk.js-Konfiguration. Clerk.js überwacht dann alle E-Mail-Felder auf der Seite und loggt die E-Mail-Adresse automatisch, wenn ein Besucher sie einträgt.

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

Dies funktioniert für Checkout-Felder, Newsletter-Anmeldungen, Login-Formulare und jedes andere <input type="email">-Element auf der Seite.

Eingeloggte Kunden #

Wenn ein Kunde bereits beim Betreten der Seite eingeloggt ist, sollte dessen E-Mail einmal pro Sitzung geloggt werden. Die genaue Umsetzung hängt von Ihrer Plattform ab, entscheidend ist jedoch, mit Clerk('call', 'log/email') die E-Mail-Adresse an Clerk.io zu senden, sobald der Nutzer in der Sitzung identifiziert werden kann.

Hier ein Beispiel, wie Sie mit sessionStorage vermeiden, dass der Aufruf bei jedem Seitenaufruf erfolgt:

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

Ersetzen Sie CUSTOMER_EMAIL durch die tatsächliche E-Mail-Adresse Ihrer Plattform. Stellen Sie sicher, dass das Logging-Skript nur auf Seiten ausgeführt wird, auf denen die E-Mail verfügbar ist – verzichten Sie bei Gastbesuchern komplett auf das Skript.

Warenkorb-Tracking #

Wenn Sie das Magento 1, Magento 2, PrestaShop oder WooCommerce Plugin verwenden, wird das Warenkorb-Tracking automatisch übernommen – kein weiterer Code notwendig.

Für alle anderen Setups melden Sie Clerk.io den aktuellen Warenkorbinhalt mit der Methode set. Rufen Sie sie immer dann auf, wenn sich der Warenkorb ändert, und übergeben Sie die aktuelle Liste der Produkt-IDs. Jeder Aufruf wird automatisch der aktuellen Besuchersitzung zugeordnet.

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

Mehr zum Shopping Cart Integration hier.

Abonnentenformulare #

Nachfolgend finden Sie ein sofort nutzbares Anmeldeformular, das Sie direkt auf Ihrer Seite einbinden können – im Footer, auf der Startseite, als Popup. Passen Sie das Design beliebig an.

<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">Jetzt anmelden!</h2>
   <div class="clerk-sign-up-subtitle">Erhalten Sie persönliche Angebote und bleiben Sie über Trends informiert.</div>
   <div class="clerk-input-wrapper">
      <input type="text" id="clerk-add-subscriber-input" placeholder="Geben Sie Ihre E-Mail ein">
      <button id="clerk-add-subscriber-btn" onclick="add_subscriber()">Abonnieren</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 = "Sie sind nun abonniert!";
         clerk_btn.innerText = "Abonniert!";
         clerk_btn.style.opacity = "0.5";
         clerk_btn.disabled = true;
      },
      function(response) {
         clerk_message.style.color = "#EE360E";
         clerk_message.innerText = "Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.";
      });
   }
</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 zu einer bestimmten Liste statt global zu abonnieren, fügen Sie einen list_id-Parameter in den Aufruf ein. Listen-IDs finden Sie unter Email > Subscribers > Lists.

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

Mehr zum Verwalten von Abonnenten und Listen hier.

Mit der API #

Dieser Abschnitt behandelt das gleiche Setup über direkte API-Aufrufe. Das ist relevant für serverseitige Integrationen, die Clerk.js nicht nutzen.

Bei Nutzung der API sind Sie selbst dafür verantwortlich, für jede Sitzung eine Besucher-ID zu generieren und zu pflegen. Wie das konkret funktioniert, steht im Tracking Guide.

Log Email #

Nutzen Sie log/email, um eine Besucher-ID mit einer E-Mail-Adresse zu verknüpfen. Rufen Sie diese Funktion einmal pro Sitzung auf, wenn eine E-Mail-Adresse verfügbar ist – sowohl bei aktiver Anmeldung als auch bei Rückkehr eines bereits eingeloggten Kunden.

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"
  }'

Ersetzen Sie SESSION_VISITOR_ID durch die Besucher-ID der aktuellen Sitzung. Bei Gastbesuchern ohne bekannte E-Mail, rufen Sie die Funktion nicht auf.

Warenkorb-Tracking #

Verwenden Sie log/cart/update, um den aktuellen Stand des Warenkorbs zu setzen. Rufen Sie diese Funktion immer dann auf, wenn sich der Warenkorb ändert, und übergeben Sie die vollständige Produktliste, die sich aktuell im Warenkorb befindet.

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}
    ]
  }'

Statt (oder zusätzlich zu) visitor können Sie auch email übergeben, wenn die E-Mail-Adresse zum Zeitpunkt des Aufrufs bereits bekannt ist.

Abonnentenformulare #

Verwenden Sie subscriber/subscribe, um eine E-Mail-Adresse als Abonnent hinzuzufügen, wenn sich ein Besucher auf Ihrer Seite anmeldet.

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 zu abonnieren, geben Sie list_id an:

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 finden Sie unter docs.clerk.io/reference/subscriberssubscribe.

Abmelden (Unsubscribe) #

Nutzen Sie subscriber/unsubscribe, um eine E-Mail-Adresse programmatisch abzumelden – beispielsweise von einer eigenen Abmeldeseite oder einem Backend-Prozess.

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"
  }'

Damit erfolgt die Abmeldung global. Um sich stattdessen nur von einer bestimmten Liste abzumelden, geben Sie list_id an:

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 finden Sie unter docs.clerk.io/reference/subscribersunsubscribe.