Setup

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

Diese Schritte sind nur relevant, wenn Sie E-Mails über Clerk.io versenden möchten – Kampagnen, Flows und automatisierte Trigger wie „Abgebrochener Warenkorb“. Falls Sie lediglich personalisierte Produktempfehlungen zu E-Mails hinzufügen möchten, die Sie bereits über Klaviyo, Mailchimp oder eine andere Plattform versenden, ist dies alles nicht notwendig. Gehen Sie stattdessen direkt zu Embeds.

Konfiguration #

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

DNS-Einrichtung #

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

Stellen Sie sich das so vor: Wenn Clerk.io eine E-Mail in Ihrem Namen verschickt, muss es dem empfangenden Mailserver beweisen, dass es tatsächlich dazu berechtigt ist. Ohne diesen Nachweis sieht die E-Mail verdächtig aus – wie jemand, der behauptet, Sie zu sein, aber keinen Ausweis vorzeigt. Mailserver mögen das nicht und lehnen die E-Mail entweder ab oder verschieben sie direkt in den Spam-Ordner.

DNS-Einträge sind die Art und Weise, wie Sie diese Berechtigung erteilen. Sie fügen ein paar Einträge in den Einstellungen Ihrer Domain hinzu (wo immer Sie Ihre Domain verwalten – Route 53, Cloudflare, GoDaddy usw.), und diese Einträge teilen dem Internet mit: „Clerk.io darf in unserem Namen E-Mails versenden.“

Es gibt drei Record-Typen, die Sie hinzufügen müssen:

• SPF – Deklariert, welche Dienste berechtigt sind, E-Mails von Ihrer Domain zu versenden.
• DKIM – Fügt ausgehenden E-Mails eine kryptografische Signatur hinzu, damit Empfänger überprüfen können, dass sie tatsächlich von Ihnen stammen und während der Übertragung nicht verändert wurden.
• CNAME – Wird verwendet, um Öffnungen und Klicks in Ihren Kampagnen zu verfolgen.

SPF-Einträge: Eine Domain kann nur einen SPF-TXT-Eintrag haben. Falls Sie bereits einen haben, müssen Sie die Direktive, z. B. include:mailgun.org, darin zusammenführen und dürfen keinen zweiten Eintrag 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-Provider.

Sobald Sie Ihre Absender-E-Mail und Absender-Namen eingegeben haben, generiert Clerk.io die exakten Werte für die Einträge, die Sie hinzufügen müssen. Nachdem Sie diese bei Ihrem Hosting-Provider eingetragen haben, kehren Sie zu Email > Configuration > DNS Records zurück und klicken Sie auf Jetzt verifizieren. Clerk.io prüft, ob alle drei Einträge korrekt konfiguriert wurden.

Abonnenten-Synchronisation #

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

Wenn Sie bereits Abonnenten in einer Plattform wie Klaviyo oder MailChimp haben, können Sie diese direkt in Clerk.io synchronisieren. So haben Sie vom ersten Tag an eine vollständige Abonnentenliste.

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

Um die Einrichtungsanleitung für Ihre spezifische E-Mail-Plattform zu finden, suchen Sie sie im Integrationsmenü in der Seitenleiste und folgen Sie der Daten-Sync-Anleitung.

Falls Sie keine externe E-Mail-Plattform nutzen, können Sie Abonnenten per CSV-Datei importieren oder sie über Ihren Datenfeed mit dem Attribut subscribed: true in Kunden-Datensätzen aufnehmen.

Personalisierung #

Im Reiter „Personalisierung“ unter Email > Configuration > Personalization können Sie ein Shop-Logo einstellen, das Clerk.io für Ihre E-Mail Designs verwendet.

Sie können entweder ein Bild direkt hochladen oder Automatisch von der Website erkennen wählen, damit Clerk.io das Logo automatisch aus Ihrem Shop herausfindet und einfügt. Das ist die schnellste Option, wenn Ihr Logo bereits auf der Seite sichtbar ist – Clerk.io lokalisiert und verwendet es, ohne dass ein manueller Upload erforderlich ist.

Das hier gesetzte Logo wird als Standardlogo in allen von Clerk.io erstellten E-Mail-Designs genutzt. Wenn Sie Ihre Designs manuell erstellen, können Sie es weiterhin direkt per Logo-URL im Template Markup referenzieren.

E-Mail-Design #

Jede Kampagne und jeder automatisierte Flow benötigt ein E-Mail-Design – die visuelle Vorlage, die Clerk.io zum Erstellen der tatsächlichen E-Mail verwendet.

Am einfachsten erstellen Sie eine Vorlage über das Ask Clerk.io Design Studio. Beschreiben Sie einfach in Klartext, was Sie möchten – Layout, Farben, welche Produkte angezeigt werden sollen, wie Sonderpreise aussehen sollen – und es erstellt Ihnen direkt eine Vorschau im Chat, die Sie überprüfen und verfeinern können. Sie können das Tool auch auf Ihre Seite verweisen oder einen Screenshot anhängen – dann wird das Design an Ihren bestehenden Stil angepasst. Lesen Sie mehr dazu im Design Studio Guide.

