Setup

Diese Anleitung behandelt die Einrichtung, die erforderlich ist, bevor Clerk.io E-Mails in Ihrem Namen versenden kann.

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

Jedes der folgenden Konzepte erklärt, was es macht, wann Sie es brauchen und wie Sie es mit Clerk.js oder der API verwalten, falls Code erforderlich ist.

Wählen Sie den richtigen Einrichtungsweg #

Verwenden Sie den Abschnitt, der zu Ihrer Aufgabe passt:

• Einrichtung prüfen: Öffnen Sie Setup Status, um fehlende Konfigurationen oder fehlerhaftes Tracking zu finden.
• Von Ihrer Domain senden: Konfigurieren Sie die Sender Domain und verifizieren Sie deren DNS-Einträge.
• Empfänger vorbereiten: Synchronisieren Sie bestehende Abonnenten, importieren Sie diese oder sammeln Sie neue Anmeldungen.
• E-Mail-Versand konfigurieren: Richten Sie Store Personalization, Email Designs, Email Identification und Cart Tracking ein.

Die Einrichtung ist aufgabenbasiert. Zum Beispiel benötigt Abandoned Cart die Email Identification und Cart Tracking, während eine einmalige Kampagne eine Sender Domain, Abonnenten und ein E-Mail Design erfordert.

Setup Status #

Der Tab Setup Status gibt Ihnen einen Live-Überblick über Ihre E-Mail-Einrichtung.

Sie finden ihn in Email > Configuration > Setup Status. Er zeigt an, ob die erforderlichen Teile konfiguriert sind, ob das Tracking funktioniert und ob E-Mails wie erwartet versendet werden.

Jeder Punkt hat einen farbigen Punkt. Grün bedeutet, dass alles in Ordnung ist, Rot bedeutet, dass etwas fehlt oder defekt ist, und Orange ist eine Warnung, die Sie überprüfen sollten.

Die Prüfungen sind in drei Bereiche gruppiert:

Configuration deckt die grundlegende Einrichtung ab. Dazu gehört, ob das E-Mail-Versenden aktiviert ist, welche Sender Domain konfiguriert ist, wie viele Abonnenten verfügbar sind und ob aktive Flow-Schritte E-Mail-Designs haben.

On-site tracking zeigt an, ob das Besuchstracking läuft. Es zeigt auch, wie viele Besucher oder Warenkörbe in den letzten sieben Tagen mit einer E-Mail-Adresse verknüpft wurden.

Flows & sending zeigt, ob aktive Flows konfiguriert sind, wie viele Flow-Ereignisse noch ausstehen, wie viele E-Mails kürzlich gesendet wurden und ob die Versandwarteschlange gesund ist.

Starten Sie hier, wenn E-Mails nicht wie erwartet versendet werden. Es ist das, was der Einrichtung am nächsten kommt, ein Dashboard zu haben, das heimlich die Tankanzeige prüft.

Sender Domain #

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

Bevor Clerk.io von dieser Domain senden kann, müssen Sie sie mit DNS-Einträgen authentifizieren. Diese Einträge weisen empfangende Mailserver darauf hin, dass Clerk.io berechtigt ist, E-Mails in Ihrem Namen zu senden.

Ohne diesen Nachweis können E-Mails abgelehnt oder als Spam markiert werden. Mailserver sind von Beruf aus misstrauisch und, ehrlich gesagt, haben sie schon einiges gesehen.

DNS-Einträge #

Fügen Sie die erforderlichen DNS-Einträge bei Ihrem Domain-Host hinzu. Das ist normalerweise dort, wo Sie Ihre Domain verwalten, 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 Ihrer Domain senden dürfen.
• DKIM fügt eine Signatur hinzu, damit Empfänger überprüfen können, ob die E-Mail wirklich von Ihnen stammt und unterwegs nicht verändert wurde.
• CNAME wird zur Nachverfolgung von Öffnungen und Klicks in Ihren Kampagnen verwendet.

