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 te guía para crear incrustaciones basadas en buenas prácticas para los flujos de correo electrónico más comunes.

El asistente agrupa las incrustaciones por tipo de flujo de correo electrónico, facilitando la selección de las que coincidan con la configuración de tu marketing por email:

Selecciona las incrustaciones que deseas crear y haz clic en Create selected. Si aún no existe un diseño de email, se crea un diseño estándar automáticamente que puedes personalizar más tarde en el Editor de diseño.

Alternativamente, haz clic en or create your own para configurar manualmente una incrustación desde cero.

Las recomendaciones incrustadas en emails constan de un Embed donde configuras el nombre, lógica de productos y otros ajustes, y de un Design que controla el estilo y la apariencia de las recomendaciones.

Una vez que hayas configurado tu Embed y Design, simplemente copia y pega el embedcode en tu plataforma de email para mostrar los resultados en ese lugar.

Configuración #

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

Lógicas de producto #

Email incluye un amplio conjunto de Product Logics que puedes utilizar para mostrar recomendaciones.

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

Plataforma de e-mail #

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

• La dirección de email del destinatario, para personalizar con lógicas de producto específicas.
• Un cachebuster que agrega un valor único para cada email enviado, para evitar el almacenamiento en caché, lo cual mostraría los mismos productos en múltiples emails.

Al elegir tu plataforma de la lista, estas merge tags se añaden automáticamente al embedcode.

Si tu plataforma de email no está dentro de 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, que se añaden en la pestaña Insert into e-mail.

Embedcode #

Cuando un usuario abre un email que contiene un embedcode, se hace una llamada a la API de Clerk para obtener los productos, que se renderizan a través del diseño que hayas configurado en un navegador headless, y se devuelven como una imagen para mostrarse en el correo electrónico.

Estructura #

A continuación se muestra un ejemplo de 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 utilizan llamadas a campaigns/click que dirigen al cliente a través del sistema de seguimiento de Clerk y luego a la página del producto.

Las imágenes utilizan llamadas a campaigns/embed que devuelven la imagen que se mostrará en el email.

Parámetros #

Estos son los puntos de datos utilizados en las llamadas a la API:

El cachebuster es necesario porque un único embedcode de recomendaciones de email puede usarse para mostrar productos en miles de correos, ya que simplemente realiza llamadas a la API de Clerk cuando el usuario abre el email.

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

Seguimiento #

El desempeño de las recomendaciones incrustadas se rastrea a través de los parámetros de URL incluidos cuando el usuario es dirigido a la página del producto.

Estructura #

La URL de destino incluye:

• Códigos UTM de Google Analytics
• Parámetros de seguimiento propios de Clerk 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 pueden adaptarse al seguimiento que desees en Tracking Code dentro de Insert into e-mail, mientras que los parámetros de Clerk se agregan automáticamente en la solicitud API a campaigns/click.

Los parámetros incluidos son:

Diseño inicial #

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

A continuación, un punto de inicio sencillo para crear un diseño de email embed usando HTML, CSS y Liquid. Puedes personalizar el estilo y la estructura para ajustarte a 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;
}