Setup

Questa guida copre tutto ciò che devi impostare prima che Clerk.io possa inviare email per tuo conto.

Questi passaggi si applicano solo quando vuoi inviare email tramite Clerk.io — campagne, flussi, e trigger automatici come il Carrello Abbandonato. Se vuoi solo aggiungere raccomandazioni di prodotto personalizzate alle email che già invii tramite Klaviyo, Mailchimp o un’altra piattaforma, nulla di questo è necessario. Vai direttamente a Embeds.

Configurazione #

Questi passaggi consentono a Clerk.io di essere autorizzato a inviare email dal tuo dominio, fornirgli un elenco di destinatari e preparare il design della tua prima email. Avrai bisogno dell’accesso a my.clerk.io, al provider di hosting del tuo dominio e alla tua piattaforma email esistente.

Configurazione DNS #

La configurazione DNS è obbligatoria per tutti i negozi che utilizzano Clerk.io Email. Prima che Clerk.io possa inviare qualsiasi email, devi autenticare il tuo dominio di invio aggiungendo record DNS al tuo provider di hosting.

Pensala così: quando Clerk.io invia un’email per tuo conto, deve dimostrare al server di posta del destinatario che è effettivamente autorizzato a farlo. Senza questa prova, l’email sembra sospetta — come qualcuno che si spaccia per te senza alcun documento. I server di posta non gradiscono ciò e rifiuteranno l’email o la invieranno direttamente nella spam.

I record DNS sono il modo in cui concedi tale autorizzazione. Devi aggiungere alcuni record alle impostazioni del tuo dominio (ovunque tu gestisca il dominio — Route 53, Cloudflare, GoDaddy, ecc.), e quei record dicono a Internet: “Clerk.io è autorizzato a inviare email a nostro nome”.

Ci sono tre tipi di record da aggiungere:

• SPF — Dichiara quali servizi sono autorizzati a inviare email dal tuo dominio.
• DKIM — Aggiunge una firma crittografica alle email in uscita così i destinatari possono verificare che provengano davvero da te e non siano state modificate durante l’invio.
• CNAME — Usato per tracciare aperture e clic nelle tue campagne.

Record SPF: Un dominio può avere un solo record SPF TXT. Se ne hai già uno, devi unire la direttiva, ad es. include:mailgun.org al record esistente invece di crearne un secondo.

Per trovare i tuoi record DNS, vai su Email > Configuration > Domain Setup e segui la guida passo passo per il tuo provider di hosting.

Una volta inseriti l’Email del mittente e il Nome del mittente, Clerk.io genererà i valori esatti dei record da aggiungere. Dopo averli aggiunti al tuo provider di hosting, torna su Email > Configuration > DNS Records e clicca su Verifica ora. Clerk.io controllerà che tutti e tre i record siano configurati correttamente.

Sincronizzazione Iscritti #

La sincronizzazione degli iscritti è obbligatoria per tutti i negozi che utilizzano Clerk.io Email. Un iscritto è un indirizzo email che ha dato il consenso a ricevere comunicazioni di marketing. Clerk.io deve sapere chi sono queste persone prima di poter inviare campagne.

Se hai già iscritti su una piattaforma come Klaviyo o MailChimp, puoi sincronizzarli direttamente in Clerk.io. Otterrai così la lista completa degli iscritti fin dal primo giorno.

Per configurare una sincronizzazione, vai su Settings > Integrations e collega la tua piattaforma email. Una volta salvata l’integrazione, vai su Email > Configuration > Sync Subscribers e attiva il toggle accanto all’integrazione che vuoi usare.

Per trovare la guida specifica per la tua piattaforma email, cercala nel menu integrazioni nella barra laterale e segui la sua guida Sync Data.

Se non usi una piattaforma email esterna, puoi importare gli iscritti tramite un file CSV o includerli nel tuo data feed usando l’attributo subscribed: true nei record cliente.

Personalizzazione #

La scheda Personalizzazione su Email > Configuration > Personalization ti permette di impostare un logo del negozio che Clerk.io userà nei tuoi design email.

Puoi caricare direttamente un’immagine oppure usare Rileva automaticamente dal sito web per far individuare e inserire automaticamente il logo a Clerk.io dal tuo sito. Questa è l’opzione più veloce se il tuo logo è già visibile sul sito — Clerk.io lo troverà e applicherà senza bisogno di caricamento manuale.

Il logo impostato qui verrà usato come logo predefinito nei design email realizzati con Clerk.io. Se crei i tuoi design manualmente, puoi comunque usarlo inserendo direttamente l’URL del tuo logo nel markup del template.

Design Email #

Ogni campagna e flusso automatico ha bisogno di un design email — il template visivo che Clerk.io usa per costruire la vera email che invia.

Il modo più semplice per crearne uno è tramite Ask Clerk.io Design Studio. Descrivi ciò che desideri in linguaggio naturale — layout, colori, quali prodotti mostrare, come presentare i prezzi in saldo — e ti costruirà una preview direttamente nella chat che puoi rivedere e perfezionare. Puoi anche indicargli il tuo sito o allegare uno screenshot e si adatterà allo stile esistente. Leggi di più nella guida Design Studio.

