L'ultimo elemento di cui voglio parlarti.

Per quanto riguarda la c r o dinamica con javascript sono gli exit intent pop up.

Ti assicuro che questo elemento, seppur può essere visto come fastidioso, è qualcosa che può cambiare totalmente la c r delle landing.

Questo elemento infatti io lo utilizzo spessissimo tutte le volte in cui mi trovo a lavorare su una landing page, magari di un progetto di generation, e non capisco bene perché la c r è bassa.

Per farti un esempio, qualche tempo fa mi sono trovato a lavorare su una landing di un cliente che aveva appunto una c r un rate, un po' bassino.

Quello che ho fatto è stato aggiungere due elementi che si sono dimostrati poi fondamentali per l'ottimizzazione della ux della pagina, successivamente appunto alla raccolta di dati.

Quali sono stati questi due elementi che ho aggiunto? Nell' exit intent? Tre domande tre delle domande principali che venivano fatte ai sales.

Poi quando successivamente chiamavano l'ed e un campo input cioè io chiedevo alle persone che lasciavano la pagina um qual era quell'informazione che loro volevano che non avevano trovato.

Cioè immagina un exit intent pop up con tre domande, un titolo hai bisogno di aiuto.

E poi tre domande tra appunto le domande principali che venivano fatte a sales e poi un campo input.

Questo campo input era gestito attraverso un form che poi la domanda che veniva inserita e attraverso un wok veniva mandato, veniva poi gestito con con zapier o make o integrate o qualsiasi strumento di gestione di web wek.

Scusami e poi veniva mandato un un messaggio su slack con la domanda Bene, dopo una una fase in cui abbiamo raccolto dei dati, siamo riusciti a capire cosa le persone volevano e abbiamo incrementato la c r della pagina in modo in modo molto, molto grande.

Okay, ora voglio farti un esempio tecnico, tornando ovviamente sul sito di r n e andando a utilizzare g PT per farci aiutare a creare per aiutarci a creare il pop-up.

Allora innanzitutto, quello che voglio fare è aprire c g PT e chiedergli aiuto okay? E chiedergli di darci una mano a creare il pop-up.

Ovviamente io ho già fatto questa cosa semplicemente per appunto, um risparmiare tempo questo è il mio prot adesso lo leggiamo insieme e um e lo commentiamo allora aiutami a creare un exit pop up da desktop dovrà partire quando il mouse dell'utente esce fuori dalla schermata della pagina, mentre su mobile dovrà partire dopo sessanta secondi.

Ecco questa informazione che è fondamentale per gestire il computer dell'ex pop up perché ovviamente da mobile non possiamo gestire.

Quando l'utente col mouse esce fuori dalla schermata, quindi sta cambiando pagina o sta chiudendo la schermata, quindi dobbiamo trovare il tempo il tempo ottimale di gestione del pop-up da mobile nell' exit intent prevedi queste cose un titolo hai bisogno di informazioni, Poi tre domande diverse, tutte cliccabili.

Uno.

Dove posso seguire i contenuti? Due.

Rilasciate certificazioni tre.

Come vi posso contattare? Ovviamente queste sono domande che ho trovato nella sezione FAQ e che non per forza corrispondono alle domande più frequenti che vengono fatte dalle persone.

È ovviamente solo un esempio.

Al click su una qualsiasi domanda dovrai portare l'utente l'utente verso questo Selector.

Cosa vuol dire che quando L'utente sta navigando poi fa per uscire con il mouse, noi lo prendiamo e lo riportiamo.

Siamo qui giù sulle FAQ con una transizione.

In questo modo L'utente vede che c'è una risposta attiva da parte del sito verso la sua domanda.

Quindi c'è uno spostamento verso la risposta alla sua domanda se l'utente clicca sulla domanda uno.

Fai click su questo elemento.

Questo elemento è questo simbolino più di ogni domanda.

Cioè io gli dico se l'utente clicca sulla domanda uno e cioè dove posso seguire i contenuti dinamicamente? Dovrai fare questo click in modo tale che arriva l'utente arriva giù e si apre in automatico il ballerino in cui c'è.

La risposta è lo stesso.

Se l'utente clicca sulla domanda due.

Se l'utente clicca sulla domanda tre.

