Setup

Esta guía cubre la configuración necesaria antes de que Clerk.io pueda enviar emails en tu nombre.

Se aplica a campañas, flujos y activadores automáticos como Carrito Abandonado. Si solo deseas añadir recomendaciones de productos personalizadas a los emails enviados desde Klaviyo, Mailchimp u otra plataforma, ve a Embeds en su lugar.

Cada concepto a continuación explica qué hace, cuándo lo necesitas y cómo gestionarlo con Clerk.js o la API cuando se requiere código.

Elige la ruta de configuración adecuada #

Utiliza la sección que coincida con la tarea que necesitas completar:

• Verifica la configuración: Abre Setup Status para encontrar configuraciones faltantes o seguimiento roto.
• Envía desde tu dominio: Configura el Sender Domain y verifica sus registros DNS.
• Prepara los destinatarios: Sincroniza suscriptores existentes, impórtalos o recoge nuevos registros.
• Configura el envío de emails: Configura Store Personalization, Email Designs, Email Identification y Cart Tracking.

La configuración es basada en tareas. Por ejemplo, Carrito Abandonado requiere identificación por email y seguimiento de carrito, mientras que una campaña ocasional requiere un dominio de envío, suscriptores y un diseño de email.

Setup Status #

La pestaña Setup Status te da una visión general en tiempo real de tu configuración de email.

Encuéntrala en Email > Configuration > Setup Status. Muestra si las partes requeridas están configuradas, si el seguimiento está funcionando y si los emails se envían según lo esperado.

Cada elemento tiene un punto de color. Verde significa que todo está en orden, rojo que falta algo o está roto, y naranja es una advertencia que vale la pena revisar.

Las verificaciones se agrupan en tres áreas:

Configuration cubre la configuración principal. Esto incluye si el envío de emails está habilitado, qué dominio de envío está configurado, cuántos destinatarios suscritos hay disponibles y si los pasos activos de flujos tienen diseños de email.

On-site tracking muestra si el seguimiento de visitantes está funcionando. También muestra cuántos visitantes o carritos se han vinculado a una dirección de email en los últimos siete días.

Flows & sending muestra si los flujos activos están configurados, cuántos eventos de flujo están pendientes, cuántos emails se han enviado recientemente y si la cola de envío está sana.

Comienza aquí cuando los emails no se envíen como esperabas. Es lo más parecido a un panel de control que vigila en silencio el indicador de combustible.

Sender Domain #

El sender domain es el dominio que Clerk.io utiliza al enviar emails de tu tienda.

Antes de que Clerk.io pueda enviar desde ese dominio, debes autenticarlo con registros DNS. Estos registros indican a los servidores de correo receptores que Clerk.io está autorizado a enviar emails en tu nombre.

Sin esta prueba, los emails pueden ser rechazados o enviados a spam. Los servidores de correo son desconfiados por naturaleza, y francamente han visto de todo.

DNS Records #

Agrega los registros DNS requeridos en el host de tu dominio. Generalmente es donde gestionas tu dominio, como Cloudflare, GoDaddy, Route 53 o un proveedor similar.

Clerk.io utiliza tres tipos de registros DNS:

• SPF declara qué servicios pueden enviar email desde tu dominio.
• DKIM añade una firma para que los destinatarios puedan verificar que el email proviene de ti y que no fue alterado en tránsito.
• CNAME se utiliza para rastrear aperturas y clics en tus campañas.

SPF records: Un dominio solo puede tener un registro SPF TXT. Si ya tienes uno, combina la directiva, por ej. include:mailgun.org, en el registro existente en vez de crear uno nuevo.

Para encontrar tus registros, ve a Email > Configuration > Domain Setup y sigue la guía de tu proveedor de hosting.

Después de ingresar tu Sender Email y Sender Name, Clerk.io genera los valores exactos de los registros. Agrégalos en tu host de dominio y regresa a Email > Configuration > DNS Records y haz clic en Verify Now.

Subscribers #

Un subscriber es una dirección de email que ha aceptado recibir emails de marketing.

Clerk.io necesita suscriptores antes de poder enviar campañas. Un flujo puede identificar a un visitante y saber exactamente qué ha navegado, pero aún así no puede enviar emails de marketing a quien no esté suscrito.