Für mehr Kontrolle können Sie den eingebauten MJML-Editor von Clerk.io verwenden, um Designs als strukturiertes Markup zu schreiben. MJML wird zu HTML kompiliert, das in Gmail, Outlook und Apple Mail konsistent dargestellt wird. Einen vollständigen Leitfaden und Beispiele finden Sie im MJML Designs Guide.

Alle E-Mail-Designs in Clerk.io sind responsiv – sie passen sich automatisch an jede Bildschirmgröße an und sehen daher ohne zusätzliche Arbeit auf Desktop, Tablet und Mobilgeräten gut aus.

Wenn Sie statische Bilder in Ihre Designs einfügen möchten – Banner, Logos, saisonale Header – können Sie diese direkt auf den Servern von Clerk.io über die Medienbibliothek hosten. Hochgeladene Bilder erhalten einen Template-Verweis wie {{ media.your-image }}, den Sie direkt in jedes Design einfügen können. Sie können ein Bild auch direkt in Ask Clerk.io anhängen und darum bitten, das Bild hochzuladen und im Design zu verwenden – alles Weitere wird automatisch erledigt.

Abmelde-Links #

Jede Marketing-E-Mail muss eine Möglichkeit für Empfänger enthalten, sich abzumelden. Wie Sie dies einbauen, hängt davon ab, wie Sie E-Mails versenden.

Mit externer Plattform (Klaviyo, Mailchimp, etc.) – Verwenden Sie weiterhin den Abmelde-Link Ihrer existierenden Plattform. Diese übernimmt die Abmeldung und hält Ihre Abonnentenliste automatisch synchron.

Wenn alle E-Mails über Clerk.io versendet werden – Fügen Sie den Abmelde-Link von Clerk.io in Ihr Design ein. Wenn Sie das Ask Clerk.io zum Erstellen der E-Mail nutzen, reicht es, anzugeben, dass ein Abmelde-Link enthalten sein soll – alles Weitere übernimmt das Tool.

Für Designs, die Sie manuell erstellen, nutzen Sie den untenstehenden Link. Die Variable {{ email }} wird beim Versand durch die jeweilige Empfängeradresse ersetzt. Ersetzen Sie 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">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 der Abmeldung 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>

Onsite-Setup #

Diese Schritte erfordern Anpassungen an Ihrem Shop und schalten Personalisierung, automatisierte Flows und „Abgebrochener Warenkorb“ frei. Nicht alle Schritte sind für jeden Shop notwendig – welche für Sie relevant sind, hängt davon ab, was Sie versenden möchten.

E-Mail-Erfassung #

Erforderlich für alle automatisierten Flows – wiederkehrende Warenkorbabbrüche, Begrüßungsserien und „Abgebrochener Warenkorb“.

Jeder Besucher Ihrer Website erhält eine Besucher-ID. Clerk.io nutzt diese, um zu verfolgen, was angesehen, gesucht und dem Warenkorb hinzugefügt wird.

Das Problem: Die Besucher-ID ist zunächst anonym – Clerk.io kann dem Besucher keine E-Mail senden, solange die Adresse nicht bekannt ist. Die E-Mail-Erfassung ist der Schritt, der beides verknüpft.

Sobald die E-Mail eines Besuchers mit seiner Besucher-ID verbunden ist, kann sein gesamtes Sitzungsverhalten für E-Mail-Trigger und Personalisierung genutzt werden.

Dabei gibt es zwei Situationen, in denen diese Verknüpfung hergestellt wird:

Wenn ein Besucher seine E-Mail eingibt – Gibt ein Besucher irgendwo auf Ihrer Seite seine E-Mail-Adresse ein (z.B. im Checkout-Feld, Newsletter-Anmeldeformular, Login-Formular), kann Clerk.io sie automatisch erfassen und protokollieren. Dies übernimmt das Feature collect_email, das Sie in Ihrer Clerk.js-Konfiguration oder in Developers > Clerk.js Config in my.clerk.io aktivieren können.

Wenn ein Kunde bereits eingeloggt ist – Kommt ein Kunde bereits authentifiziert zurück auf die Seite, ist seine E-Mail-Adresse sofort verfügbar. In diesem Fall kann ein kleines Script auf jeder Seite die E-Mail pro Sitzung protokollieren – so ist die Verbindung hergestellt, ohne dass der Kunde etwas tippen muss.

Warenkorb-Tracking #

Erforderlich für „Abgebrochener Warenkorb“.

Verlässt ein Besucher die Seite, ohne zu kaufen, kann Clerk.io ihm eine E-Mail mit den exakt zurückgelassenen Produkten schicken – vorausgesetzt, Clerk.io weiß, was im Warenkorb war.

Das Warenkorb-Tracking sollte immer dann ausgeführt werden, wenn sich der Warenkorb ändert: wenn ein Produkt hinzugefügt, entfernt oder der Warenkorb komplett aktualisiert wird. Ohne dieses Tracking hat der „Abgebrochener Warenkorb“-Flow keine Produktdaten.

Abonnentenformulare #

Optional – nur dann erforderlich, wenn Sie neue Anmeldungen direkt über Clerk.io sammeln möchten.

