Setup

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

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

Jedes der untenstehenden Konzepte erklärt, was es tut, wann Sie es benötigen und wie Sie es mit Clerk.js oder der API verwalten, falls Code benötigt wird.

Wählen Sie den richtigen Einrichtungsweg #

Verwenden Sie den Abschnitt, der zu der Aufgabe passt, die Sie erledigen möchten:

• Setup prüfen: Öffnen Sie den Setup-Status, um fehlende Konfigurationen oder defektes Tracking zu finden.
• Vom eigenen 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-Personalisierung, E-Mail-Designs, E-Mail-Identifikation und Warenkorb-Tracking ein.

Das Setup ist aufgabenbasiert. Zum Beispiel erfordert Abandoned Cart die E-Mail-Identifikation und das Warenkorb-Tracking, während eine Einzelkampagne eine Sender Domain, Abonnenten und ein E-Mail-Design benötigt.

Setup-Status #

Die Setup-Status-Registerkarte gibt Ihnen eine Live-Übersicht über Ihr E-Mail-Setup.

Sie finden diese unter Email > Configuration > Setup Status. Sie zeigt, ob die erforderlichen Teile konfiguriert sind, ob das Tracking funktioniert und ob E-Mails wie erwartet gesendet 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 es zu überprüfen gilt.

Die Prüfungen sind in drei Bereiche unterteilt:

Konfiguration umfasst das Grundsetup. Dazu gehört, ob der E-Mail-Versand aktiviert ist, welche Sender Domain konfiguriert ist, wie viele abonnierte Empfänger verfügbar sind und ob aktive Flow-Schritte E-Mail-Designs haben.

On-site-Tracking zeigt an, ob das Besucherverfolgung läuft. Es zeigt auch, wie viele Besucher oder Warenkörbe in den letzten sieben Tagen an eine E-Mail-Adresse gekoppelt wurden.

Flows & Versand zeigt, ob aktive Flows konfiguriert sind, wie viele Flow-Ereignisse 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 am ehesten das, was das E-Mail-Setup einem Dashboard gleicht, das still und heimlich die Tankanzeige prüft.

Sender Domain #

Die Sender Domain ist die Domain, die Clerk.io beim E-Mail-Versand 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 teilen empfangenden Mail-Servern mit, dass Clerk.io berechtigt ist, in Ihrem Namen E-Mails zu senden.

Ohne diesen Nachweis können E-Mails abgelehnt oder als Spam eingestuft werden. Mail-Server 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. Dies ist in der Regel dort, wo Sie Ihre Domain verwalten, z.B. bei Cloudflare, GoDaddy, Route 53 oder einem ähnlichen 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 die Empfänger verifizieren können, dass die E-Mail von Ihnen stammt und unterwegs nicht verändert wurde.
• CNAME wird für das Tracking von Öffnungen und Klicks in Ihren Kampagnen verwendet.

SPF-Einträge: Eine Domain kann nur einen SPF-TXT-Eintrag haben. Wenn Sie bereits einen Eintrag haben, fügen Sie die Direktive, z.B. include:mailgun.org, zu dem bestehenden Eintrag hinzu, statt einen zweiten anzulegen.

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 genauen Eintragswerte. Fügen Sie diese bei Ihrem Domain-Host hinzu und kehren Sie dann zu Email > Configuration > DNS Records zurück, um auf Jetzt verifizieren zu klicken.

Abonnenten #

Ein Abonnent ist eine E-Mail-Adresse, die den Empfang von Marketing-E-Mails bestätigt hat.

Clerk.io benötigt Abonnenten, bevor Kampagnen gesendet werden können. Ein Flow kann einen Besucher identifizieren und genau wissen, was er betrachtet hat, aber dennoch keine Marketing-E-Mail an jemanden senden, der sich nicht angemeldet hat.

Es gibt mehrere Wege, Abonnenten zu Clerk.io zu bringen:

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

Bestehende Abonnenten synchronisieren #

Das Synchronisieren von Abonnenten ist die beste Option, wenn Sie bereits Abonnenten auf 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 Integrationsmenü in der Seitenleiste und folgen Sie der jeweiligen Sync Data-Anleitung.

Wenn Sie keine externe E-Mail-Plattform nutzen, importieren Sie Abonnenten mit einer CSV-Datei oder fügen Sie sie in Ihren Datenfeed mit subscribed: true bei 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, in dem eine bestätigte Einwilligung erforderlich ist.

Aktivieren Sie dies in 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 keine Newsletter, bis der Bestätigungslink angeklickt wird.

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 nutzt standardmäßig Ihre verifizierte Shop-Domain als Absender, und der sichere Bestätigungslink wird automatisch hinzugefügt.

Lassen Sie ein Feld leer, um die sichere Voreinstellung für diesen Teil der Bestätigungs-E-Mail zu verwenden.

Neue Abonnenten gewinnen #

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

Dies unterscheidet sich vom Synchronisieren bestehender Abonnenten. Die Synchronisierung bringt Personen ein, die sich bereits anderswo angemeldet haben. Ein Anmeldeformular ermöglicht neuen Besuchern eine direkte Anmeldung in Ihrem Shop.

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

Mit Clerk.js #

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

Das folgende Beispiel abonniert die eingegebene E-Mail-Adresse global. Sie können das Formular in eine Fußzeile, auf die Startseite oder in ein Popup einfügen und es an das Design Ihres Shops anpassen.

<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="Ihre 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 = "Abonnieren nicht möglich. 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 zu abonnieren, fügen Sie list_id hinzu. Listen-IDs finden Sie unter Email > Subscribers > Lists.

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