Hay varias formas de agregar suscriptores a Clerk.io:

• Sincronízalos desde una plataforma de email existente.
• Impórtalos desde un archivo CSV.
• Inclúyelos en tu data feed usando subscribed: true.
• Recoge nuevos registros desde tu sitio web con un formulario.

Syncing Existing Subscribers #

La sincronización de suscriptores es la mejor opción si ya tienes suscriptores en una plataforma como Klaviyo o Mailchimp.

Primero, conecta tu plataforma de email en Settings > Integrations. Luego ve a Email > Configuration > Sync Subscribers y activa el toggle para la integración.

Para encontrar la guía de una plataforma de email específica, utiliza el menú de integraciones en la barra lateral y sigue su guía de Sync Data.

Si no utilizas una plataforma de email externa, importa suscriptores con un archivo CSV o inclúyelos en tu data feed usando subscribed: true en los registros de clientes.

Getting New Subscribers #

Conseguir nuevos suscriptores significa recoger registros frescos desde tu sitio web.

Esto es diferente a sincronizar suscriptores existentes. La sincronización importa personas que ya aceptaron en otra parte. Un formulario de registro permite que nuevos visitantes acepten directamente desde tu tienda.

Utiliza esto si Clerk.io es tu plataforma principal de emails, o si quieres un formulario que suscriba visitantes directamente en Clerk.io.

Using Clerk.js #

Usa Clerk.js cuando un visitante se registre directamente en tu sitio web.

El siguiente ejemplo suscribe la dirección de email ingresada globalmente. Puedes colocar el formulario en un pie de página, en la página de inicio o en un popup, y luego ajustarlo al diseño de tu tienda.

<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">Sign up now!</h2>
   <div class="clerk-sign-up-subtitle">Get personal offers and stay up-to-date with trends.</div>
   <div class="clerk-input-wrapper">
      <input type="text" id="clerk-add-subscriber-input" placeholder="Enter your email">
      <button id="clerk-add-subscriber-btn" onclick="add_subscriber()">Subscribe</button>
   </div>
   <div id="clerk-subscribe-message"></div>
</div>

<script>
   function add_subscriber() {
      var clerk_btn = document.getElementById("clerk-add-subscriber-btn");
      var clerk_input = document.getElementById("clerk-add-subscriber-input");
      var clerk_message = document.getElementById("clerk-subscribe-message");
      Clerk("call", "subscriber/subscribe", {
         email: clerk_input.value
      },
      function(response) {
         clerk_message.style.color = "#008001";
         clerk_message.innerText = "You are now subscribed!";
         clerk_btn.innerText = "Subscribed!";
         clerk_btn.style.opacity = "0.5";
         clerk_btn.disabled = true;
      },
      function(response) {
         clerk_message.style.color = "#EE360E";
         clerk_message.innerText = "Could not subscribe. Please try again.";
      });
   }
</script>

<style>
   .clerk-sign-up {
      width: 50%;
      padding: 60px 0;
      max-width: 800px;
      min-width: 500px;
      margin: 40px auto;
      background-color: #FEFAF4;
   }
   .clerk-sign-up-headline {
      margin: 0 14px 14px;
      text-align: center;
   }
   .clerk-sign-up-subtitle {
      margin: 14px 14px 28px;
      text-align: center;
      color: #808080;
   }
   .clerk-input-wrapper {
      margin: 10px auto;
      text-align: center;
   }
   #clerk-add-subscriber-input {
      height: 28px;
      width: 50%;
      padding: 0 0 0 6px;
      border: 1px solid #D3D3D3;
   }
   #clerk-add-subscriber-btn {
      height: 30px;
      background-color: #008001;
      border: 1px solid #008001;
      color: white;
      cursor: pointer;
   }
   #clerk-subscribe-message {
      height: 20px;
      margin: auto;
      text-align: center;
   }
</style>

Para suscribirse a una lista específica, añade list_id. Los list IDs se encuentran en Email > Subscribers > Lists.

Clerk("call", "subscriber/subscribe", {
  email: "customer@example.com",
  list_id: "FSY27248"
});

Lee más en Subscribers.

