Embeds

Grundlagen #

Diese werden verwendet, um Empfehlungen direkt in jede E-Mail in jedem E-Mail-Client einzubetten. Es ist der einfachste und flexibelste Weg, bestehende E-Mail-Flows durch die KI von Clerk zu verbessern.

Erste Schritte #

Wenn Sie die Seite Email Embeds zum ersten Mal öffnen, führt Sie ein hilfreicher Setup-Assistent durch das Erstellen der empfohlenen Embeds für typische E-Mail-Flows.

Der Assistent gruppiert Embeds nach Art des E-Mail-Flows, sodass Sie einfach diejenigen auswählen können, die zu Ihrem E-Mail-Marketing-Setup passen:

Wählen Sie die Embeds aus, die Sie erstellen möchten, und klicken Sie auf Create selected. Falls noch kein E-Mail-Design existiert, wird automatisch ein Standarddesign erstellt, das Sie später im Design Editor anpassen können.

Alternativ klicken Sie auf or create your own, um ein Embed manuell von Grund auf zu konfigurieren.

Eingebettete E-Mail-Empfehlungen bestehen aus einem Embed, in dem Sie Name, Produktlogik und weitere Einstellungen konfigurieren, sowie einem Design, das das Erscheinungsbild der Empfehlungen steuert.

Sobald Sie Ihr Embed und Design konfiguriert haben, können Sie einfach den Embedcode in Ihre E-Mail-Plattform kopieren und einfügen, um die Ergebnisse an dieser Stelle einzublenden.

Konfiguration #

Jede eingebettete E-Mail-Empfehlung verfügt über mehrere Einstellungen, mit denen Sie sie auf Ihr individuelles E-Mail-Setup anpassen können.

Produktlogiken #

Email bietet eine große Auswahl an Product Logics, die Sie verwenden können, um Empfehlungen anzuzeigen.

Diese reichen von allgemeinen wie Best Sellers oder Hot Products bis zu vollständig personalisierten wie Recommendations Based On Orders. Die Produktlogiken werden auf der Embed-Seite einer eingebetteten E-Mail-Empfehlung konfiguriert.

E-Mail-Plattform #

Clerk verfügt über Integrationen mit einer Vielzahl von E-Mail-Plattformen. Bei eingebetteten Empfehlungen werden die Integrationen genutzt, um zwei spezifische Informationen aus dem E-Mail-Client zu ziehen, mittels Merge-Tags:

• Die E-Mail-Adresse des Empfängers, zur Personalisierung mit spezifischen Produktlogiken.
• Ein Cachebuster, der für jede versandte E-Mail einen einzigartigen Wert hinzufügt, um Caching zu verhindern, andernfalls würden dieselben Produkte in mehreren E-Mails angezeigt.

Durch die Auswahl Ihrer Plattform aus der Liste werden diese Merge-Tags automatisch zum Embedcode hinzugefügt.

Wenn Ihre E-Mail-Plattform nicht bereits Teil der Integrationsliste ist, wählen Sie einfach Other und fügen Sie die Merge-Tags manuell hinzu.

Zusätzliche Argumente #

Einige Logiken erfordern die Angabe weiterer Informationen, wie Kategorie-IDs oder Schlüsselwörter, die Sie im Tab Insert into e-mail hinzufügen.

Embedcode #

Wenn ein Nutzer eine E-Mail mit einem Embedcode öffnet, wird ein Aufruf an die Clerk API gemacht, um die Produkte abzurufen. Diese werden durch das von Ihnen konfigurierte Design in einem Headless-Browser gerendert und als Bild zur Anzeige in der E-Mail zurückgegeben.

Struktur #

Nachfolgend sehen Sie ein Beispiel für einen Embedcode, der 2 Produkte anzeigt. Jedes Produkt besteht aus einem Link zur Produktseite und einem Bild, das das Produkt zeigt.

<center> 
    <a  class="clerk-email-product" 
        href="https://api.clerk.io/v2/campaigns/click?key=Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c&embed=personalised-recommendations&email={{ email }}&n=0&v={% current_day %}{% current_month_name %}{% current_year %}&append=utm_source%3Dclerk%26utm_medium%3Demail%26utm_campaign%3Dpersonalised-recommendations%26utm_content%3Dclerk-recommendations&keywords=star%20wars" 
        target="_blank" 
        style="text-decoration: none; ">
        <img src="https://api.clerk.io/v2/campaigns/embed?key=Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c&embed=personalised-recommendations&email={{ email }}&n=0&v={% current_day %}{% current_month_name %}{% current_year %}&append=utm_source%3Dclerk%26utm_medium%3Demail%26utm_campaign%3Dpersonalised-recommendations%26utm_content%3Dclerk-recommendations&keywords=star%20wars" />
    </a>
    <a  class="clerk-email-product" 
        href="https://api.clerk.io/v2/campaigns/click?key=Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c&embed=personalised-recommendations&email={{ email }}&n=1&v={% current_day %}{% current_month_name %}{% current_year %}&append=utm_source%3Dclerk%26utm_medium%3Demail%26utm_campaign%3Dpersonalised-recommendations%26utm_content%3Dclerk-recommendations&keywords=star%20wars" 
        target="_blank" 
        style="text-decoration: none; ">
        <img src="https://api.clerk.io/v2/campaigns/embed?key=Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c&embed=personalised-recommendations&email={{ email }}&n=1&v={% current_day %}{% current_month_name %}{% current_year %}&append=utm_source%3Dclerk%26utm_medium%3Demail%26utm_campaign%3Dpersonalised-recommendations%26utm_content%3Dclerk-recommendations&keywords=star%20wars" />
    </a>
