Come integrare un modulo di iscrizione sul tuo sito web

Cosa imparerai

Scopri come aggiungere un modulo integrato al tuo sito web incollando il codice di integrazione nei file del tema o nell'editor di pagine del tuo negozio di e-commerce, blog o sito. La posizione in cui incollare il codice dipende da dove desideri che appaia il modulo integrato e varia a seconda di come è realizzato il sito.

Queste istruzioni sono solo per i moduli integrati e non sono necessarie per popup, menu flyout o moduli a pagina intera. Una volta incollato il codice di integrazione sul sito, puoi modificare il modulo all'interno di Klaviyo e pubblicare le modifiche senza doverti preoccupare di aggiornare lo snippet.

Se non hai eseguito l'integrazione con Shopify, BigCommerce, Magento o WooCommerce, che sincronizzano uno snippet di codice chiamato Klaviyo.js tramite le rispettive integrazioni (o per Shopify, tramite app integrata), devi prima installare Klaviyo.js sul sito per pubblicare moduli. Klaviyo.js è conosciuto anche come snippet di codice di tracciamento Active on Site, perché consente anche il tracciamento dell'attività dell'utente. Scopri maggiori informazioni a riguardo nella nostra guida al tracciamento web. 

Crea un nuovo modulo da integrare

1. Accedi a Moduli di iscrizione > Crea un modulo di iscrizione > Crea un nuovo modulo di iscrizione.
2. Assegna un nome al modulo e scegli un elenco a cui aggiungere gli iscritti.
3. Seleziona Incorporato come tipo di modulo.
4. Fai clic su Salva e progetta.
   
5. Utilizza l'editor per definire lo stile del modulo e aggiungere i campi desiderati.

Ottieni il codice di incorporamento del modulo

Dopo aver scelto lo stile del modulo, ci sono due posti in cui puoi recuperare il codice di integrazione:

1. Nella sezione Targeting e comportamento:
   
2. Quando pubblichi un modulo integrato, vedi una finestra che richiede anche di incollare il codice di integrazione sul sito:
   

Quindi, pubblica il modulo e copia lo snippet di codice da incollare sul tuo sito. 

Incolla il codice sul tuo sito

La posizione in cui incollare il codice sul sito dipende da dove desideri che il modulo integrato appaia e varia in base all'integrazione. Di seguito, abbiamo delineato alcuni esempi di casi d'uso. Scorri verso il basso per trovare la piattaforma da te utilizzata (BigCommerce, Shopify, WooCommerce o altre piattaforme) e consulta le istruzioni di integrazione specifiche per la tua piattaforma.

BigCommerce 

Se desideri sostituire il modulo nel piè di pagina di BigCommerce con un modulo Klaviyo o se desideri aggiungere un modulo integrato Klaviyo altrove sul tuo sito, hai più possibilità, descritte di seguito. 

Utilizza l'editor di pagine

1. Vai su Storefront > Webpages (Vetrina > Pagine web).
2. Seleziona la pagina in cui deve apparire il modulo integrato.
3. Seleziona Edit (Modifica) dal menu Action (Azione).
   
4. Fai clic su HTML nella sezione Page Content (Contenuto della pagina) per aprire l'editor del codice sorgente.
5. Incolla il codice di integrazione del modulo.
6. Fai clic su Update (Aggiorna) e salva le modifiche.

Usa l'editor del tema

1. Accedi al tuo negozio BigCommerce.
2. Vai su Storefront > My Themes (Vetrina > I miei temi).
3. Fai clic su Customize (Personalizza) nella sezione Current Theme (Tema corrente). 
4. Seleziona la pagina in cui desideri aggiungere il modulo integrato.
5. Individua la sezione della pagina in cui intendi aggiungere il modulo.
6. Trascina in un blocco HTML.
7. Incolla il codice di incorporamento del modulo nell'editor dei blocchi.
8. Salva il blocco.
9. Salva le modifiche.
   
   

Inserisci i file nel tuo tema 

1. Vai su Storefront > My Themes (Vetrina > I miei temi).
2. Dal menu a discesa, fai clic su Advanced (Avanzate) nella sezione Current Theme (Tema corrente) .
3. Fai clic su Edit Theme Files (Modifica file del tema).
   
   
   1. Se l'opzione Edit Theme Files (Modifica file del tema) non appare: 
      1. Crea una copia del tema
      2. Modifica la copia
4. Passa al file che contiene il codice sorgente per la sezione in cui desideri incorporare il modulo.
5. Individua la sezione del codice in cui deve essere visualizzato il modulo.
6. Incolla il codice di integrazione.
7. Salva le modifiche. 

Shopify

Piè di pagina di Shopify per tutti i temi

Se desideri inserire il modulo integrato nel piè di pagina del tuo sito, segui i passaggi indicati di seguito. Le istruzioni valgono sia per i temi Shopify vintage che per quelli Shopify 2.0. 

1. Passa al pannello di controllo Shopify.
2. Vai su Online Store (Negozio online) > Themes (Temi).
3. Fai clic sui 3 puntini, quindi scegli Edit code (Modifica codice).
4. Apri il file del tema footer.liquid.
5. Individua l'area in cui desideri visualizzare il modulo.
   1. Nell'esempio seguente, il modulo di iscrizione viene visualizzato sopra le informazioni sul copyright del sito:
      
6. Incolla il codice di incorporamento del modulo.
7. Fai clic su Save (Salva).

Ora il modulo appare nel piè di pagina del sito.

Inserimento diverso dal piè di pagina in Shopify per temi vintage

Se desideri inserire un modulo integrato nel tuo sito Shopify (utilizzando un tema vintage) in posti diversi dal piè di pagina, procedi nel seguente modo: 

