Email

Setup

Todo lo que necesitas configurar antes de que Clerk.io pueda enviar emails en tu nombre.
Backend en el backend de Clerk.io

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 disparadores automáticos como Carrito Abandonado. Si solo deseas agregar 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 lo que hace, cuándo lo necesitas y cómo gestionarlo con Clerk.js o la API donde se requiere código.

Elige el camino de configuración adecuado #

Utiliza la sección que corresponda a la tarea que necesitas completar:

La configuración se basa en la tarea. Por ejemplo, Carrito Abandonado requiere identificación de email y seguimiento de carrito, mientras que una campaña esporádica requiere un dominio remitente, suscriptores y un diseño de email.

Estado de la configuración #

La pestaña Estado de la Configuración te da una vista general en vivo sobre la configuración de correo electrónico.

Encuéntralo 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 como se espera.

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 comprobaciones se agrupan en tres áreas:

Configuración cubre la configuración principal. Incluye si el envío de email está habilitado, qué dominio remitente está configurado, cuántos destinatarios suscritos están disponibles y si los pasos de flujo activos tienen diseños de email.

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

Flujos & envío muestra si hay flujos activos configurados, cuántos eventos de flujo están pendientes, cuántos emails se han enviado recientemente y si la cola de envíos está saludable.

Comienza aquí cuando los emails no se envían como se espera. Es lo más parecido a un panel que tranquilamente revisa el indicador de combustible.

Dominio del remitente #

Cómo Clerk.io envía emails desde tu dominio — visión general en tres pasos de la configuración DNS

El dominio del remitente es el dominio que Clerk.io usa al enviar emails para 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 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 por naturaleza desconfiados, y sinceramente han visto de todo.

Registros DNS #

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

Clerk.io utiliza tres tipos de registros DNS:

  • SPF declara qué servicios pueden enviar email desde tu dominio.
  • DKIM agrega una firma para que los destinatarios puedan verificar que el email proviene de ti y no fue alterado en tránsito.
  • CNAME se usa para el seguimiento de aperturas y clics en tus campañas.
Registros SPF: Un dominio solo puede tener un registro SPF TXT. Si ya tienes uno, fusiona la directiva, por ejemplo, include:mailgun.org, en el registro existente en vez de crear un segundo.

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

Después de ingresar tu Email del remitente (Sender Email) y Nombre del remitente (Sender Name), Clerk.io genera los valores exactos de los registros. Agréguelos a tu host de dominio, luego vuelve a Email > Configuration > DNS Records y haz clic en Verificar ahora.

Suscriptores #

Un suscriptor 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 podrá enviar emails de marketing a alguien que no se haya suscrito.

Configura los suscriptores en dos pasos:

  1. Importa suscriptores existentes desde tu tienda online o proveedor de email, para traer a todos los que ya han dado su consentimiento.
  2. Recolecta futuras suscripciones directamente en Clerk.io mediante los puntos de suscripción en tu sitio web.

La identificación de email y la suscripción son cosas distintas. collect_email y log/email vinculan a un visitante con una dirección de email; no suscriben esa dirección al marketing. Una suscripción en el sitio debe llamar a subscriber/subscribe después de que el visitante acepte.

Importar existentes #

Encuentra todos los lugares donde se almacenan los suscriptores existentes. Tu tienda puede almacenar altas de newsletter en checkout, mientras que un proveedor como Klaviyo o Mailchimp almacena las captadas mediante formularios y popups.

Utiliza la integración de tu tienda para importar el estado de suscripción donde esté soportado. Consulta su guía de Sincronización de Datos y confirma que los registros importados incluyan el estado de suscripción correctamente.

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

Pestaña Sync Subscribers en Email Configuration

Para encontrar la guía de una plataforma de correo específica, usa el menú de integraciones en la barra lateral y sigue su guía de Sincronización de Datos.

Si tu fuente no puede conectarse directamente, utiliza una importación CSV o incluye los suscriptores en tu data feed usando subscribed: true en los registros de clientes.

Importa solo quienes se hayan suscrito, no marques todos los clientes como suscritos. Revisa el resultado en Email > Subscribers antes de pasar a la captación desde la web.

Si vas a enviar emails solo a través de Clerk.io, recomendamos detener la sincronización de suscriptores desde tu tienda o proveedor antiguo después de la importación inicial. Primero, verifica que los suscriptores existentes han sido importados y que todos los puntos de suscripción web envían nuevos suscriptores directamente a Clerk.io.