Wenn Sie Clerk.io als Ihre primäre E-Mail-Plattform verwenden, brauchen Sie eine Möglichkeit, dass sich neue Besucher direkt über Ihre Website anmelden können. So wächst Ihre Abonnentenliste direkt in Clerk.io, ohne dass Sie für Anmeldungen auf eine externe Plattform angewiesen sind.

Wenn Sie weiterhin Abonnenten in Klaviyo oder einer anderen Plattform sammeln möchten, lassen Sie die Abonnenten-Synchronisation kontinuierlich laufen, damit neue Anmeldungen regelmäßig in Clerk.io übernommen werden. In diesem Fall sind Abonnentenformulare nicht notwendig – Sie können diesen Abschnitt überspringen.

Siehe den Implementierungsabschnitt unten für ein einsatzbereites Anmeldeformular.

Mit Clerk.js #

DNS-Einrichtung und Abonnenten-Synchronisation werden immer über Email > Configuration und Settings > Integrations in my.clerk.io konfiguriert – hierfür ist kein Code erforderlich.

E-Mail-Erfassung #

Automatische Erkennung von E-Mail-Feldern – Nutzen Sie eines der installierbaren Clerk.io-Plugins (DanDomain Classic, Magento 1, Magento 2, PrestaShop, Shopware 6, VTEX oder WooCommerce), aktivieren Sie collect_email direkt in den Plugin-Einstellungen. Ansonsten aktivieren Sie es in Ihrer Clerk.js-Konfiguration. Clerk.js beobachtet dann alle E-Mail-Inputfelder auf der Seite und protokolliert die Adresse, sobald ein Besucher dort etwas eintippt.

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

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

Eingeloggte Kunden – Ist ein Kunde bereits eingeloggt, protokollieren Sie seine E-Mail einmal pro Sitzung. Nutzen Sie sessionStorage, um zu 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 mit der tatsächlichen E-Mail-Adresse Ihrer Plattform. Binden Sie dieses Script nur auf Seiten ein, auf denen tatsächlich eine E-Mail-Adresse verfügbar ist – überspringen Sie es vollständig für Gastbesucher.

Warenkorb-Tracking #

Wenn Sie das Plugin für Magento 1, Magento 2, PrestaShop oder WooCommerce verwenden, erfolgt das Warenkorb-Tracking automatisch – Sie müssen keinen weiteren Code einbinden.

Für alle anderen Setups informieren Sie Clerk.io über die aktuellen Warenkorbinhalte mit der set-Methode. Rufen Sie diese Methode immer 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]);

Lesen Sie mehr über die Integration des Warenkorbs hier.

Abonnentenformulare #

Unten finden Sie ein gebrauchsfertiges Anmeldeformular, das Sie auf Ihrer Website einbinden können – z.B. im Footer, auf der Startseite oder als Popup. Gestalten Sie es nach Ihren Vorstellungen.

<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">Jetzt anmelden!</h2>
   <div class="clerk-sign-up-subtitle">Persönliche Angebote erhalten und immer up-to-date bleiben.</div>
   <div class="clerk-input-wrapper">
      <input type="text" id="clerk-add-subscriber-input" placeholder="E-Mail eingeben">
      <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 jetzt 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 = "Abonnement konnte nicht durchgeführt werden. 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 sich für eine bestimmte Liste anzumelden, fügen Sie einen list_id Parameter zum Aufruf hinzu. Listen-IDs finden Sie unter Email > Subscribers > Lists.

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

Lesen Sie mehr zur Verwaltung von Abonnenten und Listen hier.

Mit der API #

In diesem Abschnitt geht es um die gleiche Einrichtung mittels direkter API-Calls. Das ist relevant für serverseitige Integrationen, die nicht Clerk.js nutzen.

Bei der Nutzung der API sind Sie dafür verantwortlich, für jede Sitzung eine Besucher-ID zu generieren und zu verwalten. Details dazu finden Sie im Tracking-Guide.

E-Mail protokollieren #

Verwenden Sie log/email, um eine Besucher-ID mit einer E-Mail-Adresse zu verknüpfen. Rufen Sie diese pro Sitzung auf, sobald eine E-Mail-Adresse verfügbar ist – sowohl, wenn ein Kunde sich aktiv einloggt, als auch, wenn er 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 der aktuellen Sitzung. Überspringen Sie diesen Aufruf vollständig für Gastbesucher, wenn keine E-Mail vorliegt.

Warenkorb-Tracking #

Verwenden Sie log/cart/update, um den Warenkorb auf seinen aktuellen Stand zu setzen. Rufen Sie dies immer auf, wenn sich der Warenkorb ändert, und übergeben Sie die vollständige Liste aller Produkte 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}
    ]
  }'

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

Abonnentenformulare #

Verwenden Sie subscriber/subscribe, um eine E-Mail-Adresse als Abonnenten 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 sich für eine bestimmte Liste anzumelden, 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 #

Verwenden Sie subscriber/unsubscribe, um eine E-Mail-Adresse programmatisch abzumelden – etwa von einer individuellen Abmeldeseite oder aus einem Backend-Workflow.

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 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.