Per maggior controllo, l’editor MJML integrato di Clerk.io ti permette di scrivere design come markup strutturato. MJML viene compilato in HTML che viene visualizzato in modo coerente su Gmail, Outlook e Apple Mail. Consulta la guida Design MJML per spiegazioni dettagliate ed esempi.

Tutti i design email in Clerk.io sono responsive — si adattano automaticamente a qualsiasi dimensione dello schermo, quindi hanno un aspetto ottimale su desktop, tablet e mobile senza lavoro aggiuntivo.

Se vuoi includere immagini statiche nei tuoi design — banner, loghi, header stagionali — puoi ospitarle direttamente sui server di Clerk.io usando la Media Library. Le immagini caricate qui ottengono un riferimento di template come {{ media.your-image }} che puoi inserire in qualsiasi design. Puoi anche allegare un’immagine direttamente in Ask Clerk.io e chiedergli di caricare l’immagine e usarla nel design che crea — farà tutto da solo.

Link di Disiscrizione #

Ogni email di marketing deve includere un modo per i destinatari di annullare l’iscrizione. Come gestirlo dipende da come invii le email.

Usando una piattaforma esterna (Klaviyo, Mailchimp, ecc.) — Continua a usare il link di disiscrizione della tua piattaforma attuale. Gestirà la disiscrizione e aggiornerà automaticamente la tua lista iscritti.

Inviando tutte le email tramite Clerk.io — Aggiungi il link di disiscrizione di Clerk.io al tuo design. Se usi Ask Clerk.io per costruire l’email, ti basta chiedergli di includere un link di disiscrizione e farà tutto lui.

Per i design che sviluppi manualmente, usa il link qui sotto. La variabile {{ email }} viene sostituita con l’indirizzo del destinatario al momento dell’invio. Sostituisci YOUR_PUBLIC_API_KEY con la chiave pubblica da Developers > API Keys.

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

Per disiscriversi solo da una lista specifica, aggiungi list_id:

<a href="https://api.clerk.io/v2/subscriber/unsubscribe?key=YOUR_PUBLIC_API_KEY&email={{ email }}&list_id=FSY27248&redirect=true">Disiscriviti da questa lista</a>

Per reindirizzare a una tua pagina di conferma dopo la disiscrizione, aggiungi 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">Disiscriviti</a>

Configurazione On-site #

Questi passaggi richiedono modifiche sul tuo negozio e sbloccano personalizzazione, flussi automatici e Carrello Abbandonato. Non tutti sono necessari per ogni negozio — quali siano necessari dipende da cosa vuoi inviare.

Raccolta Email #

Necessaria per tutti i flussi automatici — abbandono navigazione, welcome series, e Carrello Abbandonato.

Ogni visitatore del tuo sito riceve un visitor ID. Clerk.io lo usa per tracciare cosa visualizzano, cercano e aggiungono al carrello.

Il problema è che il visitor ID parte in modo anonimo — Clerk.io non può inviare email a quel visitatore a meno che non conosca il suo indirizzo. La raccolta email è il passaggio che collega i due.

Una volta che l’email di un visitatore è collegata al suo visitor ID, tutto il comportamento della sessione può essere usato per attivare e personalizzare email.

Ci sono due situazioni in cui questa connessione deve avvenire:

Quando un visitatore inserisce la sua email — Se un visitatore inserisce la sua email ovunque sul sito (campo checkout, iscrizione newsletter, form login), Clerk.io può rilevarla e registrarla automaticamente. Questo è gestito dalla funzione collect_email, che può essere attivata nella tua config Clerk.js o da Developers > Clerk.js Config su my.clerk.io.

Quando un cliente è già loggato — Se un cliente torna sul sito già autenticato, la sua email è subito disponibile. In questo caso, un piccolo script su ogni pagina può registrare l’email una volta per sessione, così la connessione si crea senza che il cliente debba digitare nulla.

Tracciamento Carrello #

Necessario per Carrello Abbandonato.

Quando un visitatore lascia senza acquistare, Clerk.io può inviargli una email che mostra i prodotti lasciati nel carrello — ma solo se sa cosa c’era nel carrello.

Il tracciamento carrello deve essere chiamato ogni volta che il carrello cambia: quando un prodotto viene aggiunto, rimosso, o quando il carrello viene aggiornato completamente. Senza questo, il flusso Carrello Abbandonato non ha dati prodotto su cui lavorare.

Form di Iscrizione #

Opzionale — necessario solo se raccogli nuovi iscritti direttamente tramite Clerk.io.

Se utilizzi Clerk.io come principale piattaforma email, hai bisogno di fornire ai nuovi visitatori un modo per iscriversi direttamente dal sito. In questo modo la tua lista iscritti crescerà all’interno di Clerk.io senza dipendere da una piattaforma esterna per le iscrizioni.