Luego desactiva la sincronización de suscriptores relevante y confía en la captación frontend: formularios incrustados, popups de email y alta en checkout. Así evitas estados de suscriptor en conflicto entre Clerk.io y la otra plataforma, como una sincronización que sobrescriba una alta o baja posterior.

Deja de sincronizar el estado de suscriptor pero mantén la sincronización de producto, categoría, pedido u otros datos de clientes que aún necesites. Consulta sincronización de suscriptores.

Doble opt-in #

Configuración del email de confirmación de doble opt-in

El doble opt-in requiere que los nuevos suscriptores confirmen su dirección de email antes de que Clerk.io les envíe newsletters. Esto es útil si tu negocio opera en Alemania u otro mercado donde se requiere consentimiento confirmado.

Para activarlo, ve a Email > Configuration > Sync Subscribers, activa Doble opt-in y guarda los cambios.

Tras la suscripción, Clerk.io envía un email de confirmación. El suscriptor no recibe newsletters hasta hacer clic en el enlace de confirmación.

El email de confirmación incluye una vista previa activa mientras lo editas. Puedes personalizar el Asunto, Título, Mensaje y Texto del botón. El email utiliza por defecto el dominio de envío verificado de tu tienda, y el enlace seguro de confirmación se agrega automáticamente.

Deja un campo vacío para usar el valor seguro por defecto en esa parte del email de confirmación.

Captar suscriptores #

Después de la importación inicial, conecta cada punto de alta para que los futuros suscriptores lleguen a Clerk.io. Una tienda puede necesitar los tres métodos siguientes.

  • Formulario incrustado: Coloca un formulario HTML de alta en el footer o al final de una página.
  • Popup de email: Configura un popup en my.clerk.io para que aparezca tras un retardo o al llegar a cierta profundidad de scroll.
  • Alta en checkout: Conecta la casilla y campo de email existentes del checkout a Clerk.io con JavaScript.

Reemplazar un formulario de footer no actualiza el popup ni el checkout. Revisa cada punto de alta por separado, incluidos los que aún envían suscriptores a tu proveedor anterior.

Formulario incrustado #

Un formulario incrustado permite a los visitantes suscribirse directamente desde tu web. Instala y configura Clerk.js antes de agregar el formulario.

El ejemplo siguiente suscribe la dirección ingresada de forma global. Colócalo en tu footer, inicio u otra sección, luego ajusta el texto y el estilo a tu tienda.

Ejemplo de formulario de alta de suscriptor
<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">¡Únete ahora!</h2>
   <div class="clerk-sign-up-subtitle">Recibe ofertas personalizadas y mantente al día con las tendencias.</div>
   <div class="clerk-input-wrapper">
      <input type="email" id="clerk-add-subscriber-input" placeholder="Introduce tu email" aria-label="Email address" required>
      <button type="button" id="clerk-add-subscriber-btn" onclick="add_subscriber()">Suscribirse</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");
      if (!clerk_input.reportValidity()) return;
      Clerk("call", "subscriber/subscribe", {
         email: clerk_input.value.trim(),
         redirect: false
      },
      function(response) {
         clerk_message.style.color = "#008001";
         clerk_message.innerText = "Suscripción recibida. Si se requiere confirmación, revisa tu email.";
         clerk_btn.innerText = "¡Suscripción recibida!";
         clerk_btn.style.opacity = "0.5";
         clerk_btn.disabled = true;
      },
      function(response) {
         clerk_message.style.color = "#EE360E";
         clerk_message.innerText = "No se pudo suscribir. Por favor, inténtalo de nuevo.";
      });
   }
</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 ID de lista se encuentran en Email > Subscribers > Lists.

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

Lee más en Suscriptores.

Ve a Email > Popups en my.clerk.io para captar suscriptores mediante un popup. Elige todos los suscriptores o una lista específica, personaliza el diseño y establece el momento de aparición.

El popup aparece después de un retardo o al hacer scroll cierto porcentaje de la página. Ve Popups de email para más detalles.

Alta en checkout #

Si tu checkout ofrece una casilla de newsletter, conecta ese control existente a Clerk.io. Mantén los campos nativos del checkout e integradores; añade un listener que observe las acciones del cliente.

