Come incorporare un modulo di iscrizione nella sua pagina di conferma dell'ordine

Imparerai

Scopra come incorporare un modulo di iscrizione nella sua pagina di conferma per raccogliere informazioni aggiuntive dai clienti dopo che hanno terminato il processo di checkout. Questi clienti recenti sono già interessati al suo marchio, quindi la conferma rappresenta una grande opportunità per coinvolgere ulteriormente i clienti.

I passi esatti da compiere per incorporare un modulo nella pagina di conferma dell'ordine dipenderanno in gran parte dalla sua piattaforma di ecommerce, ma il processo comporterà l'aggiornamento dei file di codice del suo negozio con un breve snippet. In questa guida abbiamo illustrato come realizzare questo obiettivo per 2 piattaforme di ecommerce:

• Shopify
• Bigcommerce

Prima di iniziare

Se utilizza Shopify o BigCommerce, o ha il plugin Klaviyo per Magento o WooCommerce, è pronto per iniziare a costruire il suo modulo nella sezione sottostante.

Tuttavia, se utilizza una piattaforma di e-commerce che non si integra nativamente con Klaviyo, si assicuri di aver abilitato il monitoraggioActive on Site per il suo sito. Questo avviene automaticamente per le piattaforme sopra elencate, ma deve essere fatto manualmente per altre piattaforme. Consente a Klaviyo di pubblicare i moduli di iscrizione sul suo sito. 

Costruisca il suo modulo

Può creare un modulo di iscrizione e incorporarlo nella sua pagina di conferma per porre domande pertinenti ai suoi clienti dopo il checkout. Ad esempio, potrebbe porre delle domande per conoscere la frequenza con cui un cliente utilizza i suoi prodotti, o quali potenziali nuovi prodotti potrebbe essere interessato ad acquistare.

Per costruire il suo modulo di iscrizione:

1. In Klaviyo, vada su Moduli di iscrizione > Creare un modulo di iscrizione > Costruire da zero.
2. Nel menu che appare, dia un nome al suo modulo e selezioni una lista a cui inviare i nuovi iscritti. 
3. Selezioni Incorpora come tipo di modulo.
   
4. Clicchi su Salva e continui a progettare. 
5. In questo modo entrerà nell'editor di moduli, dove potrà modificare i seguenti stili:
   • Stili: Modifichi l'aspetto del suo modulo per adattarlo al suo marchio, come gli stili dei moduli o dei campi di input e il tipo di carattere. Può anche modificare qualsiasi testo cliccando su di esso e sostituendo la lingua predefinita con la sua. 
   • Aggiungere blocchi: Qui può aggiungere contenuti al suo modulo per raccogliere informazioni, come una casella di testo per una domanda o un campo data per un compleanno. Si assicuri di impostare una proprietà del profilo per ogni campo aggiunto e di non sovraccaricare i clienti con troppe domande.
   • Targeting e comportamento: Scelga se vuole che il modulo appaia su desktop, mobile o entrambi. Mantenga il suo modulo impostato su Mostra a tutti i visitatori o Non mostrare ai profili Klaviyo esistenti . 
6. Nella barra dei menu, selezioni Success per modificare la pagina che viene visualizzata dopo l'invio del modulo.
7. Quando è soddisfatto del design del suo modulo, clicchi su Pubblica.
8. Dal modale che appare, copi il suo codice embed in modo da averlo pronto da incollare. 
   
9. Clicchi su Pubblica.

Il suo modulo non apparirà sul suo sito finché non avrà incollato il codice embed nel codice del suo sito. Le prossime due sezioni illustreranno come incollare il codice per un sito Shopify e poi per un sito Bigcommerce.

Aggiunga l'embed al suo sito Shopify

1. Si rechi nel backend del suo negozio Shopify.
2. Vada su Impostazioni > Checkout > Elaborazione dell'ordine.
3. Alla voce Script aggiuntivi, incolli il codice embed.

Per verificare come il modulo appare dal vivo, crei un ordine campione e completi il processo di pagamento. In base al tema del suo negozio, potrebbe essere necessario tornare nell'editor di moduli per regolare leggermente l'aspetto e l'atmosfera che desidera. Si assicuri di pubblicare nuovamente dopo aver apportato qualsiasi modifica; tuttavia, non sarà necessario aggiungere nuovamente il codice embed, in quanto tutte le modifiche saranno applicate automaticamente dopo la pubblicazione.

Nel nostro esempio, abbiamo aggiunto un bordo bianco al modulo per dare più spazio tra il messaggio "Thank you" e il modulo stesso. 

Aggiunga l'incorporamento al suo sito Bigcommerce

1. Si rechi nell'amministrazione di Bigcommerce.
2. Vada su Storefront > Script Manager e clicchi su Crea uno script .
3. Assegna un nome allo script e lo configura come segue:
   • Posizione: Testa
   • Descrizione (opzionale): Descriva lo scopo dello script
   • Pagine in cui verrà aggiunto lo script: Conferma dell'ordine
   • Tipo di script: Script
     
4. Cancelli il contenuto dello script e incolli invece il seguente codice per aggiungere klaviyo.js alla sua pagina di conferma. Si noti che deve farlo anche se ha installato precedentemente klaviyo.js sul suo sito web:
   

     <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async="" ></script>
     <script>
        document.addEventListener("DOMContentLoaded", function() {
          var elem = document.createElement('div');
        elem.className = 'klaviyo-form-FORM_ID'
        document.body.appendChild(elem);
        });</script>

5. Nello snippet qui sopra, sostituisca PUBLIC_API_KEY con la chiave API pubblica del suo sito.
6. Nello snippet qui sopra, sostituisca FORM_ID con l'ID del suo modulo. Per trovare l'ID del suo modulo, si rechi al modulo incorporato nel suo account Klaviyo. L'ID del modulo è il codice di 6 lettere alla fine dell'URL.
   
7. Dopo aver compilato tutti i dettagli dello script,faccia clic su Salva.

Il suo modulo incorporato sarà ora visualizzato in fondo alla pagina dopo che qualcuno ha effettuato un ordine. A seconda del suo tema, potrebbe voler modificare il bordo, l'imbottitura o la dimensione del suo modulo nella sezioneStili , per assicurarsi che corrisponda all'aspetto della sua pagina di conferma dell'ordine; pubblichi le modifiche apportate per vederle riflesse.

I prossimi passaggi

Dopo aver iniziato a raccogliere le risposte con il suo modulo incorporato, ogni invio sarà memorizzato nel profilo del cliente come proprietà personalizzata, disponibile per essere utilizzata nei segmenti, nei flussi e nei modelli di e-mail.

In base alle risposte, si può ramificare l'esperienza post-acquisto. Potrebbe anche voler ramificare le sue serie di benvenuto in base a questi dati o creare segmenti rilevanti a cui inviare le campagne. Per esempio, diciamo che decidiamo di lanciare un nuovo mascara. Poiché stiamo raccogliendo i dati sull'interesse per il prodotto in questo modulo incorporato, possiamo notificare a chiunque ci abbia detto di essere interessato al mascara il rilascio del prodotto.

Risorse aggiuntive

• Come iniziare a usare i moduli di iscrizione
• Come incorporare un modulo di iscrizione sul suo sito web