Embeds

Grundlagen #

Diese werden verwendet, um Empfehlungen direkt in jede E-Mail innerhalb jedes E-Mail-Clients einzubetten. Es ist der einfachste und flexibelste Weg, bestehende E-Mail-Flows mit Clerks KI 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 E-Mail-Flows.

Der Assistent gruppiert Embeds nach E-Mail-Flow-Typ, sodass Sie ganz einfach die passenden zu Ihrer E-Mail-Marketing-Konfiguration auswählen können:

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 können Sie auf or create your own klicken, um ein Embed manuell von Grund auf zu konfigurieren.

Eingebettete E-Mail-Empfehlungen bestehen aus einem Embed, in dem Sie den Namen, die Produktlogik und weitere Einstellungen konfigurieren, sowie einem Design, das das Aussehen und Verhalten der Empfehlungen steuert.

Sobald Sie Ihr Embed und Design konfiguriert haben, können Sie den Embedcode einfach 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 Ihre individuelle E-Mail-Konfiguration anpassen können.

Produktlogiken #

Email bietet eine große Auswahl an Product Logics, die Sie für Empfehlungen nutzen können.

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

E-Mail-Plattform #

Clerk bietet Integrationen mit einer Vielzahl von E-Mail-Plattformen. Für eingebettete Empfehlungen werden Integrationen genutzt, um zwei spezifische Informationen vom E-Mail-Client per Merge-Tags zu ziehen:

• Die E-Mail-Adresse des Empfängers, um mit bestimmten Produktlogiken zu personalisieren.
• Einen Cachebuster, der für jede versandte E-Mail einen eindeutigen Wert hinzufügt, um 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 in den Embedcode eingefügt.

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

Extra-Argumente #

Einige Logics erfordern zusätzliche Informationen wie Kategorie-IDs oder Keywords, die Sie im Tab Insert into e-mail hinzufügen.

Embedcode #

Wenn ein Nutzer eine E-Mail mit Embedcode öffnet, wird eine Anfrage an Clerks API gesendet, um die Produkte zu holen, die über das von Ihnen konfigurierte Design in einem Headless-Browser gerendert und als Bild in der E-Mail angezeigt werden.

Struktur #

Nachfolgend 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 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 darzustellende Bild in der E-Mail zurückgeben.

Parameter #

Dies sind die Datenpunkte, die für die API-Aufrufe 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 bei Öffnen der E-Mail durch einen Nutzer per API-Aufruf Produkte von Clerk geladen werden.

Da der Bildlink gleich bleibt, werden viele E-Mail-Clients ihn cachen und statt einer neuen Anfrage dieselben Produkte anzeigen. Der Cachebuster stellt sicher, dass E-Mail-Clients jede E-Mail als eindeutige Anfrage erkennen.

Tracking #

Die Performance eingebetteter Empfehlungen wird über die URL-Parameter nachverfolgt, die beim Routing zum Produkt in die URL integriert sind.

Struktur #

Die Ziel-URL enthält:

• Google Analytics UTM-Codes
• Clerk-eigene Tracking-Parameter, 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 können individuell angepasst werden, um das gewünschte Tracking in Tracking Code unter Insert into e-mail einzustellen, 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. Daher repräsentiert das Design eine einzelne Produktkarte und nicht eine Liste, und Attribute wie name, image und price werden direkt angesprochen, ohne das in Standard- Code Designs verwendete Präfix product..

Nachfolgend ein einfaches Startdesign für einen Mail-Embed unter Verwendung von HTML, CSS und Liquid. Sie können das Styling und die Struktur direkt im Design Editor oder als Code Design anpassen.

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;
}