Lesen Sie mehr unter Subscribers.

Mit der API #

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

Rufen Sie subscriber/subscribe auf, um eine E-Mail-Adresse als Abonnenten 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"
  }'

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

Abmelden #

Abmelden ist der Vorgang, wie Empfänger sich von Marketing-E-Mails abmelden können.

Jede Marketing-E-Mail muss eine Möglichkeit enthalten, sich abzumelden. Wie Sie es verwalten, hängt davon ab, ob der Empfänger einen Link in einer E-Mail anklickt oder Ihr Backend das Opt-out verwaltet.

Externe Plattform verwenden — Nutzen Sie weiterhin den vorhandenen Abmeldelink Ihrer Plattform. Klaviyo, Mailchimp oder Ihre andere Plattform übernimmt das Opt-out und hält die Abonnentenliste synchron.

Versand über Clerk.io — Fügen Sie den Abmeldelink von Clerk.io dem Design hinzu. Wenn Sie Ask Clerk.io nutzen, bitten Sie es, einen Abmeldelink einzufügen, und es übernimmt das für Sie.

Abmeldelinks verwenden #

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

Die Variable {{ email }} wird zur Sendezeit durch die jeweilige E-Mail-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 der Abmeldung auf Ihre 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 #

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

Das ist nützlich für individuelle 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"
  }'

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

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

Store-Personalisierung #

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

Gehen Sie zu Email > Configuration > Personalization, um Ihr Shop-Logo festzulegen. Sie können ein Bild manuell hochladen oder Automatisch von der Website erkennen auswählen, damit Clerk.io es auf Ihrem Storefront findet.

Das hier festgelegte Logo wird als Standardlogo in von Clerk.io erstellten E-Mail-Designs verwendet. Wenn Sie Designs manuell erstellen, können Sie die Logo-URL weiterhin direkt im Template-Markup referenzieren.

E-Mail-Designs #

Ein E-Mail-Design ist das visuelle Template, das Clerk.io zum Erstellen der zu versendenden E-Mail verwendet.

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

Mit Ask Clerk.io Design Studio #

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

Beschreiben Sie in einfacher Sprache, was Sie möchten – z.B. Layout, Farben, welche Produkte angezeigt werden und wie Angebotspreise dargestellt werden sollen. Design Studio erstellt live eine Vorschau im Chat, die Sie prüfen und anpassen können.

Sie können auch auf Ihre Website verweisen oder einen Screenshot anhängen. Dieser wird als visuelle Referenz genutzt, was deutlich schneller ist, als Ihren Grünton wie einen Verdächtigen bei der Polizei zu beschreiben.

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 E-Mail-Clients 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 an Desktop, Tablet und Mobile an.

Statische Bilder #

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

Hochgeladene Bilder erhalten eine Template-Referenz 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 es bitten, das Bild hochzuladen und im Design zu verwenden.

E-Mail-Identifikation #

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

Diese ist erforderlich für automatisierte Flows wie Browse Abandonment, Welcome Series und Abandoned Cart. Ohne sie kann Clerk.io zwar wissen, was ein Besucher getan hat, aber nicht, wen es dazu kontaktieren soll.

Jeder Besucher auf Ihrer Seite erhält eine Besucher-ID. Zuerst ist diese ID anonym. Die E-Mail-Identifikation verbindet sie mit einer E-Mail-Adresse, wenn der Besucher diese eingibt oder sich als eingeloggter Nutzer zurückmeldet.

Mit Clerk.js #

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

Wenn Sie eines der installierbaren Clerk.io-Plugins verwenden, 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 E-Mail-Eingabefelder und protokolliert die Adresse, wenn ein Besucher eine eingibt.

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

Wenn ein Kunde bereits eingeloggt ist, protokollieren Sie 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');
}

Ersetzen Sie CUSTOMER_EMAIL durch die tatsächliche E-Mail-Adresse Ihrer Plattform. Blenden Sie das Skript nur ein, wenn eine E-Mail-Adresse verfügbar ist.

Mit der API #

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

Rufen Sie dies einmal pro Sitzung auf, wenn eine E-Mail-Adresse verfügbar ist. Das 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 der aktuellen Sitzung.

Wenn Sie die API verwenden, sind Sie selbst für die Erzeugung und Verwaltung der Besucher-ID verantwortlich. Details dazu finden Sie im Tracking Guide.

Warenkorb-Tracking #

Das Warenkorb-Tracking teilt Clerk.io mit, was ein Besucher aktuell in seinem Warenkorb hat.

Dies ist erforderlich für Abandoned Cart E-Mails. Wenn ein Besucher ohne Kauf abbricht, kann Clerk.io die Inhalte des Warenkorbs nur dann versenden, wenn der Warenkorb auch erfasst wurde.

Rufen Sie das Warenkorb-Tracking immer dann auf, wenn sich der Warenkorb ändert. Das schließt das Hinzufügen, Entfernen eines Produkts oder ein vollständiges Update des Warenkorbs ein.

Mit Clerk.js #

Wenn Sie das Magento 1, Magento 2, PrestaShop- oder WooCommerce-Plugin nutzen, wird das Warenkorb-Tracking automatisch vorgenommen.

Für andere Setups teilen Sie Clerk.io den aktuellen Warenkorb mit der Methode set mit. Jeder Aufruf ist der aktuellen Besuchersitzung zugeordnet.

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

Lesen Sie mehr in der Shopping Cart Integration.

Mit der API #

Verwenden Sie log/cart/update, um den Warenkorb auf den aktuellen Stand zu setzen.

Rufen Sie dies bei jeder Änderung des Warenkorbs auf und übergeben Sie die vollständige 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.