Fai click su questo elemento perfetto.

Altra cosa molto importante è fare in modo che la risposta sia evidenziata.

Cioè immagina che il comportamento dell'exit in pop up porta l'utente giù.

Magari avviene questo, ma lui non se ne accorge lui okay, magari legge che c'è la domanda, ma ce ne sono tantissime qui.

Quindi come facciamo? Aggiungiamo un nuovo che qui non ho scritto.

Scusami, lo vado a prendere dal che ho scritto prima quando l'utente.

Ecco, clicca sulla domanda tre.

In questo caso ovviamente lo farei per tutti, quindi quando l'utente clicca sulla domanda tre Aggiungi un bordo color giallo a questo elemento cos'è questo elemento.

Questo elemento è tutto l'elemento della pagina della domanda.

Scusami come vi posso contattare, quindi io ho inserito il riferimento a tutto questo elemento, quindi sempre con tasto destro copi j spat quindi questo adesso lo cancello o lo cancello e lo riscrivo in modo tale da farti vedere che è praticamente la stessa cosa.

Quindi poi stile il fonte deve essere int quindi eredita il font dalla pagina, il colore del testo nero e lo sfondo del pop-up bianco.

Ovviamente su una pagina in cui lo sfondo è nero e il testo è bianco.

Voglio creare una diversificazione e quindi vado a invertire i colori.

Come sempre.

L'output deve essere formato da righe di javascript che posso inserire nella console del browser.

Andiamo invio e non appena finisce di scrivere il nostro codice, andiamo a incollarlo nella console.

Quindi io intanto mi apro la console, cancello tutti i messaggi e aspetto che finisca.

Perfetto.

Copio il codice e lo inserisco qui.

Metto la freccia nella pagina in modo tale da non avere errori e lo invio.

Quindi il funzionamento.

Abbiamo detto che quando con la mia freccia, quando con il mio cursore vado via Aspetta Scusami, ho cliccato di là.

Vado via.

Appare il pop-up, il pop-up, ovviamente in questo momento è bruttino.

Va bene, Dove posso seguire i contenuti? Rilasciate certificazioni.

Come vi posso contattare? Clicco qui e lui arriva giù.

E purtroppo non ha funzionato il click qui.

Quindi adesso lo andiamo a rivedere.

Ma come puoi vedere, ha aggiunto un bordino giallo sulla domanda.

In questo modo L'utente sa che è questa la risposta alla domanda.

Andiamo a vedere solo un attimo il motivo per cui non ha funzionato.

Quando l'utente, clicca sulla domanda tre.

Fai click su questo elemento Selector bla, bla, bla Ah, okay.

Forse era già aperta.

Scusami.

Quindi ricomincio.

Forse avevo aperto la la domanda.

Riporto la funzione.

Okay.

Come vi posso contattare? Ecco qua.

Sì, avevo aperto prima la domanda e quindi quando lui ha fatto click l'ha chiusa.

Ecco, sì, ovviamente dovremmo aggiungere il controllo se è già aperto, lascialo aperto se è chiuso, aprilo, eccetera.

Ma in questo modo noi riusciamo a fornire all'utente un'esperienza in cui l'exit intent pop up risponde oggettivamente alla sua domanda, poi che sia brutto in questo momento.

Va bene.

Ecco, ovviamente potremmo giocare con lo stile.

Ad esempio, possiamo metterlo al centro della pagina, quindi grazie.

Alcune modifiche.

Um, fai apparire il pop-up al centro della pagina.

E poi, come hai potuto vedere qui il pop-up insomma, non ha la X.

Quindi dobbiamo aggiungere una X per chiuderlo.

E soprattutto, appare sempre.

Quindi dobbiamo fare in modo che appaia una sola volta.

Tendenzialmente.

Quindi aggiungi in alto a destra una XX che chiude il pop up e poi fa um, sì, fai in modo che il pop up si apra una volta sola per sessione.

Okay.

Eccola.

Close Button.

Perfetto.

Okay, perfetto.

Copio il codice.

Vado qua, ricarico la pagina a console aperta.

Aggiungo il mio codice e mi muovo e poi esco.

Perfetto.

Okay.

Brutto eh? Bruttissimo.