El listener necesita dos cosas: una dirección válida en el campo de email del checkout y selección deliberada de la casilla newsletter. Escribir una dirección para el pedido, una casilla pre-marcada o marcarla por JavaScript, no debe iniciar la suscripción.

El flujo básico es:

  1. Encuentra el formulario de checkout, el campo de email y la casilla newsletter.
  2. Registra cuando el cliente selecciona activamente la casilla.
  3. Llama a subscriber/subscribe cuando haya consentimiento y un email válido.

Asegúrate de que la instalación existente de Clerk.js esté cargada y configurada en el checkout. Clerk("call", ...) usa automáticamente la clave de tienda configurada.

El ejemplo a continuación muestra el concepto. Reemplaza los selectores por los que use tu checkout y carga el script después de que existan los campos. Limita el alcance a los campos del checkout para que campos de footer o login no puedan disparar el alta.

<script>
(function () {
  var form = document.querySelector("form.checkout-form");
  if (!form) return;

  var email = form.querySelector('input[name="email"][type="email"]');
  var newsletter = form.querySelector('input[name="newsletter"][type="checkbox"]');
  if (!email || !newsletter) return;

  var optedIn = false;

  function subscribe() {
    if (!optedIn || !newsletter.checked) return;
    if (!email.value.trim() || !email.checkValidity()) return;

    Clerk("call", "subscriber/subscribe", {
      email: email.value.trim(),
      redirect: false
    });
  }

  newsletter.addEventListener("change", function (event) {
    if (!newsletter.checked) optedIn = false;
    if (!event.isTrusted) return;
    optedIn = newsletter.checked;
    subscribe();
  });

  // También maneja clientes que marcan la casilla antes de ingresar el email.
  email.addEventListener("blur", function (event) {
    if (event.isTrusted) subscribe();
  });
})();
</script>

Pega esto como un bloque HTML de script independiente, fuera de otros <script>. Si tu plataforma espera JavaScript puro, omite las etiquetas de apertura y cierre.

Para una implementación completa, agrega gestión de peticiones duplicadas y callbacks de éxito/error con feedback en línea y ruta de reintento. Si el checkout reemplaza campos dinámicamente, adapta los listeners a los eventos de la plataforma o usa event delegation.

Un request exitoso significa que Clerk.io aceptó el alta. Con doble opt-in, el visitante aún debe confirmar su email antes de recibir newsletters.

Este ejemplo da de alta antes de completar el pedido y deja intactos los integradores nativos del checkout. Desmarcar después no cancela un request ya enviado ni da de baja una dirección previamente aceptada.

Si el alta debe ocurrir solo tras pedido completado, usa el evento de pedido exitoso de la plataforma o el backend. Revisa cómo la tienda almacena y sincroniza el estado newsletter para que las sincronizaciones posteriores respeten el estado de suscriptor previsto.

Prueba ambos órdenes de input, emails inválidos, consentimiento sin marcar o pre-marcado y fallos de alta. Confirma el resultado en Email > Subscribers y asegúrate de que los fallos de alta no interrumpan el checkout.

Usando la API #

Utiliza la API cuando tu formulario de alta o backend gestione 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 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"
  }'

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

Darse de baja #

La desuscripción es cómo los destinatarios rechazan recibir emails de marketing.

Todo email de marketing debe incluir una forma para que los destinatarios se den de baja. Su gestión depende de si el destinatario hace clic en un enlace en un email o si tu backend maneja la baja.

Usando una plataforma externa — Sigue usando el enlace de baja de tu plataforma. Klaviyo, Mailchimp u otra plataforma se encarga de la baja y mantiene sincronizada la lista de suscriptores.

Enviando desde Clerk.io — Agrega el enlace de baja de Clerk.io al diseño. Si usas Ask Clerk.io, pídele que incluya un enlace de baja y lo añadirá automáticamente.

Usando enlaces de desuscripción #

Para diseños creados manualmente, utiliza el siguiente enlace.

La variable {{ email }} se reemplaza con la dirección del destinatario al enviar. Cambia YOUR_PUBLIC_API_KEY por la Key Pública de Developers > API Keys.

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&redirect=true">Darse de baja</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">Darse de baja de esta lista</a>

Para redirigir a una página propia 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">Darse de baja</a>

Usando la API #

