Setup

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

Se aplica a campañas, flujos y activadores automáticos como Carrito Abandonado. Si solo deseas añadir recomendaciones personalizadas de productos a los correos 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 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 Estado de configuración para encontrar configuraciones faltantes o seguimiento roto.
• Enviar desde tu dominio: Configura el Dominio del remitente y verifica sus registros DNS.
• Prepara los destinatarios: Sincroniza suscriptores existentes, impórtalos o recolecta nuevos registros.
• Configura el envío de correos electrónicos: Configura la Personalización de la tienda, Diseños de correo, Identificación de correo, y Seguimiento de carrito.

La configuración es basada en tareas. Por ejemplo, Carrito Abandonado requiere identificación de correo y seguimiento de carrito, mientras que una campaña puntual requiere un dominio del remitente, suscriptores y un diseño de correo.

Estado de configuración #

La pestaña Estado de configuración te brinda una visión en vivo de la configuración de tus correos.

Encuéntrala en Email > Configuration > Setup Status. Muestra si las partes requeridas están configuradas, si el seguimiento funciona y si los correos se envían como se espera.

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

Las comprobaciones están organizadas en tres áreas:

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

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

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

Empieza aquí cuando los correos no se estén enviando como esperas. Es lo más parecido a un panel de control para la configuración de correo, que vigila tranquilamente el nivel de combustible.

Dominio del remitente #

El dominio del remitente es el dominio que Clerk.io utiliza al enviar correos 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 receptores que Clerk.io tiene permiso para enviar correos en tu nombre.

Sin esta prueba, los correos pueden ser rechazados o enviados a spam. Los servidores de correo son cautelosos por profesión, y francamente, han visto cosas.

Registros DNS #

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

Clerk.io usa tres tipos de registros DNS:

• SPF declara qué servicios pueden enviar correo desde tu dominio.
• DKIM añade una firma para que los destinatarios puedan verificar que el correo vino de ti y no fue alterado 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, 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 según tu proveedor de hosting.

Después de ingresar tu Correo del remitente y Nombre del remitente, Clerk.io genera los valores exactos de los registros. Agrégales en tu proveedor de dominio, luego regresa a Email > Configuration > DNS Records y haz clic en Verificar ahora.

Suscriptores #

Un suscriptor es una dirección de correo que ha aceptado recibir correos de marketing.

Clerk.io necesita suscriptores antes de poder enviar campañas. Un flujo puede identificar a un visitante y saber exactamente qué vio, pero aún no puede enviarle correos de marketing a quien no se haya suscrito.

Hay diversas formas de incorporar suscriptores en Clerk.io:

• Sincronizarlos desde una plataforma de correo existente.
• Importarlos desde un archivo CSV.
• Incluirlos en tu feed de datos con subscribed: true.
• Recolectar nuevos registros desde tu sitio web con un formulario.

Sincronizar 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 correo en Settings > Integrations. Luego ve a Email > Configuration > Sync Subscribers y activa el interruptor para la integración.

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

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

Doble confirmación (double opt-in) #

La doble confirmación requiere que los nuevos suscriptores confirmen su dirección de correo antes de que Clerk.io les envíe newsletters. Es útil cuando tu negocio está en Alemania u otro mercado donde se requiere consentimiento confirmado.

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

Tras suscribirse un visitante, Clerk.io le envía un correo de confirmación. El suscriptor no recibirá newsletters hasta que haga clic en el enlace de confirmación.

El correo de confirmación incluye una vista previa en vivo mientras lo editas. Puedes personalizar el Asunto, Título, Mensaje y Texto del botón. El correo utiliza el dominio verificado de tu tienda por defecto, y el enlace seguro de confirmación se añade automáticamente.

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

Conseguir nuevos suscriptores #

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

Esto es diferente de sincronizar suscriptores existentes. La sincronización incorpora personas que ya se suscribieron en otro lugar. Un formulario de registro permite que los nuevos visitantes se suscriban directamente en tu tienda.

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

Usando Clerk.js #

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

El ejemplo siguiente suscribe la dirección de correo ingresada globalmente. Puedes poner el formulario en un pie de página, en la página de inicio o en un popup, y luego personalizarlo según el estilo de tu tienda.

