Articoli in questa sezione

Vedi altro

Codice personalizzato

  • Aggiornato

L'editor è flessibile: puoi modificare il codice esistente o aggiungere il tuo. Così estendi le funzioni della piattaforma e sblocchi funzioni aggiuntive. Ad esempio, puoi inserire un widget calendario personalizzato o un modulo di contatto di terze parti per accettare pagamenti sul tuo sito.

Come aggiungere codice personalizzato

Puoi aggiungere codice personalizzato con il widget HTML. Ecco le istruzioni per usarlo.

Nota:

  • Il codice che deve essere visibile sul sito va inserito con un widget HTML. Il codice che non si vede va di solito nell'header. In generale, prima di aggiungere del codice al tuo sito, conviene sempre seguire le indicazioni di chi lo ha scritto.
  • Non puoi caricare né eseguire file PHP. I linguaggi lato server, come PHP, non sono supportati, perché la piattaforma non offre esecuzione lato server né accesso al file system.

Widget HTML

Il widget HTML è il modo più semplice per aggiungere codice personalizzato al tuo sito. A seconda di dove lo posizioni, compare su tutte le pagine o su una sola. Se lo metti nell'header o nel footer, viene aggiunto a tutte le pagine del sito in una volta, perché tutte condividono lo stesso header e footer. Se lo metti in qualsiasi altro punto, compare solo nel body.

Per aggiungere un widget HTML:

  1. Nel pannello laterale, fai clic su Aggiungi, poi su Elementi.
  2. Cerca HTML, trascina il widget in una colonna o in una riga del tuo sito e incolla il tuo codice.

Codice personalizzato nell'header

Puoi mettere il codice nell'header di tutto il sito o nell'header di una singola pagina.

Nota: le app di gestione del consenso non riescono a impedire l'esecuzione del codice prima del consenso se il codice si trova nell'HTML dell'header. Il motivo è che ottimizziamo la struttura e l'ordine di caricamento dei contenuti secondo le best practice di rendimento: mettiamo gli script e i banner CMP più in basso nella pagina, così il contenuto principale si carica prima. Per questo, se usi un'app di gestione del consenso, conviene mettere il codice alla fine del body.

Header di tutto il sito

Per mettere il codice nell'header di tutto il sito:

  1. Nel pannello laterale, fai clic su Altro, poi su Impostazioni.
  2. Fai clic su HTML intestazione.
    • Head HTML. Aggiungi il contenuto nel campo della sezione head.
    • Body End HTML. Aggiungi HTML/JavaScript personalizzato subito prima del tag di chiusura dell'elemento <body> di ogni pagina del sito.
  3. Incolla il tuo codice e salva.

Header di una singola pagina

Per mettere il codice nell'header di una singola pagina:

  1. Nel pannello laterale, fai clic su Pagine.
  2. Nella pagina in cui vuoi aggiungerlo, fai clic sull'icona delle impostazioni.
  3. Fai clic su SEO.
  4. Scorri fino a HTML testata.
  5. Incolla qui il tuo codice e salva.

Il mio codice sparisce quando lo metto nella sezione head

È normale che i codici di tracciamento a pixel spariscano quando li metti nell'header. La sezione head <head> non accetta codice come <img>, <iframe> e simili. Di solito accetta solo <link>, <script> e <meta>.

Se devi incollare del codice che non viene salvato nella sezione head, incollalo invece nel campo HTML di fine corpo. Per farlo, segui i passaggi della sezione «Codice personalizzato dopo il tag body di apertura» di questo articolo.

Codice personalizzato dopo il tag body di apertura

Al momento non c'è una funzione per mettere il codice subito dopo il tag body di apertura. Puoi però incollarlo nel campo HTML di fine corpo in Impostazioni.

Per incollare il codice nel campo HTML di fine corpo:

  1. Nel pannello laterale, fai clic su Altro, poi su Impostazioni.
  2. Fai clic su HTML intestazione.
  3. Incolla il tuo codice nel campo HTML di fine corpo.
  4. Fai clic su Salva.

Codice personalizzato in elementi o widget

Molti elementi, tra cui righe, colonne e widget, permettono di accedere al loro HTML/CSS.

Se ti trovi nel Classic Editor in modalità flex o nell'Editor 2.0:

  • Puoi modificare il CSS dei contenitori flex (sezione, colonna, colonna interna e griglia avanzata). Nell'Editor 2.0 puoi modificare anche il CSS di header e footer.
  • Il pannello di design potrebbe non riflettere tutte le modifiche del codice personalizzato, il che può creare differenze di stile tra il pannello di design e gli elementi inline.

Per aggiungere codice a un elemento o a un widget:

  1. Nel Classic Editor, fai clic destro sul widget o sull'elemento per aprire il menu contestuale.
  2. Se sei in modalità flex nel Classic Editor o nell'Editor 2.0, fai clic per selezionare il contenitore flex, l'header o il footer.
  3. Fai clic su Modifica HTML/CSS. Se sei in modalità flex nel Classic Editor o nell'Editor 2.0, fai clic sull'icona dei tre puntini nel menu fluttuante e seleziona Modifica CSS.
  4. Modifica o aggiungi qui il codice, secondo le tue esigenze.
  5. Fai clic su Aggiorna.

