Embeds

Grundlagen #

Diese werden verwendet, um Empfehlungen direkt in jede Email innerhalb eines beliebigen E-Mail-Clients einzubetten. Es ist der einfachste und flexibelste Weg, bestehende Email-Flows mit Clerks AI zu verbessern.

Erste Schritte #

Wenn Sie die Seite Email Embeds zum ersten Mal öffnen, führt Sie ein hilfreicher Einrichtungsassistent durch das Erstellen von Best-Practice-Embeds für gängige Email-Flows.

Der Assistent gruppiert Embeds nach Typ des Email-Flows, sodass es einfach ist, diejenigen auszuwählen, 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, und 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 anzuzeigen.

Konfiguration #

Jede eingebettete E-Mail-Empfehlung verfügt über eine Reihe von Einstellungen, mit denen Sie sie an 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 Empfehlungen wie Best Sellers oder Hot Products bis hin zu vollständig personalisierten, wie Recommendations Based On Orders. Die Produktlogiken werden auf der Embed-Seite einer eingebetteten Email-Empfehlung konfiguriert.

E-Mail-Plattform #

Clerk verfügt über Integrationen mit einer Vielzahl von E-Mail-Plattformen. Für eingebettete Empfehlungen werden die Integrationen genutzt, um zwei spezifische Informationen vom E-Mail-Client über Merge-Tags abzurufen:

• Die E-Mail-Adresse des Empfängers, um mit spezifischen Produktlogiken zu personalisieren.
• Einen Cache-Buster, der für jede versendete Email einen eindeutigen Wert hinzufügt, um das Caching zu vermeiden, das sonst dieselben Produkte in mehreren E-Mails anzeigen würde.

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

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

Zusätzliche Argumente #

Einige Logiken erfordern die Angabe zusätzlicher Informationen, wie Kategorie-IDs oder Schlüsselwörter, die im Tab Insert into e-mail hinzugefügt werden.

Embedcode #

Wenn ein Nutzer eine Email mit einem Embedcode öffnet, wird ein Aufruf an Clerks API gemacht, um die Produkte abzurufen, die dann über das von Ihnen konfigurierte Design in einem Headless-Browser gerendert und als Bild zurückgegeben werden, das in der Email angezeigt wird.

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

<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 an campaigns/click, die den Kunden durch das Tracking-System von Clerk leiten und dann zur Produktseite weiterleiten.

Bilder verwenden Aufrufe an campaigns/embed, die das Bild zurückgeben, das in der Email angezeigt wird.

Parameter #

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

Der Cachebuster ist notwendig, da ein einzelner E-Mail-Empfehlungs-Embedcode zum Anzeigen von Produkten in tausenden Emails verwendet werden kann, da einfach API-Aufrufe an Clerk gemacht werden, wenn die Email von einem Nutzer geöffnet wird.

Da der Bild-Link gleich bleibt, werden ihn viele E-Mail-Clients zwischenspeichern und statt eines neuen API-Aufrufs dieselben Produkte anzeigen. Der Cache-Buster stellt sicher, dass die Email-Clients jede Email als individuelle Anforderung erkennen.

Tracking #

Die Leistung eingebetteter Empfehlungen wird über die URL-Parameter verfolgt, die enthalten sind, wenn der Benutzer zur Produktseite weitergeleitet wird.

Struktur #

Die Landing-URL enthält:

• Google Analytics UTM-Codes
• Clerks eigene Tracking-Parameter, die durch Clerk.js identifiziert 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 können in Tracking Code unter Insert into e-mail angepasst werden, während die Clerk-Parameter automatisch in der API-Anfrage an campaigns/click hinzugefügt werden.

Die enthaltenen Parameter sind:

Startdesign #

Jedes Produkt in einem Email-Embed wird individuell über einen Headless-Browser gerendert und als Bild zurückgegeben. Aus diesem Grund stellt das Design eine einzelne Produktkarte dar, nicht eine Liste, und Attribute wie name, image und price werden direkt und ohne das Präfix product. wie bei Code Designs angesprochen.

Nachfolgend finden Sie einen einfachen Einstiegspunkt für das Erstellen eines Email-Embed-Designs mit HTML, CSS und Liquid. Sie können das Styling und die Struktur an Ihre 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;
}