Come aggiungere un modulo incorporato di Klaviyo al tuo sito BigCommerce

Imparerai

Scopri come aggiungere un modulo di incorporamento di Klaviyo al tuo sito BigCommerce: è necessario creare il modulo in Klaviyo e poi incollare il codice di incorporamento nei file del tuo sito dove vuoi che appaia (ad esempio, nel piè di pagina).

Questa guida mostra come sostituire il modulo d'iscrizione predefinito di BigCommerce con un modulo incorporato in Klaviyo.

Prima di iniziare

Prima di creare un modulo di iscrizione in Klaviyo, devi prima integrarti con BigCommerce e poi abilitare la funzionalità modulo d'iscrizione (chiamata anche "tracciamento in loco"). Se hai selezionato l'opzione Aggiungi automaticamente Klaviyo onsite JavaScript durante l'integrazione con BigCommerce, sei a posto. 

In caso contrario:

1. In Klaviyo, clicca sul nome della tua organizzazione nell'angolo in basso a sinistra, quindi seleziona integrazioni.
   
2. Clicchi su BigCommerce.
3. Controlli l'impostazione Aggiungi automaticamente il javascript di Klaviyo in loco.
4. Clicca su Salva.

L'esempio di questo articolo utilizza il tema Cornerstone predefinito di BigCommerce. Tieni presente che il tuo tema potrebbe essere diverso, così come i nomi di alcuni file o le posizioni degli snippet di codice.

Aggiungere il codice di incorporamento del modulo al tuo sito

Per prima cosa, crea e pubblica un modulo embed in Klaviyo. In questa sezione verranno illustrati i passi successivi per incollare il codice embed del modulo sul tuo sito BigCommerce in modo da visualizzare e sincronizzare correttamente i dati.

1. Se non l'hai ancora fatto, copia il codice embed per il tuo modulo embed. Puoi accedere al codice di incorporamento del modulo aprendo il modulo nell'editor e cliccando sulla sezione Comportamento di targeting & .
   
2. Naviga sul tuo sito web e individua il modulo d'iscrizione predefinito BigCommerce. Se stai utilizzando un tema Cornerstone, si trova nel piè di pagina del sito.
   
   • Se non vedi un modulo predefinito sul tuo sito web:
     • Apri il tuo BigCommerce pannello di controllo.
     • Naviga in Marketing > Email Marketing
     • Spunta la casella con la dicitura Consenti iscrizioni alla newsletter. Questo ti permette di raccogliere il consenso per l'invio di e-mail da parte dei visitatori del tuo sito web e aggiunge anche una casella di registrazione e-mail predefinita sul tuo sito BigCommerce. Se questa casella è già selezionata e non vedi ancora un modulo predefinito, è possibile che il tuo tema non ne includa uno.
3. Apri il tuo BigCommerce pannello di controllo, quindi vai su Storefront > Temi.
4. Nella sezione Tema corrente, clicca sul menu a tendina Avanzate e scegli Modifica file del tema.
   
   • Se stai utilizzando un tema predefinito, non potrai selezionare questa opzione. Invece:
     
     • Fai clic su Crea una copia, assegnagli un nome e poi seleziona Salva una copia. 
     • Una volta aggiunto alla sezione Temi, seleziona i 3 puntini e poi scegli Modifica i file del tema. Nota che tutte le modifiche apportate saranno applicate solo al tema che stai modificando e dovrai applicare il tema al tuo sito web per vedere le modifiche riflesse.
5. Nella barra laterale di sinistra, apri il file corrispondente al punto in cui il modulo predefinito è apparso sul tuo sito. Se il modulo predefinito si trova nel piè di pagina, come nell'esempio, naviga nel modello > components > common e clicca sul file footer.html.
6. Usa la scorciatoia Trova (Command+F su Mac o Control+F su Windows) per cercare la parola "newsletter" all'interno del file footer.
   
7. Nel codice sottostante, trova il riferimento al modulo. Nell'esempio, il modulo è referenziato in un percorso di file diverso: {{> components/common/subscription-form}}.
   
8. Nella barra laterale sinistra, segui il percorso del file a cui fa riferimento il codice (in questo esempio, seleziona i componenti > common > subscription-form). Da qui vedrai i componenti effettivi del modulo predefinito.
   • Poiché l'intestazione e la lingua del modulo predefinito corrispondono al resto degli stili del nostro sito, sostituiremo solo l'input del modulo vero e proprio. Nel codice sorgente, puoi vedere che l'input del form predefinito è contenuto nell'elemento <form>.
9. Evidenzia tutto ciò che si trova tra i tag di apertura e chiusura del <form> modulo <> , quindi incolla il codice embed che hai copiato da Klaviyo per sostituire il testo evidenziato. 
   
10. Clicca su Salva e applica file per applicare le modifiche al tuo sito web.
    • Se il pulsante dice solo Salva file, allora il file che hai appena modificato non è ancora il tuo Tema corrente. Dovrai cliccare su Salva file, quindi scorrere verso l'alto e selezionare Modifica file del tema > Salva > Usa come tema attivo nell'angolo in alto a destra per applicare il tema al tuo sito web. 

Dopo aver incollato il codice embed, salvato e applicato le modifiche in BigCommerce, naviga indietro sul tuo sito web e aggiorna la pagina. Il modulo Klaviyo verrà visualizzato sul tuo sito e inizierà ad aggiungere nuovi iscritti all'elenco Klaviyo collegato al modulo. 

Se non vedi il tuo modulo, consulta la sezione Risoluzione dei problemi dei moduli incorporati.

I prossimi passaggi

Quindi, crea una serie di benvenuto Flusso per avere un impatto immediato sul tuo nuovo iscritto.

Risorse aggiuntive

• Come creare una serie di e-mail di benvenuto
• Come disattivare le e-mail di notifica inviate da BigCommerce