Se preferisci continuare a raccogliere iscritti tramite Klaviyo o un’altra piattaforma, tieni la sincronizzazione iscritti sempre attiva così i nuovi iscritti verranno regolarmente importati in Clerk.io. In questo caso, i form di iscrizione non sono necessari — puoi saltare questa sezione.

Vedi la sezione di implementazione qui sotto per un form di iscrizione già pronto.

Con Clerk.js #

Configurazione DNS e sincronizzazione iscritti sono sempre fatte tramite Email > Configuration e Settings > Integrations su my.clerk.io — non richiedono codice.

Raccolta Email #

Rilevamento automatico degli input email — Se usi uno dei plugin installabili di Clerk.io (DanDomain Classic, Magento 1, Magento 2, PrestaShop, Shopware 6, VTEX o WooCommerce), attiva collect_email direttamente dalle impostazioni del plugin. In alternativa, abilitalo nella tua config Clerk.js. Clerk.js monitorerà tutti i campi email sulla pagina e registrerà l’indirizzo automaticamente quando un visitatore ne digita uno.

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

Funziona per i campi checkout, iscrizione newsletter, form login e qualsiasi altro <input type="email"> presente sulla pagina.

Clienti già loggati — Se un cliente è già loggato quando arriva sul sito, registra la sua email una volta per sessione. Usa sessionStorage per evitare di fare la chiamata a ogni pagina visitata:

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

Sostituisci CUSTOMER_EMAIL con l’indirizzo email reale dalla tua piattaforma. Esegui questo script solo su pagine dove l’indirizzo email è disponibile — saltalo completamente per i visitatori ospiti.

Tracciamento Carrello #

Se usi i plugin Magento 1, Magento 2, PrestaShop o WooCommerce, il tracciamento carrello avviene automaticamente — non serve altro codice.

Per tutte le altre configurazioni, notifica a Clerk.io il contenuto attuale del carrello usando il metodo set. Chiamalo ogni volta che il carrello cambia, passando la lista attuale degli ID prodotto. Ogni chiamata è automaticamente collegata alla sessione del visitatore.

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

Leggi di più sull’ integrazione Shopping Cart qui.

Form di Iscrizione #

Qui sotto trovi un form di iscrizione pronto all’uso che puoi inserire sul sito — nel footer, sulla homepage, in un popup. Personalizzalo come preferisci.

<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">Iscriviti ora!</h2>
   <div class="clerk-sign-up-subtitle">Ricevi offerte personali e resta aggiornato con le novità.</div>
   <div class="clerk-input-wrapper">
      <input type="text" id="clerk-add-subscriber-input" placeholder="Inserisci la tua email">
      <button id="clerk-add-subscriber-btn" onclick="add_subscriber()">Iscriviti</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 = "Sei ora iscritto!";
         clerk_btn.innerText = "Iscritto!";
         clerk_btn.style.opacity = "0.5";
         clerk_btn.disabled = true;
      },
      function(response) {
         clerk_message.style.color = "#EE360E";
         clerk_message.innerText = "Impossibile iscriversi. Riprova.";
      });
   }
</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>

Per iscrivere su una lista specifica invece che globalmente, aggiungi un list_id alla chiamata. Gli ID lista si trovano in Email > Subscribers > Lists.

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

Leggi di più su gestione iscritti e liste qui.

Con le API #

Questa sezione copre la stessa configurazione usando chiamate API dirette. È utile per integrazioni lato server che non usano Clerk.js.

Quando usi le API, sei responsabile di generare e mantenere il visitor ID per ogni sessione. Vedi la Tracking guide per i dettagli su come fare.

Logga Email #

Usa log/email per associare un visitor ID a un indirizzo email. Chiamalo una volta per sessione quando un indirizzo email è disponibile — sia quando un cliente effettua il login attivamente, sia quando ritorna già loggato.

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

Sostituisci SESSION_VISITOR_ID con il visitor ID della sessione corrente. Salta questa chiamata per i visitatori ospiti per cui non si conosce l’email.

Tracciamento Carrello #

Usa log/cart/update per impostare lo stato attuale del carrello. Chiamalo ogni volta che il carrello cambia, passando la lista completa dei prodotti attualmente nel carrello.

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

Puoi anche passare email invece di (o in aggiunta a) visitor se l’indirizzo email è già noto al momento della chiamata.

Form di Iscrizione #

Usa subscriber/subscribe per aggiungere un indirizzo email come iscritto quando un visitatore si registra sul tuo sito.

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

Per iscrivere a una lista specifica, includi 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 il riferimento completo su docs.clerk.io/reference/subscriberssubscribe.

Disiscrizione #

Usa subscriber/unsubscribe per disiscrivere un indirizzo email in modo programmatico — ad esempio da una pagina di disiscrizione personalizzata o da un workflow 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"
  }'

Questo disiscrive globalmente. Per disiscrivere solo da una lista specifica, includi 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 il riferimento completo su docs.clerk.io/reference/subscribersunsubscribe.