Potrebbe essere necessario ricaricare il browser per vedere la modifica.

Aggiungere codice di tracciamento a un modulo di contatto

Per aggiungere codice di tracciamento a un modulo di contatto:

  1. Vai alla pagina in cui si trova il tuo modulo di contatto.
  2. Fai clic sul modulo di contatto per aprire le opzioni.
  3. Fai clic su INVIO.
  4. Fai clic su Monitoraggio.
  5. Incolla qui il tuo codice di tracciamento delle conversioni.

Linee guida consigliate per il codice personalizzato

Ecco le linee guida consigliate quando lavori con codice personalizzato.

Linee guida generali

  • Se il codice deve stare su una pagina, crea una pagina di prova e mettilo lì.
  • L'anteprima usa HTTPS, mentre il tuo sito pubblicato potrebbe non farlo. Questo spesso fa smettere di funzionare il codice personalizzato.
  • Assicurati di restare all'interno delle colonne. I nostri siti responsive si basano su una struttura di righe e colonne: ogni riga contiene colonne, che a loro volta ospitano il contenuto. Quando aggiungi o modifichi il tuo HTML, verifica che sia dentro una colonna.

Risolvere i problemi con il codice personalizzato

Se hai aggiunto codice personalizzato che influisce sulle prestazioni del tuo sito o ti impedisce di modificarlo, molto probabilmente il codice non è formattato bene o non è conforme a HTTPS. Ecco alcune soluzioni ai problemi che possono capitare quando lavori con codice personalizzato.

Annullare una modifica o ripristinare una versione precedente

Se il codice personalizzato ha danneggiato il sito, o se vuoi semplicemente tornare indietro, annulla le ultime modifiche nell'editor.

Se il problema risale a prima della tua cronologia, o se l'editor non si apre più, scrivi all'assistenza Smoobu. Il team può riportare la pagina a una versione precedente al posto tuo.

Messaggi di errore specifici

Ecco alcuni messaggi di errore specifici e il loro significato:

  • DUPLICATE_ID. Ogni elemento deve avere un ID univoco.
  • INVALID_ELEMENT_LOCATION. Tutti gli elementi devono trovarsi in una colonna, che a sua volta deve trovarsi in una riga.
  • BAD_PROPORTION. Le colonne di una riga devono sommare 12.
  • INVALID_CLASS_FOR_ELEMENT. È stata assegnata una classe del Costruttore di siti web a un elemento non valido.

Il codice non funziona

Se hai del codice che non funziona sul sito, molto probabilmente non è formattato bene o non è HTTPS.

Se il tuo codice contiene link (http:// o //) e il tuo sito usa HTTPS o sei nell'anteprima, dovrai cambiarli in https://. Il motivo è che il codice senza HTTPS non funziona in una connessione caricata tramite HTTPS (anteprima del sito, editor e così via).

Non riesci ad aprire l'editor

Se non riesci ad accedere all'editor al primo caricamento del sito, prova ad aprirlo su una nuova pagina aggiungendo un percorso di pagina diverso alla fine del link dell'editor (ad esempio, /about). Una volta lì, puoi eliminare la pagina che dà problemi e ricrearla.

Se invece l'editor non risponde, puoi forzarne l'apertura con la scorciatoia da tastiera dell'ispettore di elementi. Su Mac la scorciatoia è Command+Option+C. Su PC è Ctrl+Alt+C.

Caricare la versione non protetta dell'editor

Carica la versione non protetta dell'editor per caricare gli script che non sono stati incorporati tramite una connessione sicura. Per farlo, apri l'editor su una connessione non sicura aggiungendo ?nossl all'URL del tuo editor.

Problema di velocità della pagina

L'ottimizzazione della velocità della pagina influisce sul modo in cui vengono eseguiti certi script. Applichiamo l'ottimizzazione PageSpeed sulla maggior parte delle pagine, il che può causare problemi con il tuo codice personalizzato.

Per capire se un problema di velocità sta influenzando il tuo codice personalizzato:

  1. Duplica la pagina che contiene i tuoi script.
  2. Cambia l'URL in «testing_scripts».
  3. Pubblica e controlla la pagina sul tuo sito pubblicato.
  4. Se il codice funziona su quella pagina, contatta il supporto per disattivare l'ottimizzazione della velocità sul tuo sito.

Se usi uno script, puoi anche provare a farlo eseguire in modo asincrono. Non è garantito, ma a volte risolve il problema degli script che non vengono eseguiti bene nel browser.

Per attivare async sugli script, modifica il tuo codice così:

  • Codice vecchio: <script src="https://example.com/script.js"></script>
  • Codice nuovo: <script src="https://example.com/script.js" async defer></script>

Articoli correlati

Commenti

0 commenti

Questo articolo è chiuso ai commenti.