Lo Strumento di Audit Incorporabile è stato progettato per essere semplice e facilmente modificabile. Abbiamo volutamente scelto di non comprimere o offuscare il codice da incorporare come fanno altri strumenti di terze parti che impediscono esplicitamente di personalizzare il codice.
Invece, esponiamo tutto il CSS in un semplice blocco di codice sopra il codice di incorporamento HTML in modo che tu possa stilizzare gli oggetti del modulo purché tu abbia alcune conoscenze di base di CSS.
Basta aggiungere alcune righe di CSS nelle sezioni pertinenti per personalizzare completamente l'aspetto e la sensazione. Se hai conoscenze intermedie di HTML, puoi modificare la struttura del modulo stesso.
Puoi anche aggiungere le tue funzioni JavaScript (ad esempio: "extra form validation") oppure puoi chiamare altre funzioni / sistemi "onSubmit" o "onClick" all'interno del modulo.
L'unica raccomandazione di personalizzazione che abbiamo è di non apportare alcuna modifica al blocco di codice JavaScript poiché ciò può causare errori. Relativamente a questo, suggeriamo di non spostare troppo gli elementi del "form" dalla loro disposizione originale poiché alcuni riferimenti JavaScript si basano sul posizionamento relativo degli oggetti nel "form".
Oltre a questo, ti consigliamo vivamente di personalizzare il modulo in modo che corrisponda all'aspetto e alla sensazione del tuo sito web. Dovrebbe sembrare una parte naturale dell'esperienza del tuo sito e non un "widget" aggiunto.
Come questo modulo incorporato di Digital Butter:
Lo suggeriamo perché vediamo le agenzie raggiungere livelli più elevati di generazione di contatti quando personalizzano il "form" in modo appropriato per adattarlo allo stile del loro sito web.
In questa guida esamineremo le 3 personalizzazioni avanzate più comuni per il Modulo Incorporato:
-
- Convalida avanzata dei moduli
- Attivazione di un evento Google Analytics o Facebook durante l'invio del modulo
- Personalizzazione degli stili dei campi del modulo o del pulsante di invio
Ma prima, diamo un'occhiata a come è strutturato il codice di incorporamento:
Esplorare il codice di incorporamento HTML di base
Per generare il codice di incorporamento, vai alla scheda Embedding Settings e premi il pulsante "Salva Impostazioni & Genera Codice di Incorporamento". Di seguito è riportato un esempio del codice base.
Noterai che la prima sezione è CSS, seguita da HTML e infine JavaScript. Dovresti personalizzare le prime due sezioni e lasciare il JavaScript così com'è. Come suggerito nel commento alla 2ª riga, puoi spostare la sezione CSS nel tuo file CSS in modo che sia tutto gestito centralmente in un unico posto.
1. [Convalida] Avanzata del Modulo
Il modulo di incorporamento SEOptimer ha una semplice convalida del modulo integrata per impostazione predefinita. Al momento dell'invio, il JavaScript controlla tutti i campi del modulo per l'input valido e nel caso ci sia un input non valido, attiva un messaggio di avviso JavaScript nel browser come il seguente:
Le due alternative più popolari per aggiungere una convalida robusta al "Modulo Incorporato" sono la convalida dei vincoli e la convalida in tempo reale:
Convalida dei "vincoli"
Consulta la guida di CSS-Tricks su [convalida dei vincoli] che utilizza messaggi contestuali sul campo del modulo o intorno ad esso quando viene messo a fuoco. Questo metodo anticipa l'utente e lo guida verso l'adesione al formato di input previsto o, nell'esempio seguente, almeno [inserendo] qualcosa nel campo:
.png)
Validazione in tempo reale
CSS-Tricks ha anche una guida eccellente su la validazione in tempo reale che fornisce la validazione nel campo all'utente mentre digita. Questo può essere semplice come l'iconografia per indicare l'input corretto nel modulo:
2. Attivare un evento di Google Analytics o Facebook durante l'invio del modulo
Attivare eventi di tracciamento come GA o Facebook per la misurazione degli obiettivi o il retargeting è un ottimo modo per sfruttare il traffico utilizzando il tuo "Embed Form". Il modo migliore per farlo è con uno strumento di "Tag Manager" come Tag Manager (GTM) di Google.
In questo modo, puoi installare GTM come contenitore vuoto sul tuo sito web e poi gestire tutti i "tag" e i "pixel" direttamente da GTM senza la necessità di modificare il codice ogni volta.
Ci sono due modi in cui GTM può attivare eventi al momento dell'invio di un modulo sul tuo sito web:
- Utilizzando il trigger del modulo integrato quando si verifica l'evento submit del modulo
- Facendo affidamento su un Evento personalizzato (linea di JavaScript) che deve essere aggiunto al data layer di GTM
Per la maggior parte degli utenti, la prima opzione è la migliore poiché è la più facile da implementare e funziona bene. Il modulo di incorporamento di SEOptimer utilizza un'azione submit standard HTML quando l'utente lo completa, quindi finché non cambi il modo in cui il modulo invia i dati, allora il trigger integrato di GTM è la strada da seguire.
Avrai bisogno di creare un nuovo Trigger in GTM basato su "Invio Modulo":
.png)
Assicurati anche di abilitare la variabile incorporata "Form ID" di GTM. Questa variabile identificherà l'ID del modulo incorporato dal tag form nell'HTML.
Se finisci per rimuovere l'azione di invio del modulo [Embed] e sostituirla con JavaScript personalizzato, questo causerà il mancato funzionamento del trigger integrato di GTM con il modulo.
È lì che dovrai aggiungere una chiamata JavaScript per notificare al data layer di GTM che si è verificato un evento. Questo approccio è comunque semplice poiché deve essere fatto solo una volta, quindi qualsiasi evento futuro che desideri aggiungere può essere facilmente gestito direttamente in GTM. Il JavaScript sarà simile a questo:
dataLayer.push({'event' : 'formSubmitted', 'formName' : '[Audit] del sito web'});
Per istruzioni "passo-passo" su come implementare entrambi i metodi in GTM fare riferimento alla guida di Click Insight.
3. Personalizzazione degli "stili" del campo modulo o del pulsante di invio
Elementi modulo "arrotondati"
Questo esempio dell'agenzia digitale canadese Reach First è un ottimo esempio di come poche righe di CSS possano essere utilizzate per modificare lo Strumento di Audit per adattarlo all'aspetto e al feeling del sito web. In questo caso, usano l'arrotondamento su tutti gli altri campi di input e pulsanti in tutto il sito:
Qui possiamo vedere che l'attributo "border-radius: 50px;" è utilizzato per ottenere l'effetto arrotondato sul campo di input testo dello [Strumento di Audit]. Si noti che l'attributo di padding a destra è impostato su 160px per fornire un padding sufficiente tra l'area di input e il pulsante "[Controlla]". Questo impedisce al testo inserito di sovrapporsi al pulsante.
Per il pulsante stesso, solo gli attributi "border-top-right-radius" e "border-bottom-right-radius" sono stati impostati su 50px per ottenere l'effetto coesivo tra il campo di input e il pulsante:
Dimensionamento e Posizionamento degli Elementi del Modulo
La società di consulenza australiana di marketing digitale, Stepps ha integrato molto bene lo Strumento di Audit in una pagina di destinazione separata "Analizzatore del Sito Web" utilizzando larghezze variabili sui 3 campi del modulo e spostando il pulsante verso il basso in una sua riga a larghezza intera:
Le larghezze degli elementi del modulo sono relative in base al contenitore div in cui sono contenuti. Per ottenere ciò, la larghezza è impostata su una percentuale nel CSS. Per il campo "Inserisci il tuo sito web", possiamo vedere che questo campo ha una larghezza del 25%:
mentre i campi "Nome" e "Email" sono più piccoli con una larghezza del 15% ciascuno:
Infine, il pulsante "Genera il Mio Report" ha una larghezza di 1px più ampia della somma dei campi di input: 25 + 15 + 15 = 56%
Questi esempi mostrano quanto sia flessibile e facile aggiornare il CSS dello "Strumento di Audit" per adattarlo all'aspetto e alla sensazione del sito web della tua agenzia. Se riscontri problemi durante l'installazione dello "Strumento di Audit", controlla anche la nostra guida completa!