Using the API #

Utiliza la API cuando tu formulario de registro o backend deba gestionar suscriptores directamente.

Llama a subscriber/subscribe para añadir una dirección de email como suscriptor:

curl -X POST https://api.clerk.io/v2/subscriber/subscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com"
  }'

Para suscribirse solo a una lista específica, incluye list_id:

curl -X POST https://api.clerk.io/v2/subscriber/subscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "list_id": "FSY27248"
  }'

Lee la referencia completa en docs.clerk.io/reference/subscriberssubscribe.

Unsubscribing #

Unsubscribing es la forma en que los destinatarios se dan de baja de emails de marketing.

Cada email de marketing debe incluir una manera para que los destinatarios se den de baja. Cómo lo gestiones depende de si el destinatario hace clic en un enlace en el email o si tu backend gestiona la baja.

Using an external platform — Sigue utilizando el enlace para darse de baja de tu plataforma existente. Klaviyo, Mailchimp u otra plataforma se encargan de la baja y mantienen la lista de suscriptores sincronizada.

Sending through Clerk.io — Agrega el enlace de baja de Clerk.io en el diseño. Si usas Ask Clerk.io, pídele que incluya un enlace de baja y lo añadirá por ti.

Using unsubscribe links #

Para los diseños que construyes manualmente, utiliza el siguiente enlace.

La variable {{ email }} se reemplaza por la dirección de cada destinatario en el momento del envío. Reemplaza YOUR_PUBLIC_API_KEY con la Public Key de Developers > API Keys.

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&redirect=true">Unsubscribe</a>

Para darse de baja solo de una lista específica, añade list_id:

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&list_id=FSY27248&redirect=true">Unsubscribe from this list</a>

Para redirigir a tu propia página de confirmación tras la baja, añade redirect_url:

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&redirect=true&redirect_url=https://yoursite.com/unsubscribed">Unsubscribe</a>

Using the API #

Utiliza subscriber/unsubscribe para dar de baja una dirección de email de forma programática.

Esto es útil para páginas de baja personalizadas o flujos backend.

curl -X POST https://api.clerk.io/v2/subscriber/unsubscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com"
  }'

Esto da de baja globalmente. Para darse de baja solo de una lista específica, incluye list_id:

curl -X POST https://api.clerk.io/v2/subscriber/unsubscribe \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "list_id": "FSY27248"
  }'

Lee la referencia completa en docs.clerk.io/reference/subscribersunsubscribe.

Store Personalization #

Store personalization controla los elementos de marca por defecto que Clerk.io utiliza en los diseños de email.

Ve a Email > Configuration > Personalization para establecer el logo de tu tienda. Puedes subir una imagen manualmente o usar Auto-detect from website para que Clerk.io la encuentre en tu tienda online.

El logo establecido aquí se usa como logo por defecto en los diseños de email generados por Clerk.io. Si creas diseños manualmente, igual puedes usar la URL del logo directamente en el marcado de la plantilla.

Email Designs #

Un email design es la plantilla visual que Clerk.io utiliza para construir el email que envía.

Cada campaña y flujo automatizado necesita un diseño. El diseño controla la disposición, los colores, el texto, bloques de productos, enlaces de baja y todo lo demás que ve el destinatario.

With Ask Clerk.io Design Studio #

La forma más sencilla de crear un diseño es con Ask Clerk.io Design Studio.

Describe lo que deseas en lenguaje natural, como la disposición, colores, qué productos mostrar y cómo deben verse los precios rebajados. Design Studio genera una vista previa en el chat para que la revises y ajustes.

También puedes indicarle tu sitio o adjuntar una captura de pantalla. La usará como referencia visual, lo cual es mucho más rápido que explicar tu tono de verde como si fuera sospechoso en una rueda de reconocimiento.

Lee más en la guía de Design Studio.

With MJML #

Utiliza el editor MJML integrado cuando quieras mayor control sobre el marcado.

MJML se compila en HTML que se muestra correctamente en Gmail, Outlook, Apple Mail y otros clientes de email. Consulta la guía de MJML Designs para un recorrido completo y ejemplos.

Todos los diseños de email en Clerk.io son responsivos. Se adaptan automáticamente a ordenador, tablet y móvil.

