Embeds

Conceptos básicos #

Estos se utilizan para incrustar recomendaciones directamente en cualquier email dentro de cualquier cliente de correo electrónico. Es la forma más fácil y flexible de mejorar los flujos de correo electrónico existentes utilizando la IA de Clerk.

Primeros pasos #

Cuando abres por primera vez la página de Email Embeds, un asistente de configuración útil te guía para crear incrustaciones de mejores prácticas para flujos de email comunes.

El asistente agrupa las incrustaciones por tipo de flujo de email, lo que facilita seleccionar las que coinciden con la configuración de tu marketing por correo electrónico:

Selecciona los embeds que deseas crear y haz clic en Create selected. Si aún no existe un diseño de correo electrónico, se creará automáticamente un diseño estándar que podrás personalizar después en el Editor de diseño.

Alternativamente, haz clic en or create your own para configurar manualmente un embed desde cero.

Las recomendaciones incrustadas en el email consisten en un Embed donde configuras el nombre, la lógica de producto y otros ajustes, y en un Diseño que controla la apariencia de las recomendaciones.

Una vez configurados tu Embed y Diseño, simplemente puedes copiar y pegar el embedcode en tu plataforma de correo, para mostrar resultados en ese lugar.

Configuración #

Cada recomendación incrustada por correo electrónico tiene varios ajustes que te permiten adaptarla a tu configuración única de email.

Lógicas de producto #

Email cuenta con una amplia gama de Product Logics que puedes usar para mostrar recomendaciones.

Van desde las generales, como Best Sellers o Hot Products, hasta completamente personalizadas como Recommendations Based On Orders. Las lógicas de producto se configuran en la página Embed de una recomendación de email incrustada.

Plataforma de correo electrónico #

Clerk tiene integraciones con una amplia variedad de plataformas de correo electrónico. Para recomendaciones incrustadas, las integraciones se usan para obtener dos piezas específicas de información del cliente de correo, a través de merge tags:

• La dirección de correo electrónico del destinatario, para personalizar utilizando lógicas de producto específicas.
• Un cachebuster que agrega un valor único para cada correo enviado, evitando el almacenamiento en caché, el cual de otro modo mostraría los mismos productos en varios correos.

Eligiendo tu plataforma de la lista, estas merge tags se agregan automáticamente al embedcode.

Si tu plataforma de correo electrónico no está en la lista de integraciones, simplemente elige Other y agrega las merge tags manualmente.

Argumentos extra #

Algunas lógicas requieren que agregues información adicional, como IDs de categoría o palabras clave, los cuales se añaden en la pestaña Insert into e-mail.

Embedcode #

Cuando un usuario abre un email que contiene un embedcode, se realiza una llamada al API de Clerk para obtener los productos, que se renderizan con el diseño que has configurado en un navegador headless, y se devuelven como una imagen para mostrar en el correo electrónico.

Estructura #

A continuación se muestra un ejemplo de un embedcode mostrando 2 productos. Cada producto consiste en un enlace a la página del producto y una imagen mostrando el producto.

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

Los enlaces usan llamadas a campaigns/click que redireccionan al cliente a través del sistema de seguimiento de Clerk, y luego a la página del producto.

Las imágenes usan llamadas a campaigns/embed que devuelven la imagen para mostrar en el correo electrónico.

Parámetros #

Estos son los datos utilizados en las llamadas API:

El cachebuster es necesario porque un embedcode de recomendaciones de un solo correo electrónico puede usarse para mostrar productos en miles de emails, ya que simplemente hace llamadas a la API de Clerk al abrir el correo por el usuario.

Como el enlace de la imagen permanece igual, muchos clientes de correo lo almacenarán en caché y mostrarán los mismos productos en vez de hacer una nueva llamada a la API. El cachebuster garantiza que los clientes de correo consideren cada correo como una solicitud única.

Seguimiento #

El rendimiento de las recomendaciones incrustadas se rastrea mediante los parámetros de URL incluidos cuando el usuario es dirigido a la página de producto.

Estructura #

La URL de destino incluye:

• Códigos UTM de Google Analytics
• Parámetros de seguimiento propios de Clerk que son identificados por Clerk.js.

Aquí tienes un ejemplo de una 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

Parámetros #

Los parámetros UTM para Google Analytics se pueden ajustar para adaptarse al seguimiento que desees en Tracking Code bajo Insert into e-mail, mientras que los parámetros de Clerk se añaden automáticamente en la solicitud API a campaigns/click.

Los parámetros incluidos son:

Diseño inicial #

Cada producto en una incrustación de email se renderiza individualmente a través de un navegador headless y se devuelve como imagen. Por eso, el diseño representa una sola tarjeta de producto en lugar de una lista, y los atributos como name, image y price se acceden directamente sin el prefijo product. utilizado en los Code Designs estándar.

A continuación se presenta un punto de partida simple para crear un diseño incrustado de email usando HTML, CSS y Liquid. Puedes personalizar el estilo y la estructura para que coincidan con tu marca, directamente en el Editor de diseño o como un 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;
}