Come aggiungere un modulo incorporato Klaviyo al tuo sito BigCommerce

Cosa imparerai

Scopri come aggiungere un modulo incorporato di Klaviyo al tuo sito BigCommerce: per prima cosa, devi creare il modulo in Klaviyo e poi incollare il codice di incorporamento nei file del tuo sito, nel punto in cui desideri che appaia (ad esempio, nel piè di pagina).

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

Prima di iniziare

Prima di creare un modulo incorporato di Klaviyo, è necessario eseguire l'integrazione con BigCommerce e abilitare la funzionalità "modulo d'iscrizione" (chiamata anche "tracciamento sul sito"). Se hai selezionato l'opzione Aggiungi automaticamente il JavaScript Klaviyo sul sito durante l'integrazione con BigCommerce, sei a posto.

In caso contrario:

1. In Klaviyo, seleziona la scheda Integrazioni.

2. Fai clic su BigCommerce.
3. Seleziona l’impostazione Aggiungi automaticamente il javascript onsite di Klaviyo.
4. Clicca su Salva.

In questo articolo viene utilizzato il tema Cornerstone predefinito di BigCommerce a titolo di esempio. Tieni presente che il tuo tema potrebbe essere diverso, così come i nomi di alcuni file o le posizioni degli snippet di codice.

Come aggiungere il codice di incorporamento del modulo al tuo sito

Per prima cosa, crea e pubblica un modulo incorporato in Klaviyo. In questa sezione vengono illustrati i passaggi successivi per incollare il codice di incorporamento del modulo sul sito BigCommerce, in modo da visualizzare e sincronizzare correttamente i dati.

1. Se non l'hai ancora fatto, copia il codice di incorporamento del tuo modulo. Puoi accedere al codice di incorporamento del modulo aprendo il modulo nell'editor e cliccando sulla sezione Targeting e comportamento.
   

2. Vai sul tuo sito web e individua il modulo d'iscrizione predefinito di BigCommerce. Se stai utilizzando un tema Cornerstone, si trova nel piè di pagina del sito.
   

• Se non vedi il modulo predefinito sul tuo sito web:
  • Apri il pannello di controllo di BigCommerce.
  • Vai a Marketing > Marketing via e-mail
  • Spunta la casella con la dicitura Consenti iscrizioni alla newsletter. Questo ti permette di raccogliere il consenso all'invio di e-mail da parte dei visitatori del tuo sito web e di aggiungere una sezione predefinita per l'iscrizione alle e-mail sul tuo sito BigCommerce. Se questa casella è già spuntata e il modulo predefinito non è visibile, è probabile che il tuo tema non ne includa uno.

3. Apri il pannello di controllo di BigCommerce, 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, questa opzione non sarà disponibile. Procedi invece in questo modo:
  
  • Clicca su Crea una copia, assegna un nome e poi seleziona Salva una copia.
  • Una volta aggiunto alla sezione Temi, seleziona i 3 puntini e poi scegli Modifica file del tema. Tieni presente che tutte le modifiche apportate verranno applicate solo al tema che stai modificando e per vederle riflesse nel tuo sito web dovrai applicare il tema stesso.

5. Nella barra laterale di sinistra, apri il file che corrisponde al punto in cui il modulo predefinito è apparso sul tuo sito. Se il modulo predefinito si trova nel piè di pagina, come nell'esempio, vai su modelli > componenti > comuni (templates > 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 del piè di pagina (file footer).
   

7. Nel codice che segue, trova il riferimento al modulo. Nell'esempio, il riferimento al modulo si trova in un percorso file diverso: {{> components/common/subscription-form}}.
   

8. Nella barra laterale sinistra, segui il percorso del file a cui fa riferimento nel codice (in questo esempio, seleziona componenti > comuni > modulo-iscrizione (components > common > subscription-form). Da qui potrai vedere i componenti effettivi del modulo predefinito.
   • Poiché l'intestazione e la lingua del modulo predefinito coincidono con gli stili del nostro sito, sostituiremo solo l'input del modulo vero e proprio. Nel codice sorgente, puoi vedere che l'input del modulo predefinito è contenuto nell'elemento <modulo> (<form>).
9. Evidenzia tutto ciò che si trova tra i tag di apertura e chiusura <form>, quindi incolla il codice di incorporamento che hai copiato da Klaviyo per sostituire il testo evidenziato.
   

10. Clicca su Salva e applica file per applicare queste modifiche al tuo sito web.
    • Se il pulsante dice solo Salva file, significa che il file che hai appena modificato non è ancora il tuo Tema corrente. Devi 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 di incorporamento, salvato e applicato le modifiche su BigCommerce, torna nuovamente sul tuo sito web e aggiorna la pagina. Il modulo incorporato di Klaviyo sarà visibile sul sito e inizierà ad aggiungere nuovi iscritti all'elenco Klaviyo collegato al modulo.

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

I prossimi passaggi

A questo punto, crea un flusso dedicato alla serie di benvenuto per conquistare subito i nuovi iscritti.

Risorse aggiuntive