</center>

Links verwenden Aufrufe zu campaigns/click, die den Kunden durch das Tracking-System von Clerk leiten und dann zur Produktseite weiterleiten.

Bilder verwenden Aufrufe zu campaigns/embed, die das Bild zur Anzeige in der E-Mail zurückgeben.

Parameter #

Dies sind die Datenpunkte, die in den API-Aufrufen verwendet werden:

Der Cachebuster ist notwendig, weil ein einzelner E-Mail-Empfehlungs-Embedcode verwendet werden kann, um Produkte in Tausenden von E-Mails anzuzeigen, da dieser einfach API-Aufrufe an Clerk ausführt, wenn die E-Mail vom Nutzer geöffnet wird.

Da der Bild-Link gleich bleibt, cachen viele E-Mail-Clients dieses und zeigen sonst immer die gleichen Produkte an, anstatt den neuen API-Aufruf zu machen. Der Cachebuster stellt sicher, dass die E-Mail-Clients jede E-Mail als eigene Anfrage sehen.

Tracking #

Die Performance der eingebetteten Empfehlungen wird über die URL-Parameter nachverfolgt, wenn der Nutzer zur Produktseite weitergeleitet wird.

Struktur #

Die Ziel-URL enthält:

• Google Analytics UTM-Codes
• Spezielle Tracking-Parameter von Clerk, die durch Clerk.js erkannt werden.

Hier ein Beispiel für eine URL:

https://www.theschwartz.com/?utm_source=clerk&utm_medium=email&utm_campaign=personalised-recommendations&utm_content=clerk-recommendations&clerk_product=28081&clerk_labels=Personalised+Recommendations&clerk_api=recommendations%2Akeywords&clerk_n=0&clerk_external=1&clerk_email=gAAAAABnoLO_YDvTRvfT4ed8pRIYjqQzo38JtrdwRIM-VYDuJO8awxImzfgDB3M-Jfr29WUoayvYNV4XxqixK3-bvukeYy6uDEgRfvuomLxhpVLVn6xoUPk%3D

Parameter #

Die UTM-Parameter für Google Analytics lassen sich im Tracking Code unter Insert into e-mail für Ihr gewünschtes Tracking anpassen, während die Clerk-Parameter automatisch im API-Request zu campaigns/click hinzugefügt werden.

Die enthaltenen Parameter sind:

Startdesign #

Jedes Produkt in einem E-Mail-Embed wird einzeln in einem Headless-Browser gerendert und als Bild zurückgegeben. Deshalb stellt das Design eine einzige Produktkarte dar (kein Produktlisten-Array), und Attribute wie name, image und price werden direkt und ohne das Präfix product. angesprochen, wie es bei normalen Code Designs üblich ist.

Nachfolgend ein einfaches Beispiel für ein E-Mail-Embed-Design mit HTML, CSS und Liquid. Sie können das Styling und den Aufbau individuell Ihrer Marke anpassen – direkt im Design Editor oder als Code Design.

HTML #

<div class="clerk-email-card">
  <div class="clerk-email-image-wrapper">
    <img class="clerk-email-image" src="{{ image }}" alt="{{ name }}" />
    {% if price < list_price %}
      <div class="clerk-email-badge">Sale</div>
    {% endif %}
  </div>
  <div class="clerk-email-info">
    <div class="clerk-email-name">{{ name }}</div>
    <div class="clerk-email-pricing">
      {% if price < list_price %}
        <span class="clerk-email-list-price">{{ list_price | money }}</span>
      {% endif %}
      <span class="clerk-email-price">{{ price | money }}</span>
    </div>
  </div>
</div>

CSS #

.clerk-email-card {
  width: 200px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  text-align: center;
}

.clerk-email-image-wrapper {
  position: relative;
}

.clerk-email-image {
  width: 100%;
  height: auto;
  display: block;
}

.clerk-email-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.clerk-email-info {
  padding: 10px 5px;
}

.clerk-email-name {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clerk-email-pricing {
  font-size: 15px;
}

.clerk-email-list-price {
  text-decoration: line-through;
  color: #999999;
  margin-right: 5px;
  font-size: 13px;
}

.clerk-email-price {
  font-weight: bold;
  color: #333333;
}