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 di 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 di embed ottimizzati per i flussi di email più comuni.

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

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

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

Le raccomandazioni email incorporate sono costituite da un Embed, dove configuri il nome, la logica dei prodotti e altre impostazioni, e da un Design che controlla l’aspetto delle raccomandazioni.

Una volta configurati Embed e Design, puoi semplicemente copiare e incollare l’embedcode nella tua piattaforma email per visualizzare i risultati in quella posizione.

Configurazione #

Ogni raccomandazione email incorporata dispone di varie impostazioni che ti consentono di adattarla alla tua configurazione email unica.

Logiche di prodotto #

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

Si va da logiche generiche come Best Sellers o Hot Products a quelle completamente personalizzate come Recommendations Based On Orders. Le Product Logics vengono configurate nella pagina Embed di una raccomandazione email incorporata.

Piattaforma e-mail #

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

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

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

Se la tua piattaforma email non fa ancora parte dell’elenco delle integrazioni, seleziona semplicemente Other e aggiungi i merge tag manualmente.

Argomenti extra #

Alcune logiche richiedono di aggiungere informazioni extra, 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 effettuata una chiamata all’API di Clerk per recuperare i prodotti, che vengono renderizzati tramite il design che hai configurato in un browser headless e restituiti come immagine da visualizzare nell’e-mail.

Struttura #

Di seguito trovi 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 indirizzano il cliente attraverso il sistema di tracciamento di Clerk, e poi alla pagina del prodotto.

Le immagini utilizzano chiamate a campaigns/embed che restituiscono l’immagine da visualizzare nell’e-mail.

Parametri #

Questi sono i dati utilizzati nelle chiamate API:

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

Poiché il link dell’immagine rimane lo stesso, molti client email lo salveranno nella cache e mostreranno sempre gli stessi prodotti invece di effettuare una nuova chiamata API. Il cachebuster garantisce che i client email vedano ogni email come una richiesta unica.

Tracciamento #

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

Struttura #

L’URL di destinazione include:

• I codici UTM di Google Analytics
• I parametri di tracciamento di Clerk, identificati 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 adattati 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 un embed email viene renderizzato individualmente tramite un browser headless e restituito come immagine. Per questo motivo, il design rappresenta una singola scheda prodotto piuttosto che un elenco, e attributi come name, image e price vengono richiamati direttamente senza il prefisso product. utilizzato nei Code Designs standard.

Qui sotto trovi un semplice punto di partenza per creare un design di email embed utilizzando HTML, CSS e Liquid. Puoi personalizzare lo stile e la struttura in base 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;
}