Embeds

Conceptos básicos #

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

Primeros pasos #

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

El asistente agrupa los embebidos por tipo de flujo de email, facilitando seleccionar los que mejor se adapten a la configuración de tu marketing por correo electrónico:

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

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

Las recomendaciones embebidas en email consisten en un Embed donde configuras el nombre, la lógica de productos y otros ajustes, y un Design que controla el aspecto de las recomendaciones.

Una vez configurado tu Embed y Design, simplemente puedes copiar y pegar el embedcode en tu plataforma de email para mostrar los resultados en ese lugar.

Configuración #

Cada recomendación embebida en email tiene varios ajustes que te permiten adaptarla a tu flujo único de correo electrónico.

Lógicas de productos #

Email incluye un amplio conjunto de Lógicas de Productos que puedes usar para mostrar recomendaciones.

Van desde opciones generales, como Best Sellers o Hot Products, hasta opciones completamente personalizadas como Recommendations Based On Orders. Las Lógicas de Productos se configuran en la página del Embed de una recomendación embebida en email.

Plataforma de e-mail #

Clerk tiene integraciones con una amplia gama de plataformas de e-mail. Para las recomendaciones embebidas, las integraciones se usan para obtener dos piezas de información específicas desde el cliente de correo, mediante merge tags:

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

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

Si tu plataforma de email no aparece en la lista de integraciones, simplemente elige Other y añade los merge tags manualmente.

Argumentos extra #

Algunas lógicas requieren que añadas información extra, como ID de categoría o palabras clave, que se añaden en la pestaña Insert into e-mail.

Embedcode #

Cuando un usuario abre un correo electrónico que contiene un embedcode, se realiza una llamada a la API de Clerks para obtener los productos, los cuales se renderizan a través del diseño que configuraste en un navegador sin cabeza, y se devuelven como una imagen para mostrarse en el email.

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 usan llamadas a campaigns/click que redirigen 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 que se mostrará en el email.

Parámetros #

Estos son los datos usados en las llamadas a la API:

El cachebuster es necesario, porque un solo embedcode de recomendaciones de e-mail puede usarse para mostrar productos en miles de emails, ya que simplemente realiza llamadas a la API de Clerk cuando el usuario abre el correo.

Como el enlace de la imagen permanece igual, muchos clientes de correo lo almacenan en caché y muestran los mismos productos en lugar de realizar una nueva consulta a la API. El cachebuster garantiza que los clientes de correo electrónico vean cada email como una solicitud única.

Seguimiento #

El rendimiento de las recomendaciones embebidas se rastrea mediante 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
• Los parámetros de seguimiento propios de Clerk que son identificados por Clerk.js.

Aquí tienes un ejemplo de 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 de Google Analytics pueden adaptarse para el seguimiento que deseas en Tracking Code dentro de 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 un embed de email se renderiza individualmente a través de un navegador sin cabeza y se devuelve como imagen. Por esto, el diseño representa una tarjeta de producto única y no una lista, y los atributos como name, image y price se acceden directamente sin el prefijo product. utilizado en los Designs de código estándar.

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