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 disparadores automáticos como Carrito Abandonado. Si solo quieres añadir recomendaciones de productos personalizadas a emails enviados desde Klaviyo, Mailchimp u otra plataforma, ve a Embeds en su lugar.

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

Elige la ruta de configuración correcta #

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

• Comprobar la configuración: Abre Setup Status para encontrar configuraciones faltantes o rastreo roto.
• Enviar desde tu dominio: Configura el Sender Domain y verifica sus registros DNS.
• Preparar destinatarios: Sincroniza suscriptores existentes, impórtalos o recolecta 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 del carrito, mientras que una campaña puntual requiere un dominio remitente, suscriptores y un diseño de email.

Setup Status #

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

Encuéntrala en Email > Configuration > Setup Status. Muestra si las partes requeridas están configuradas, si el seguimiento funciona 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 algo falta o está roto y naranja es una advertencia que vale la pena revisar.

Las comprobaciones están agrupadas en tres áreas:

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

On-site tracking muestra si el seguimiento de visitantes está activo. También indica 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 flujos están pendientes, cuántos emails se enviaron recientemente y si la cola de envíos está saludable.

Empieza aquí cuando los emails no se envían como se espera. Es lo más parecido a un tablero de instrumentos de configuración que discretamente revisa 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 que Clerk.io está autorizado a enviar emails en tu nombre.

Sin esta prueba, los emails pueden ser rechazados o ir a spam. Los servidores de correo son desconfiados por profesión y, sinceramente, han visto cosas.

Registros DNS #

Agrega los registros DNS requeridos en tu proveedor de dominios. Normalmente, 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 emails desde tu dominio.
• DKIM añade una firma para que los destinatarios puedan verificar que el email viene de ti y no fue cambiado en tránsito.
• CNAME se utiliza para rastrear aperturas y clics en tus campañas.

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

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 Sender Email y Sender Name, Clerk.io genera los valores exactos de los registros. Agrégalos en tu proveedor de dominio, luego regresa a Email > Configuration > DNS Records y haz clic en Verify Now.

Suscriptores #

Un suscriptor es una dirección de email que ha dado su consentimiento para 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é navegó, pero aún así no puede enviar emails de marketing a quien no se haya suscrito.

Hay varias maneras de traer suscriptores a Clerk.io:

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

Sincronizando suscriptores existentes #

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 accede a Email > Configuration > Sync Subscribers y habilita el interruptor para la integración.

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

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

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 cuando tu negocio opera en Alemania u otro mercado donde se requiere consentimiento confirmado.

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

Después de que un visitante se suscribe, Clerk.io envía un email de confirmación. El suscriptor no recibirá newsletters hasta que haga clic en el enlace de confirmación.

El email de confirmación muestra una previsualización en vivo mientras lo editas. Puedes personalizar el Subject, Heading, Message y Button text. El email usa por defecto el dominio remitente verificado de tu tienda y el enlace de confirmación seguro se añade automáticamente.

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

Conseguir nuevos suscriptores #

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

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

Usa esto si Clerk.io es tu plataforma principal de email o si quieres un formulario que suscriba visitantes directamente a Clerk.io.

Usando Clerk.js #

Usa Clerk.js cuando un visitante se registra directamente desde tu sitio.

El siguiente ejemplo suscribe la dirección de email ingresada globalmente. Puedes colocar el formulario en el pie de página, en la página principal o en un popup, luego dale el estilo acorde a 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 suscribir a una lista específica, añade list_id. Los IDs de listas se encuentran en Email > Subscribers > Lists.

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

Lee más en Subscribers.

Usando la API #

Usa la API cuando tu formulario o backend deban 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 suscribir 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 baja es el proceso por el cual los destinatarios dejan de recibir emails de marketing.

Todo email de marketing debe incluir una forma en la que el destinatario pueda darse de baja. Cómo lo gestiones depende si el destinatario hace clic en un enlace en el email o si el backend gestiona la baja.

Usando una plataforma externa — Sigue utilizando el enlace de baja de tu plataforma existente. Klaviyo, Mailchimp u otra plataforma gestionan la baja y mantienen la lista de suscriptores sincronizada.

Enviando a través de Clerk.io — Añade 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 agregará por ti.

Usando enlaces de baja #

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

La variable {{ email }} se reemplaza por la dirección de cada destinatario en el momento del envío. Sustituye YOUR_PUBLIC_API_KEY por 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>

Usando la API #

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

Esto es útil para páginas de baja personalizadas o flujos de trabajo en el 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.

Store Personalization #

La personalización de la tienda controla los activos de marca predeterminados que Clerk.io usa en los diseños de emails.

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

El logo configurado aquí se usa como logo predeterminado en los diseños de email construidos por Clerk.io. Si diseñas manualmente, aún puedes referenciar la URL del logo directamente en la plantilla.

Email Designs #

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

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

Con Ask Clerk.io Design Studio #

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

Describe lo que quieres en lenguaje natural, como el diseño, colores, qué productos mostrar y cómo exhibir los precios en oferta. Design Studio muestra una previsualización en la conversación para que la revises y refines.

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

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

Con MJML #

Utiliza el editor MJML incorporado si quieres más control sobre el marcado.

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

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

Imágenes estáticas #

Utiliza la Media Library para imágenes estáticas como banners, logos y cabeceras estacionales.

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

Email Identification #

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

Es necesaria para flujos automatizados como abandono de navegación, bienvenida y Carrito Abandonado. Sin ella, Clerk.io puede saber qué hizo un visitante, pero no a quién debe enviarle el email.

Cada visitante en tu sitio obtiene un visitor ID. Inicialmente, ese ID de visitante es anónimo. La identificación por email lo conecta a una dirección de correo cuando el visitante escribe su email o regresa mientras está logueado.

Usando Clerk.js #

Utiliza 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 desde la configuración del plugin. Esto aplica para 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 monitoriza los campos de email y registra la dirección cuando el visitante escribe una.

Esto funciona en campos de checkout, registros a newsletters, 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');
}

Sustituye CUSTOMER_EMAIL por la dirección real de email de tu plataforma. Solo renderiza el script cuando haya una dirección disponible.

Usando la API #

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

Llama una vez por sesión cuando haya un email disponible. Esto aplica cuando un cliente inicia sesión y cuando regresa ya conectado.

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"
  }'

Sustituye SESSION_VISITOR_ID por el visitor ID de la sesión actual.

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

Cart Tracking #

El seguimiento del carrito le dice a Clerk.io qué tiene el visitante actualmente en el carrito.

Es necesario para emails de Carrito Abandonado. Cuando un visitante se va sin comprar, Clerk.io solo puede enviar el contenido del carrito si este se ha registrado previamente.

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

Con Clerk.js #

Si usas el plugin de Magento 1, Magento 2, PrestaShop o WooCommerce, el seguimiento del carrito se maneja automáticamente.

Para otras configuraciones, notifica a Clerk.io del contenido del carrito usando el método set. Cada llamada se relaciona con la sesión actual del visitante.

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

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

Con la API #

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

Llama cada vez que el carrito cambie, pasando la lista completa de productos ahora 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 ya se conoce la dirección de email.