1. Passa al pannello di controllo Shopify.
2. Vai su Online Store (Negozio online) > Themes (Temi).
3. Fai clic su Customize > Add Section (Personalizza > Aggiungi sezione).
4. Scegli una delle seguenti opzioni, a seconda di ciò che appare:
   • Custom content (Contenuto personalizzato)
     1. Aggiungi questo blocco
     2. Elimina il contenuto predefinito inserito
   • HTML personalizzato  
5. Fai clic su Add content (Aggiungi contenuto) > Custom HTML (HTML personalizzato).
6. Incolla il codice di integrazione.
7. Fai clic su Save (Salva).

Inserimento diverso dal piè di pagina in Shopify per temi 2.0

Se desideri includere un modulo integrato nel tuo sito Shopify (utilizzando un tema 2.0) in posti diversi da piè di pagina, procedi nel seguente modo:

1. Crea il tuo modulo di iscrizione integrato in Klaviyo. Nota che il Tipo di modulo deve essere impostato su modulo integrato nella sezione Stili . Questo metodo non funziona per moduli popup, menu flyout o moduli a pagina intera. 
2. Salva l'ID del modulo.
   Per trovare l'ID del modulo, vai al modulo integrato nel tuo account Klaviyo. L'ID del modulo è il codice di sei lettere alla fine dell'URL.
3. Passa al pannello di controllo Shopify.
4. Vai su Online Store > Themes (Negozio online > Temi).
5. Fai clic su Customize (Personalizza).
6. Passa al modello di pagina a cui desideri aggiungere il modulo, ad esempio la home page.
7. Fai clic su Add Section (Aggiungi sezione) e scorri verso il basso per trovare il modulo integrato Klaviyo in App.
   
   
8. Fai clic sulla nuova sezione e aggiungi l'ID del modulo integrato nella casella di testo. 
   
9. Fai clic su Save (Salva).
10. Ora il modulo integrato è stato aggiunto al modello di pagina ed è possibile spostarlo all'interno della pagina in base alle esigenze.

Pagina della password di Shopify per tutti i temi

Se desideri inserire il modulo integrato nella pagina della password del sito, segui i passaggi riportati di seguito. Le istruzioni valgono sia per i temi Shopify vintage che per quelli Shopify 2.0. 

Devi installare uno snippet di codice per abilitare i moduli di registrazione, noti come Klaviyo.js, separatamente nella pagina della password. Questo perché il file password-content.liquid (o il file password.liquid in Shopify 2.0) non utilizza il file theme.liquid, dove l'integrazione lo installa automaticamente. Le istruzioni per l'installazione di Klaviyo.js sono incluse di seguito.

1. Passa al pannello di controllo Shopify.
2. Vai su Online Store (Negozio online) > Themes (Temi).
3. Fai clic su Actions > Edit code (Azioni > Modifica codice).
4. Apri il file tema password-content.liquid, per i temi vintage, o il file password.liquid, per i temi 2.0.
5. Copia lo snippet di codice Klaviyo.js di seguito e incollalo nella parte inferiore del file.
   

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

6. Nel punto dello snippet in cui vedi PUBLIC_API_KEY, devi sostituire questo elemento con la chiave API pubblica del tuo account Klaviyo. Per trovare la tua chiave API pubblica, vai su Impostazioni > Chiavi API.
   
7. Inserisci tag di commento intorno al modulo di iscrizione Shopify predefinito, per evitare che venga visualizzato sul sito:
   1. Per iniziare i tag, aggiungi {% comment %} 
   2. Per chiudere i tag, aggiungi {% endcomment %}
      
8. Incolla il codice del modulo integrato di Klaviyo sopra il modulo integrato Shopify commentato.
9. Fai clic su Save (Salva). 

Il modulo di incorporazione Klaviyo ora appare nella pagina della password del sito.

Una volta installato Klaviyo.js, tutti i moduli popup e menu flyout pubblicati presenti nel tuo account appariranno su questa pagina, a meno che non specifichi di non visualizzarli su un determinato URL. 

WooCommerce

1. Apri il pannello di controllo di WooCommerce.
2. Fai clic su Customize Your Site (Personalizza il tuo sito).
3. Vai alla pagina in cui desideri aggiungere il modulo integrato.
4. Fai clic su Add a widget > Custom HTML (Aggiungi un widget > HTML personalizzato).
5. Incolla il codice di incorporamento nella sezione del contenuto.
6. Fai clic sul pulsante Publish (Pubblica) per pubblicare le modifiche.

Altre piattaforme 

Affinché un modulo integrato Klaviyo funzioni, sulla tua pagina devono essere presenti due snippet di codice: Javascript di Klaviyo e il codice di incorporamento del modulo. Molte delle integrazioni predefinite di Klaviyo (ad esempio Magento, Magento 2) inseriscono automaticamente Klaviyo.js nel sito. Verifica le impostazioni di integrazione della tua piattaforma per assicurarti che questa opzione sia selezionata. 

Se la piattaforma non presenta un'integrazione nativa Klaviyo, aggiungi il nostro .js manualmente seguendo queste istruzioni. 

Una volta installato Klaviyo.js, puoi incollare il codice di integrazione del modulo nel codice HTML/sorgente del tuo sito ovunque desideri che appaia. Se preferisci non modificare personalmente il codice del sito e desideri che un esperto lo faccia per te, contatta un partner Klaviyo. 

Risorse aggiuntive

• Primi passi con i moduli di iscrizione
• Come installare Klaviyo.js per pubblicare i moduli di iscrizione
• Come incorporare un modulo nella pagina di conferma dell'ordine
• Come aggiungere un modulo integrato Klaviyo al tuo sito BigCommerce