Embeds

Nozioni di base #

Questi vengono utilizzati per incorporare le raccomandazioni direttamente in qualsiasi email all’interno di qualsiasi client di posta elettronica. È il modo più semplice e flessibile per migliorare i flussi e-mail esistenti utilizzando Clerks AI.

Per iniziare #

Quando apri per la prima volta la pagina Email Embeds, un pratico wizard ti guida nella creazione delle embeds secondo le best practice per i principali flussi di email.

Il wizard raggruppa le embeds per tipo di flusso email, facilitando la selezione di quelle che corrispondono alla tua configurazione di email marketing:

Seleziona le embeds che desideri creare e clicca su Create selected. Se non esiste ancora un design e-mail, ne viene creato automaticamente uno standard che potrai personalizzare successivamente nel Design Editor.

In alternativa, clicca su or create your own per configurare manualmente una embed da zero.

Le raccomandazioni incorporate nelle email consistono in un Embed dove configuri il nome, la logica di prodotto e altre impostazioni, e in un Design che controlla l’aspetto delle raccomandazioni.

Una volta configurato Embed e Design, puoi semplicemente copiare e incollare l’embedcode nella tua piattaforma e-mail per mostrare i risultati in quella posizione.

Configurazione #

Ogni raccomandazione e-mail incorporata dispone di una serie di impostazioni che ti consentono di adattarla alla tua configurazione email unica.

Product logics #

Email offre un ampio set di Product Logics che puoi utilizzare per mostrare raccomandazioni.

Vanno da logiche generali, come Best Sellers o Hot Products, a logiche completamente personalizzate come Recommendations Based On Orders. Le Product Logics vengono configurate nella pagina Embed di una raccomandazione incorporata.

Piattaforma E-mail #

Clerk ha integrazioni con una vasta gamma di piattaforme e-mail. Per le raccomandazioni incorporate, le integrazioni vengono utilizzate per prelevare due informazioni specifiche dal client e-mail tramite i merge tags:

• L’indirizzo e-mail del destinatario, per la personalizzazione tramite specifiche product logics.
• Un cachebuster che aggiunge un valore univoco per ogni email inviata, per evitare la memorizzazione nella cache, che altrimenti mostrerebbe gli stessi prodotti in più email.

Selezionando la tua piattaforma dall’elenco, questi merge tag vengono aggiunti automaticamente all’embedcode.

Se la tua piattaforma di posta non è già nell’elenco delle integrazioni, seleziona Other e aggiungi manualmente i merge tag.

Argomenti extra #

Alcune logics richiedono di aggiungere informazioni aggiuntive, come ID di categoria o parole chiave, che vengono aggiunte nella scheda Insert into e-mail.

Embedcode #

Quando un utente apre un’email contenente un embedcode, viene fatta una chiamata all’API di Clerk per recuperare i prodotti, che vengono resi tramite il design che hai configurato in un browser headless e restituiti come immagine da mostrare nell’e-mail.

Struttura #

Di seguito un esempio di embedcode che mostra 2 prodotti. Ogni prodotto consiste in un link alla pagina del prodotto e un’immagine che mostra il prodotto.

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

I link utilizzano chiamate a campaigns/click che instradano il cliente tramite il sistema di tracciamento di Clerk, per poi indirizzarlo verso la pagina del prodotto.

Le immagini utilizzano chiamate a campaigns/embed, che restituisce l’immagine da visualizzare all’interno dell’e-mail.

Parametri #

Questi sono i dati utilizzati nelle chiamate API:

Il cachebuster è necessario perché un singolo embedcode di raccomandazioni per email può essere usato per mostrare prodotti in migliaia di email, poiché effettua chiamate API a Clerk quando l’email viene aperta da un utente.

Poiché il link all’immagine resta uguale, molti client e-mail la memorizzano in cache e mostrano gli stessi prodotti invece di effettuare una nuova chiamata API. Il cachebuster assicura che i client e-mail percepiscano ogni email come una richiesta unica.

Tracking #

Le performance delle raccomandazioni incorporate sono tracciate tramite i parametri URL inclusi quando l’utente viene indirizzato alla pagina del prodotto.

Struttura #

L’URL di destinazione include:

• Codici UTM di Google Analytics
• Parametri di tracciamento di Clerk riconosciuti da Clerk.js.

Ecco un esempio di 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

Parametri #

I parametri UTM per Google Analytics possono essere modificati per adattarsi al tracciamento desiderato in Tracking Code sotto Insert into e-mail, mentre i parametri Clerk vengono aggiunti automaticamente nella richiesta API a campaigns/click.

I parametri inclusi sono:

Design iniziale #

Ogni prodotto in una email embed viene renderizzato singolarmente tramite un browser headless e restituito come immagine. Per questo motivo, il design rappresenta una singola card prodotto invece di una lista, e attributi come name, image e price vengono richiamati direttamente senza il prefisso product. usato nei Code Designs standard.

Di seguito un semplice punto di partenza per creare un design per email embed utilizzando HTML, CSS e Liquid. Puoi personalizzare lo stile e la struttura per adattarli al tuo brand, direttamente nel Design Editor o come 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;
}