<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">¡Regístrate ahora!</h2>
   <div class="clerk-sign-up-subtitle">Obtén ofertas personalizadas y mantente al día con las tendencias.</div>
   <div class="clerk-input-wrapper">
      <input type="text" id="clerk-add-subscriber-input" placeholder="Introduce tu correo">
      <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");
      Clerk("call", "subscriber/subscribe", {
         email: clerk_input.value
      },
      function(response) {
         clerk_message.style.color = "#008001";
         clerk_message.innerText = "¡Ahora estás suscrito!";
         clerk_btn.innerText = "¡Suscrito!";
         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, agrega list_id. Los IDs de lista se encuentran en Email > Subscribers > Lists.

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

Lee más en Suscriptores.

Usando la API #

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

Llama a subscriber/subscribe para añadir una dirección de correo 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.

Cancelación de suscripción #

La cancelación de suscripción es el mecanismo mediante el cual los destinatarios dejan de recibir correos de marketing.

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

Usando una plataforma externa — Continúa usando el enlace de baja de la plataforma existente. Klaviyo, Mailchimp u otra plataforma gestionan la baja y mantienen sincronizada la lista de suscriptores.

Enviando a través de 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á por ti.

Usando enlaces de baja #

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

La variable {{ email }} se reemplaza por cada dirección de destinatario al momento de enviar. Sustituye YOUR_PUBLIC_API_KEY con la clave 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, agrega 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 tu propia página de confirmación tras darse de baja, agrega 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 cancelar la suscripción de una dirección de correo de forma programática.

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

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

Personalización de la tienda #

La personalización de la tienda controla los recursos predeterminados de marca que Clerk.io utiliza en los diseños de correo.

Ve a Email > Configuration > Personalization para establecer el logo de tu tienda. Puedes subir una imagen manualmente o usar Detectar automáticamente desde el sitio para que Clerk.io la encuentre en tu tienda online.

El logo establecido aquí se usa como el logo predeterminado en los diseños de correo generados por Clerk.io. Si creas diseños manualmente, aún puedes referenciar la URL del logo directamente en la plantilla.

Diseños de correo #

Un diseño de correo es la plantilla visual que Clerk.io utiliza para componer el correo que envía.

Cada campaña y flujo automatizado necesita un diseño. El diseño controla el layout, colores, texto, bloques de productos, enlaces para darse 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 layout, colores, qué productos mostrar y cómo deben lucir los precios en oferta. Design Studio genera una vista previa en el chat para que puedas revisarla y ajustarla.

También puedes indicarle tu sitio o adjuntar una captura de pantalla. Lo usará como referencia visual, lo cual es mucho más rápido que describir 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 #

Usa el editor integrado de MJML si quieres mayor control sobre el marcado.

MJML se compila como HTML que se muestra correctamente en Gmail, Outlook, Apple Mail y otros clientes de correo. Consulta la guía de Diseños MJML para instrucciones y ejemplos completos.

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

Imágenes estáticas #

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

Las imágenes subidas allí reciben 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 incluya en el diseño.

Identificación de correo #

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

Es obligatoria para flujos automáticos como abandono de navegación, series de bienvenida y Carrito Abandonado. Sin ello, Clerk.io puede saber qué hizo un visitante, pero no a quién enviarle el correo.

Cada visitante en tu sitio obtiene un ID de visitante. Al principio, ese ID es anónimo. La identificación de correo lo conecta a una dirección de correo cuando el visitante la escribe o regresa estando conectado.

Usando Clerk.js #

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

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

En otras implementaciones, actívalo en la configuración 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.

Funciona con campos de checkout, registros a newsletter, formularios de inicio de sesión y otros elementos <input type="email">.

Si el cliente ya está identificado, registra su correo 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 de correo real de tu plataforma. Renderiza el script solo cuando la dirección de correo esté disponible.

Usando la API #

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

Llama una vez por sesión cuando la dirección esté disponible. Esto aplica cuando un cliente inicia sesión o regresa estando aún 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 con el ID de visitante de la sesión actual.

Cuando uses la API, eres responsable de generar y mantener el ID de visitante. Consulta la Guía de Tracking para más detalles.

Seguimiento de carrito #

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

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

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

Con Clerk.js #

Si usas los plugins de Magento 1, Magento 2, PrestaShop o WooCommerce, el seguimiento de carrito es automático.

En otras implementaciones, notifica a Clerk.io el contenido actual del carrito usando el método set. Cada llamada está vinculada a la sesión de visitante actual.

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

Lee más en la integración de Carrito de Compras.

Con la API #

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

Llama cada vez que el carrito cambie, pasando la lista completa de productos que contiene.

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 correo ya es conocida.