Ma funziona.

Quindi se chiudo il pop-up perfetto è chiuso.

Se faccio di nuovo exit non appare più, quindi bene.

Um Okay, adesso potremmo andare a giocare con la sua con il suo stile.

Um grazie.

Um, altre modifiche? Fai in modo che la larghezza del pop up, um, permetta al titolo di stare in una sola riga.

E poi Ma cos'altro possiamo aggiungere Ah, certo, Certo, assolutamente.

Possiamo fare in modo che lo sfondo? Um scusami, Forse ho già fatto.

Ci provo.

Cancello la consolle invio.

Okay.

Sicuramente avrà aggiunto qualche controllo nello storage quindi fammi vedere un attimino, Close Button! Okay.

Ah, eccolo! Exit! Quindi se è già stato spara.

Scusami.

No Lighthouse application.

Se è già stato sparato non farlo più.

Eccolo qua, Exit.

Noi lo cancelliamo.

In questo modo possiamo rilanciare L'exit Intent e sappiamo che abbiamo tolto Ops, Eccola qua.

Okay, ecco qua.

Quindi abbiamo detto che l'exit intent.

Adesso lo facciamo più grande e lo sfondo.

Anzi, possiamo fare due cose.

Lo sfondo diventa um scuro, quindi una sorta di nero trasparente a zero punto otto in modo tale che si veda solo l'exit pop e lo scrollo della pagina venga bloccato.

Perfetto.

Quindi fa in modo che la larghezza del pop up permetta al titolo di stare in una sola riga.

Poi magari aumentiamo il font del testo.

Um, se ci mettiamo un font size uno punto quattro REM, quanto è grande? Okay, quindi il diventa uno punto quattro REM.

Il delle domande deve essere uno punto quattro REM.

Poi, um, blocca lo scorrimento della pagina e aggiungi uno sfondo nero opaco a zero punto otto in modo che si veda bene il pop-up perfetto.

Con queste modifiche abbiamo reso il l'exit pop, diciamo, um, molto ben visualizzabile rispetto al resto della pagina.

Io per portarmi avanti, vado a vedere se c'è il shown e lo cancello perfetto.

E poi, non appena sarà pronto il codice, facciamo quest'ultimo test.

Perfetto.

Okay, A posto.

Quindi copri il codice, ricarico la pagina, torno in consolle, cancello tutti i messaggi e lo invio.

Okay, Perfetto.

Adesso mannaggia.

Forse si è l'avevo rimosso, ma probabilmente eccolo di nuovo.

Tru, andiamo di nuovo.

Okay, quindi torno in console.

Um, rilancio l'ultima versione.

Eccolo qua.

Okay, non ha ben capito cosa vuol dire mettere.

Hai bisogno di ulteriori informazio-.

Ah, no, Scusami.

Questo è proprio sbagliato.

Forse ho copiato il codice sbagliato.

Devo ricancellare questo.

Sì, infatti.

Ho messo una versione vecchia.

Okay, Console, invio.

Vediamo.

Ah, okay.

Eccolo qua.

Va bene.

Non ha ben capito questa parte qua, ma va bene.

C'è lo scroll non è bloccato.

Purtroppo non ha funzionato bene il blocco dello scroll, Quindi questo possiamo dirglielo, ma il lo sfondo funziona bene, quindi possiamo dirgli che grazie.

Um, non funziona il blocco dello scroll della pagina quando si apre il pop up.

Okay, vediamo se ci aggiorna il JavaScript del blocco.

Io intanto torno a cancellare lo Okay.

No, Mannaggia! L'ha rimesso! Forse.

Eccolo! Infatti.

Chiudi! Ricarico la pagina da qui così, a posto.

Okay, vediamo se ha finito.

Eccolo qua.

L'over copia codice.

Torno in consolle in collo.

Provo a scrollare.

Vado su.

Perfetto.

Ora non funzio benissimo.

E come vi posso contattare? Giù e appare Appare il rettangolino giallo attorno alla domanda quindi di evidenziazione lo scrollo è tornato attivo il um lo sfondo si è tolto e tutto funziona come prima.

Se vado in exit intent non riappare a posto.

Perfetto.

Bene, funziona.

Grazie, Dell'attenzione.