Static Images #

Usa la Media Library para imágenes estáticas como banners, logos y cabeceras de temporada.

Las imágenes subidas allí obtienen una referencia de plantilla como {{ media.your-image }} que puedes usar en cualquier diseño.

También puedes adjuntar una imagen directamente en Ask Clerk.io y pedirle que suba la imagen y la use en el diseño.

Email Identification #

Email identification vincula una sesión de visitante con una dirección de email.

Es necesario para flujos automáticos como abandono de navegación, secuencia de bienvenida y Carrito Abandonado. Sin esto, Clerk.io puede saber qué hizo un visitante, pero no a quién enviar un email sobre ello.

Cada visitante de tu sitio obtiene un visitor ID. Al principio, ese visitor ID es anónimo. Email identification lo conecta con una dirección de email cuando el visitante la introduce o vuelve a entrar estando logueado.

Using Clerk.js #

Usa collect_email para que Clerk.js detecte automáticamente los campos de email.

Si utilizas uno de los plugins instalables de Clerk.io, activa collect_email directamente en los ajustes del plugin. Aplica a DanDomain Classic, Magento 1, Magento 2, PrestaShop, Shopware 6, VTEX y WooCommerce.

Para otras configuraciones, actívalo en tu config de Clerk.js:

Clerk('config', {
  key: 'your-public-api-key',
  collect_email: true
});

Clerk.js monitoreará los campos de entrada de email y registrará la dirección cuando un visitante la escriba.

Esto funciona para campos de checkout, registros de newsletter, formularios de login y otros elementos <input type="email">.

Si un cliente ya está logueado, registra su email una vez por sesión con Clerk('call', 'log/email').

if (!sessionStorage.getItem('clerk_email_logged')) {
  Clerk('call', 'log/email', {
    email: 'CUSTOMER_EMAIL'
  });
  sessionStorage.setItem('clerk_email_logged', '1');
}

Reemplaza CUSTOMER_EMAIL con la dirección de email real de tu plataforma. Solo ejecuta el script cuando tenga disponible una dirección de email.

Using the API #

Utiliza log/email para asociar un visitor ID con una dirección de email.

Llama a esto una vez por sesión cuando una dirección de email esté disponible. Aplica cuando un cliente inicia sesión y cuando vuelve estando logueado.

curl -X POST https://api.clerk.io/v2/log/email \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "email": "customer@example.com",
    "visitor": "SESSION_VISITOR_ID"
  }'

Reemplaza SESSION_VISITOR_ID con el visitor ID de la sesión actual.

Al utilizar la API eres responsable de generar y mantener el visitor ID. Consulta la guía de Tracking para más detalles.

Cart Tracking #

Cart tracking le indica a Clerk.io qué productos tiene actualmente un visitante en su carrito.

Es imprescindible para los emails de Carrito Abandonado. Cuando un visitante se va sin comprar, Clerk.io solo puede enviar los contenidos del carrito si este ha sido rastreado.

Llama al seguimiento de carrito cada vez que cambie el carrito. Esto incluye cuando se añade o elimina un producto, o cuando se actualiza por completo el carrito.

With Clerk.js #

Si utilizas el plugin de Magento 1, Magento 2, PrestaShop o WooCommerce, el seguimiento de carrito se gestiona automáticamente.

Para otras configuraciones, informa a Clerk.io del contenido actual del carrito usando el método set. Cada llamada está asociada a la sesión de visitante actual.

Clerk('cart', 'set', [1234, 5678, 42]);

Lee más en la integración de Shopping Cart.

With the API #

Usa log/cart/update para establecer el estado actual del carrito.

Llama a esto cada vez que el carrito cambie, pasando la lista completa de productos que hay actualmente en el carrito.

curl -X POST https://api.clerk.io/v2/log/cart/update \
  -H 'Content-Type: application/json' \
  -d '{
    "key": "your-public-api-key",
    "visitor": "SESSION_VISITOR_ID",
    "products": [
      {"id": 1234, "quantity": 2},
      {"id": 5678, "quantity": 1}
    ]
  }'

También puedes pasar email en lugar de, o además de, visitor si la dirección de email ya es conocida.