SPF-Einträge: Eine Domain darf nur einen SPF-TXT-Eintrag haben. Falls Sie bereits einen haben, fügen Sie die Anweisung, z.B. include:mailgun.org, in den bestehenden Eintrag ein, statt einen zweiten zu erstellen.

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

Nachdem Sie Ihre Sender Email und Sender Name eingegeben haben, generiert Clerk.io die exakten Werte für die Einträge. Fügen Sie diese Ihrem Domain-Host hinzu und gehen Sie dann zurück zu Email > Configuration > DNS Records und klicken Sie auf Verify Now.

Subscribers #

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

Clerk.io benötigt Abonnenten, bevor es Kampagnen versenden kann. Ein Flow kann einen Besucher identifizieren und genau wissen, was dieser angesehen hat, aber dennoch keine Marketing-E-Mails an jemanden senden, der nicht abonniert hat.

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

• Synchronisieren Sie sie aus einer bestehenden E-Mail-Plattform.
• Importieren Sie sie aus einer CSV-Datei.
• Fügen Sie sie Ihrem Datenfeed mit subscribed: true hinzu.
• Sammeln Sie neue Anmeldungen über ein Formular auf Ihrer Website.

Bestehende Abonnenten synchronisieren #

Das Abonnenten-Sync ist die beste Option, wenn Sie bereits Abonnenten in einer Plattform wie Klaviyo oder Mailchimp haben.

Verbinden Sie zuerst Ihre E-Mail-Plattform in Settings > Integrations. Gehen Sie dann zu Email > Configuration > Sync Subscribers und aktivieren Sie den Schalter für die Integration.

Um die Anleitung für eine bestimmte E-Mail-Plattform zu finden, nutzen Sie das Integrationen-Menü in der Seitenleiste und folgen Sie der jeweiligen Sync Data Anleitung.

Wenn Sie keine externe E-Mail-Plattform verwenden, importieren Sie Abonnenten per CSV-Datei oder fügen Sie sie in Ihren data feed mit subscribed: true auf den Kundendatensätzen ein.

Double opt-in #

Double opt-in erfordert, dass neue Abonnenten ihre E-Mail-Adresse bestätigen, bevor Clerk.io ihnen Newsletter sendet. Dies ist hilfreich, wenn Ihr Unternehmen in Deutschland oder einem anderen Markt tätig ist, wo eine bestätigte Einwilligung erforderlich ist.

Um es zu aktivieren, gehen Sie zu Email > Configuration > Sync Subscribers, schalten Sie Double opt-in ein und speichern Sie Ihre Änderungen.

Nachdem sich ein Besucher angemeldet hat, sendet Clerk.io eine Bestätigungs-E-Mail. Der Abonnent erhält erst Newsletter, wenn er auf den Bestätigungslink klickt.

Die Bestätigungs-E-Mail enthält eine Live-Vorschau während der Bearbeitung. Sie können Betreff, Überschrift, Nachricht und Button-Text anpassen. Die E-Mail verwendet standardmäßig die verifizierte Versanddomain Ihres Shops, und der sichere Bestätigungslink wird automatisch eingefügt.

Lassen Sie ein Feld leer, um den sicheren Standardwert für diesen Teil der Bestätigungs-E-Mail zu verwenden.

Neue Abonnenten gewinnen #

Neue Abonnenten zu gewinnen bedeutet, frische Anmeldungen über Ihre Website zu sammeln.

Das unterscheidet sich vom Synchronisieren vorhandener Abonnenten. Synchronisieren bringt Personen herein, die schon anderswo zugestimmt haben. Mit einem Anmeldeformular können sich neue Besucher direkt über Ihren Shop anmelden.

Verwenden Sie dies, wenn Clerk.io Ihre primäre E-Mail-Plattform ist oder wenn Sie ein Formular möchten, das Besucher direkt bei Clerk.io abonniert.

Mit Clerk.js #

