Embeds

Basi #

Questi vengono utilizzati per incorporare le recommendations direttamente in qualsiasi email all’interno di qualsiasi client email. È il modo più semplice e flessibile per migliorare i flussi email esistenti utilizzando l’IA di Clerk.

Per iniziare #

Quando apri per la prima volta la pagina Email Embeds, una procedura guidata ti accompagna nella creazione degli embed seguendo le migliori pratiche per i flussi email più comuni.

La procedura guidata raggruppa gli embed per tipo di flusso email, rendendo facile selezionare quelli che corrispondono alla tua configurazione di email marketing:

Seleziona gli embed che desideri creare e clicca su Create selected. Se non esiste ancora un design email, verrà creato automaticamente un design standard che potrai successivamente personalizzare nel Design Editor.

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

Le recommendations email incorporate consistono in un Embed dove configuri nome, logica prodotto e altre impostazioni, e un Design che controlla aspetto e stile delle recommendations.

Dopo aver configurato Embed e Design, puoi semplicemente copiare e incollare l’embedcode nella tua piattaforma email, per mostrare i risultati in quella posizione.

Configurazione #

Ogni recommendation email incorporata ha una serie di impostazioni che ti permette di abbinarla alla tua specifica configurazione email.

Logiche di prodotto #

Email offre un ampio set di Product Logics che puoi usare per mostrare recommendations.

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

E-mail Platform #

Clerk ha integrazioni con una vasta gamma di piattaforme e-mail. Per le recommendations incorporate, le integrazioni vengono usate per estrarre due informazioni specifiche dal client email, tramite merge tags:

• L’indirizzo email del destinatario, per personalizzare con logiche prodotto specifiche.
• Un cachebuster che aggiunge un valore unico per ogni email inviata, per evitare il caching, che altrimenti mostrerebbe gli stessi prodotti in più email.

Scegliendo la tua piattaforma dalla lista, questi merge tags vengono aggiunti automaticamente all’embedcode.

Se la tua piattaforma email non è già tra le integrazioni, scegli semplicemente Other e aggiungi manualmente i merge tags.

Argomenti extra #

Alcune logiche richiedono di aggiungere informazioni extra, come ID di categoria o parole chiave, che vengono inserite nella scheda Insert into e-mail.

Embedcode #

Quando un utente apre una email contenente un embedcode, viene effettuata una chiamata alle 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’email.

Struttura #

Di seguito un esempio di embedcode che mostra 2 prodotti. Ogni prodotto consiste in un link alla pagina 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 attraverso il sistema di tracciamento Clerk, e poi verso la pagina prodotto.

Le immagini utilizzano chiamate a campaigns/embed che restituiscono l’immagine da mostrare nell’email.

Parametri #

Questi sono i dati utilizzati nelle chiamate API:

Il cachebuster è necessario perché un singolo embedcode per recommendations e-mail può essere usato per mostrare prodotti in migliaia di email, dato che effettua semplicemente chiamate API a Clerk quando l’email viene aperta da un utente.

Poiché il link immagine resta uguale, molti client email lo memorizzeranno nella cache e mostreranno sempre gli stessi prodotti invece di fare una nuova chiamata API. Il cachebuster fa sì che i client e-mail vedano ciascuna email come una richiesta unica.

Tracking #

Le performance delle recommendations incorporate vengono tracciate tramite i parametri URL inclusi quando l’utente viene inviato alla pagina prodotto.

Struttura #

L’URL di destinazione include:

• I codici UTM Google Analytics
• I 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 tracking 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 un embed email viene reso singolarmente tramite un browser headless e restituito come immagine. Per questo, il design rappresenta una singola card prodotto, non una lista, e attributi come name, image e price sono accessibili direttamente, senza il prefisso product. come nei Code Designs standard.

Di seguito trovi un semplice punto di partenza per creare un design email embed usando HTML, CSS e Liquid. Puoi personalizzare stile e 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;
}