Usa subscriber/unsubscribe para dar de baja una dirección de email programáticamente.

Esto es útil para páginas de baja personalizadas o flujos de 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"
  }'

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

Personalización de la tienda #

Personalización de email mostrando ajustes de logo de tienda

La personalización de la tienda controla los activos 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 Detectar automáticamente desde la web para que Clerk.io lo detecte en tu storefront.

El logo aquí definido se usa como logo por defecto en los diseños de email creados por Clerk.io. Si creas diseños manualmente, puedes referenciar la URL del logo directamente en la plantilla.

Diseños de Email #

Ask Clerk.io Design Studio mostrando una previsualización de email sin guardar

Un diseño de email es la plantilla visual que Clerk.io usa para construir el email que envía.

Toda campaña y flujo automatizado necesita un diseño. El diseño controla el layout, colores, textos, bloques de producto, enlaces de baja y todo lo que ve el destinatario.

Con Ask Clerk.io #

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

Describe lo que quieres en lenguaje natural, como estructura, colores, qué productos mostrar y cómo se muestran los precios en oferta. Design Studio crea una previsualización en el chat para que la revises y refines.

También puedes señalar tu sitio o adjuntar una captura de pantalla. Usará eso como referencia visual, mucho más rápido que explicar tu tonalidad de verde como si fuera sospechoso en una rueda policial.

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

Con MJML #

Usa el editor MJML integrado si quieres mayor control del marcado.

MJML compila a HTML que se muestra de forma consistente en Gmail, Outlook, Apple Mail y otros clientes de correo. Consulta la guía de diseños MJML para ver ejemplos y walkthrough.

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

Imágenes estáticas #

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

Las imágenes allí subidas obtienen una referencia 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 la suba y la utilice en el diseño.

Identificación de Email #

La identificación de email vincula una sesión de visitante con una dirección de email.

Es indispensable para flujos automáticos como abandono de navegación, bienvenida y Carrito Abandonado. Sin ella, Clerk.io puede saber lo que hizo un visitante, pero no a quién enviarle un email.

Cada visitante en tu web obtiene un ID de visitante. Al principio, este ID es anónimo. La identificación de email lo conecta a una dirección cuando el visitante la teclea o vuelve estando logueado.

Usando Clerk.js #

Usa collect_email para permitir a Clerk.js detectar campos de email automáticamente.

Si usas uno de los plugins instalables de Clerk.io, activa collect_email directamente en la configuración del plugin. Esto aplica a DanDomain Classic, Magento 1, Magento 2, PrestaShop, Shopware 6, VTEX y WooCommerce.

Para otras instalaciones, actívalo en la config de Clerk.js:

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

Clerk.js monitoriza los campos de email y registra la dirección cuando un visitante la teclea.

Funciona en campos de checkout, altas de newsletter, formularios de login y otros elementos <input type="email">.

Esto identifica al visitante; no lo suscribe al marketing. Para captar consentimiento de newsletter en el checkout, usa el listener de checkout y llama aparte a subscriber/subscribe.

Si el 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 por la dirección real de tu plataforma. Renderiza el script solo cuando tengas la dirección disponible.

Usando la API #

Usa log/email para asociar un ID de visitante con una dirección de email.

Lámalo una vez por sesión cuando se tenga la dirección. Aplica al iniciar sesión o volver ya 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 ID de visitante de la sesión actual.

Cuando uses la API, tú eres responsable de generar y mantener el visitor ID. Consulta la Guía de Tracking para detalles.

Seguimiento de carrito #

El seguimiento de carrito indica a Clerk.io qué productos tiene actualmente un visitante en su cesta.

Es requisito para los emails de Carrito Abandonado. Si un visitante se va sin comprar, Clerk.io solo puede enviar el contenido del carrito si este se ha rastreado.

Haz el seguimiento cada vez que el carrito cambie: producto añadido, quitado o actualización total.

Con Clerk.js #

Si usas el plugin para Magento 1, Magento 2, PrestaShop o WooCommerce, el seguimiento se realiza automáticamente.

Para otras instalaciones, notifica 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 Shopping Cart.

Con la API #

Usa log/cart/update para poner el carrito en su estado actual.

Lámalo cada vez que el carrito cambie, pasando la lista completa de productos actuales.

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 vez de, o junto a, visitor si la dirección ya es conocida.

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.