Nutzen Sie Clerk.js, wenn sich ein Besucher direkt auf Ihrer Website anmeldet.

Das folgende Beispiel abonniert die eingegebene E-Mail-Adresse global. Sie können das Formular im Footer, auf der Startseite oder in einem Popup platzieren und es an das Design Ihres Shops anpassen.

<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 zu einer bestimmten Liste zu abonnieren, fügen Sie list_id hinzu. Die List-IDs finden Sie in Email > Subscribers > Lists.

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

Lesen Sie mehr unter Subscribers.

Mit der API #

Nutzen Sie die API, wenn Ihr Anmeldeformular oder Backend Abonnenten direkt verwalten soll.

Rufen Sie subscriber/subscribe auf, um eine E-Mail-Adresse als Abonnent hinzuzufügen:

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, fügen Sie 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"
  }'

Lesen Sie die vollständige Referenz unter docs.clerk.io/reference/subscriberssubscribe.

Abmelden #

Abmelden bedeutet, dass Empfänger keine Marketing-E-Mails mehr erhalten möchten.

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

Bei Nutzung einer externen Plattform — Verwenden Sie weiterhin den Abmeldelink Ihrer bestehenden Plattform. Klaviyo, Mailchimp oder eine andere Plattform verwaltet die Abmeldung und hält die Abonnentenliste synchron.

Versand über Clerk.io — Fügen Sie den Abmeldelink von Clerk.io zum Design hinzu. Wenn Sie Ask Clerk.io nutzen, bitten Sie darum, einen Abmeldelink einzufügen – er wird dann automatisch hinzugefügt.

Abmeldelinks verwenden #

Für Designs, die Sie manuell erstellen, nutzen Sie den untenstehenden Link.

Die Variable {{ email }} wird beim Versand mit der Adresse des Empfängers 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>

Um sich nur von einer bestimmten Liste abzumelden, 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>

Um nach dem Abmelden auf eine eigene Bestätigungsseite weiterzuleiten, 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>

Mit der API #

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

Das ist nützlich für eigene Abmeldeseiten oder Backend-Workflows.

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 wird global abgemeldet. Um sich nur von einer bestimmten Liste abzumelden, fügen Sie 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"
  }'

Lesen Sie die vollständige Referenz unter docs.clerk.io/reference/subscribersunsubscribe.

Store Personalization #

Die Store Personalization steuert die Standard-Brand-Assets, die Clerk.io in E-Mail-Designs verwendet.

Gehen Sie zu Email > Configuration > Personalization, um Ihr Store-Logo festzulegen. Sie können ein Bild manuell hochladen oder Auto-detect from website verwenden, damit Clerk.io Ihr Logo automatisch auf Ihrem Shop findet.

Das hier festgelegte Logo wird als Standardlogo in von Clerk.io erstellten E-Mail-Designs genutzt. Wenn Sie Designs manuell erstellen, können Sie die Logo-URL auch direkt in das Vorlagen-Markup einfügen.

Email Designs #

Ein Email Design ist die visuelle Vorlage, die Clerk.io verwendet, um die zu versendende E-Mail zu erstellen.

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

Mit Ask Clerk.io Design Studio #

Der einfachste Weg, ein Design zu erstellen, ist Ask Clerk.io Design Studio.

Beschreiben Sie in Alltagssprache, was Sie möchten – z.B. Layout, Farben, welche Produkte angezeigt werden und wie Aktionspreise dargestellt werden sollen. Das Design Studio baut eine Vorschau direkt im Chat, die Sie überprüfen und anpassen können.

Sie können auch auf Ihre Website verweisen oder einen Screenshot anhängen. Das wird dann als visuelle Referenz genutzt, was erheblich schneller ist, als Ihren Farbton Grün zu beschreiben, als wäre er ein Verdächtiger bei der Polizei.

Mehr dazu im Design Studio guide.

Mit MJML #

Verwenden Sie den integrierten MJML-Editor, wenn Sie mehr Kontrolle über das Markup wünschen.

