Come aggiungere un codice personalizzato alla mia landing page?
Puoi aggiungere il tuo codice HTML, la formattazione CSS e JavaScript alla tua landing page utilizzando l’elemento Codice personalizzato.
Ci sono alcune cose da tenere a mente quando si lavora con codice personalizzato:
- Puoi aggiungere codice personalizzato alla sezione <head> o <body> della tua landing page. Se utilizzi un codice di terze parti, assicurati di ottenere le informazioni sul posizionamento del codice dal suo fornitore.
- Per essere conforme al GDPR, assicurati di informare i tuoi lead e visitatori che utilizzi moduli o codici di terze parti che coinvolgono heat-mapping o tracciamento.
- Aggiungere più codici di tracciamento, widget, ecc. può rallentare la tua landing page. Inoltre, sovraccaricare la tua landing page di contenuti può portare i visitatori ad andarsene.
- Quando lavori nell’editor della landing page, vedrai solo il segnaposto. Lo script viene eseguito solo in modalità anteprima e in una pagina pubblicata. Quindi, dovresti ispezionare la pagina subito dopo averla pubblicata per vedere se funziona come previsto. Non dovresti condividere il collegamento alla pagina prima di esserne sicuro della qualità.
- È una buona idea controllare se la pagina contenente il codice viene visualizzata correttamente in tutti i browser Web, soprattutto se stai modificando CSS.
- Il nostro team Customer Success può fornire supporto per le funzionalità standard disponibili nell’editor. Non siamo in grado di offrire assistenza o garantire la funzionalità di altri script di terze parti.
Aggiungere un codice personalizzato al corpo della landing page
La sezione corpo di una landing page è l’area principale in cui vengono visualizzati i contenuti primari, come testo, immagini, video ed elementi interattivi come i moduli di iscrizione. Si trova tra l’intestazione e il piè di pagina, fungendo da spazio centrale per fornire informazioni e coinvolgere i visitatori.
Per aggiungere un codice personalizzato al corpo della tua landing page:
- Nell’editor della landing page, fare clic sul pulsante Aggiungi elementi.
- Trascina e rilascia l’elemento Codice personalizzato nel contenuto della tua pagina. Nota che l’editor evidenzierà i punti in cui puoi rilasciarlo.
- Fai clic all’interno dell’oggetto Codice personalizzato per aprire la barra degli strumenti e immettere il codice nell’editor a destra.
Nella sezione body puoi usare tre tipi di codice:
- HTML – formattazione HTML standard, ad esempio:
<p> </p> - CSS – inserisci il tuo codice CSS tra i tag di stile:
<style> </style> - JavaScript – inserisci il tuo codice JS tra i tag script:
<script> </script>
Se vuoi usare la formattazione Less o Sass, devi prima compilarla in CSS e poi inserirla tra i tag di stile:<style> </style>
Puoi anche impostare opzioni aggiuntive per il tuo elemento di codice personalizzato:
- Aggiungi nomi di classe aggiuntivi: abilita questa opzione per aggiungere nomi di classe al contenitore dell’elemento in modo da poterlo definire in base alle tue esigenze.
- Posizionamento assoluto: abilita questa opzione per posizionare il codice personalizzato in qualsiasi punto della tua landing page. Ti consigliamo di utilizzare questa opzione solo se hai un design insolito che non può essere creato in nessun altro modo. L’utilizzo di oggetti con posizionamento assoluto può rendere la tua pagina meno visibile sui dispositivi mobili. Puoi trovare maggiori informazioni su questa funzionalità qui.
- Nascondi sui dispositivi mobili: abilita questa opzione per nascondere il risultato del codice personalizzato quando la tua pagina viene aperta su un dispositivo mobile.
Aggiungere un codice personalizzato alla sezione head della landing page
La sezione <head> di una landing page è una parte che contiene metadati e informazioni sulla pagina, come il titolo, la codifica dei caratteri, i fogli di stile collegati, gli script e i tag correlati alla SEO. Non visualizza il contenuto direttamente sulla pagina, ma fornisce istruzioni essenziali per i browser e i motori di ricerca.
Per aggiungere un codice personalizzato all’intestazione della landing page:
- Nell’editor della landing page, clicca sul pulsante Gestisci pagine.
- Passa il mouse sul pulsante di azione accanto alla Home page e fai clic su Impostazioni.
- Nella finestra Impostazioni pagina, vai alla scheda dell’elemento <head> e incolla lì il tuo script o quello di terze parti.
Nota: le modifiche vengono salvate automaticamente quando si fa clic all’esterno della casella di testo.
Utilizza i tag per farci sapere come deve essere visualizzato il codice:
- Per HTML, usa i tag HTML, come:
<h2> </h2> - Per i CSS, racchiudi il codice tra i tag:
<style> </style> - Per JavaScript, racchiudi il codice tra i tag:
<script> </script>
Passaggi per le landing page legacy
Puoi aggiungere un codice personalizzato (HTML, CSS e JavaScript) alla tua landing page utilizzando il segnaposto del codice personalizzato nell’editor della landing page. Utilizza questa opzione ogni volta che vuoi aggiungere strumenti e widget non inclusi nell’editor.
Il codice viene aggiunto alle versioni desktop e mobile della tua landing page. Se vuoi eseguire un test A/B sulla tua landing page, assicurati di aggiungere il segnaposto a ogni variante. Puoi anche aggiungerlo a una pagina di ringraziamento.
Puoi aggiungere il codice personalizzato a qualsiasi modello nuovo o esistente nell’editor. Ecco come arrivarci:
1. Vai alle Landing page ed esegui una delle seguenti operazioni:
- fai clic sul pulsante Crea landing page per creare una nuova pagina
- seleziona Modifica pagina dal menu Azioni accanto al nome della pagina
2. Fai doppio clic sull’icona Codice personalizzato per aggiungere il segnaposto al modello.
Il segnaposto appare nell’angolo in alto a sinistra della sezione visualizzata.
Quando fai doppio clic sull’icona, si apre automaticamente una finestra modale in cui puoi inserire il codice.
- (Facoltativo) Prendi e trascina il segnaposto se vuoi che appaia in un punto specifico della pagina. Fai doppio clic sul segnaposto in una finestra modale in cui puoi inserire il codice.
- Incolla o digita il codice. Assicurati di racchiudere i tuoi script nei tag
- (Facoltativo) Se stai eseguendo un test A/B, ripeti i passaggi 2-4 per ogni variante della pagina.
- Quando crei una nuova pagina, fai clic sull’icona del cellulare per generare una versione ottimizzata per i dispositivi mobili della tua pagina. Se stai modificando una pagina esistente, fai clic per verificare se approvi le modifiche.
- (Facoltativo) Fai clic su Anteprima per verificare se il codice visualizza correttamente tutti gli elementi che hai aggiunto e che dovrebbero essere visibili ai tuoi visitatori.
- Salva le modifiche o pubblica la landing page.
- Visualizza la landing page pubblicata per verificare che venga visualizzata correttamente
.