MJML wird zu HTML kompiliert, das konsistent in Gmail, Outlook, Apple Mail und anderen Clients dargestellt wird. Einen vollständigen Leitfaden und Beispiele finden Sie im MJML Designs guide.

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

Statische Bilder #

Für statische Bilder, wie Banner, Logos und saisonale Header nutzen Sie die Media Library.

Bilder, die dort hochgeladen werden, erhalten eine Vorlagenreferenz wie {{ media.your-image }}, die Sie in jedem Design verwenden können.

Sie können auch ein Bild direkt in Ask Clerk.io anhängen und darum bitten, das Bild hochzuladen und im Design zu verwenden.

Email Identification #

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

Diese Funktion ist für automatisierte Flows wie Browse Abandonment, Welcome Series und Abandoned Cart erforderlich. Ohne sie weiß Clerk.io zwar, was ein Besucher getan hat, aber nicht, an wen er eine E-Mail senden soll.

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

Mit Clerk.js #

Verwenden Sie collect_email, damit Clerk.js E-Mail-Felder automatisch erkennt.

Wenn Sie eines der installierbaren Clerk.io-Plugins nutzen, aktivieren Sie collect_email direkt in den Plugin-Einstellungen. Dies gilt für DanDomain Classic, Magento 1, Magento 2, PrestaShop, Shopware 6, VTEX und WooCommerce.

Für andere Setups aktivieren Sie es in Ihrer Clerk.js-Konfiguration:

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

Clerk.js überwacht dann E-Mail-Input-Felder und protokolliert die Adresse, wenn ein Besucher sie eingibt.

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

Wenn der Kunde bereits eingeloggt ist, loggen Sie die E-Mail einmal pro Session mit Clerk('call', 'log/email').

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 echte E-Mail-Adresse aus Ihrer Plattform. Rendern Sie das Skript nur, wenn eine E-Mail-Adresse vorhanden ist.

Mit der API #

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

Rufen Sie es einmal pro Sitzung auf, wenn eine E-Mail-Adresse verfügbar ist. Dies gilt, wenn ein Kunde sich einloggt oder 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"
  }'

Ersetzen Sie SESSION_VISITOR_ID durch die Besucher-ID für die aktuelle Sitzung.

Wenn Sie die API verwenden, sind Sie für das Generieren und Verwalten der Besucher-ID verantwortlich. Details finden Sie im Tracking guide.

Cart Tracking #

Cart Tracking informiert Clerk.io über die aktuellen Inhalte des Warenkorbs eines Besuchers.

Das ist für Abandoned Cart E-Mails erforderlich. Wenn ein Besucher ohne Kauf abbricht, kann Clerk.io die Warenkorbinhalte nur senden, wenn der Warenkorb getrackt wurde.

Rufen Sie das Cart Tracking immer dann auf, wenn sich der Warenkorb ändert. Das schließt ein, wenn ein Produkt hinzugefügt oder entfernt wird oder wenn der Warenkorb komplett aktualisiert wird.

Mit Clerk.js #

Wenn Sie das Plugin für Magento 1, Magento 2, PrestaShop oder WooCommerce verwenden, wird das Warenkorb-Tracking automatisch erledigt.

Für andere Setups benachrichtigen Sie Clerk.io über die aktuellen Warenkorbinhalte mit der set-Methode. Jeder Aufruf bezieht sich auf die aktuelle Besuchersitzung.

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

Lesen Sie mehr unter Shopping Cart integration.

Mit der API #

Nutzen Sie log/cart/update, um den Warenkorb auf den aktuellen Stand zu bringen.

Rufen Sie es immer dann auf, wenn sich der Warenkorb ändert – übergeben Sie die komplette Liste der aktuell im Warenkorb befindlichen Produkte.

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

Sie können auch email anstelle von oder zusätzlich zu visitor übergeben, wenn die E-Mail-Adresse bereits bekannt ist.