Rimanendo in tema di C R o dinamica utilizzando jscript.

Voglio che adesso poni l'attenzione su un elemento che secondo me è molto d'impatto in questa materia.

Parlo dei tra il tra se non lo conosci è semplicemente un un po' papino che appare generalmente in basso in pagina in basso a destra o in basso a sinistra dipende ovviamente dagli altri elementi che sono presenti nella pagina.

Al suo interno ci possono essere diverse comunicazioni.

Ecco, nella mia esperienza ho implementato questi elementi sia per quanto riguarda progetti di generation o e-commerce, oppure anche per quanto riguarda il business di tipo di vendita e di biglietti per eventi.

In ogni caso ho utilizzato una strategia, ovviamente a sé stante, che possa essere a che potesse essere adattata al business del del cliente.

Ti faccio degli esempi, immaginiamo di essere in un business di regeneration.

Una cosa che funziona secondo me è la recensione um del servizio ovviamente finale.

Quindi se siamo su una landing di Lee Generation un può essere molto impattante se parla di una recensione che ha fornito un cliente, invece se siamo in un business di vendita di biglietti per eventi um una cosa che secondo me ha molto impatto che ha avuto molto impatto quando l'ho utilizzata è stata um tipo andare a fare della porre urgency nel nell utente, cioè andare a far vedere all'utente che sta navigando il sito.

Un messaggio tipo venti ore fa raffaele da milano ha comprato un biglietto quindici ore fa michele da martina franca ha comprato un altro biglietto, quindi nel senso far vedere all'utente che i biglietti vanno via e che quindi ecco deve muoversi a comprarlo.

Invece per quanto riguarda nell'e-commerce um secondo me ha un utilizzo pazzesco se fatto con delle strategie ad hoc.

Ti faccio un esempio supponiamo che ci sono alcune condizioni che vengono verificate, magari l'utente è già cliente, ha già comprato più di qualcosa e quel trans su una pagina prodotto potrebbe essere un uno strumento di marketing che ci permette di dare a questo utente la possibilità di conoscere un prodotto che lui non ha provato.

Supponiamo di essere in un, in un ambiente, in un business di cosmetica se questo utente compra sempre quel prodotto lì, allora noi adesso vogliamo fargli un'offerta, quindi gli facciamo un'offerta, gli proponiamo un bandol direttamente lì in pagina, quindi gli mettiamo questo che in cui gli viene detto solo per te che sei cliente da boh che hai fatto cinque ordini per dire um abbiamo preparato questa offerta speciale e gli mettiamo un pulsantino con un u r l che porta ad un bando di una pagina non raggiungibile in navigazione normale, eccetera eccetera, ma anche cose più semplici, tipo um non so, stai vedendo questo prodotto perché non vedi anche quest'altro oppure quando lo metti a carrello fargli uscire il a volte viene spesso viene comprato anche con quest'altro prodotto, eccetera eccetera.

Comunque, um, dal mio punto di vista il trans è un elemento super super super valido per quanto riguarda il marketing in generale.

Non solo se bisogna dire all'utente, sbrigati che i biglietti in eld finiscono e ti do la prova che stanno finendo, um oppure per aumentare il carrello medio de degli utenti, dei dei clienti ricorsivi, eccetera eccetera.

Veniamo a noi, però come si fa questo booster utilizzando JavaScript e Google Tak manager.

In questo caso anche in questo caso ci facciamo aiutare da Chuck c PT per comodità e per risparmio di tempo.

Io ho già scritto un prot per Chuck g PT e te lo incollo qua lo leggiamo e e lo lanciamo.

Aiutami a creare usando JavaScript un elemento di tipo Questo elemento dove deve apparire in basso a destra nella pagina, deve essere sopra ad ogni altro elemento e deve contenere delle recensioni.

Ciclicamente deve apparire e scomparire con un effetto di transizione da e verso la sinistra dello schermo.

Dev'essere grande il trenta percento della pagina se siamo da desktop e il cinquanta se siamo da mobile.

Questa cosa per me è fondamentale perché ovviamente non possiamo dare una dimensione fissa perché sennò sarebbe troppo piccolo da mobile o troppo grande da desktop.

Quindi dobbiamo chiedergli di suddividere le le due cose di seguito le recensioni ne ho messa una, ne ho messe un paio.

Ecco, insomma, l'output deve essere fornito da righe di codice che possono essere inserite nella console del browser.

Perché nella console del browser? Perché in questo modo, come abbiamo visto nelle scorse elezioni, possiamo andare a testarlo subito e poi prendere quel codice e metterlo direttamente nei tag di G di Google Tak manager.

Solo che ho fatto un errore, gli ho chiesto di metterlo in basso a destra, ma sul sito di RN in basso a destra c'è già un pulsante.

E quindi questo non può succedere.

Quindi vado qua in basso a sinistra nella pagina.

Scusami.

Okay, Deve essere sopra.

Okay, vediamo che cosa ci fornisce.

Okay, eccoci qua.

Perfetto.

Reviews, bla, bla, bla.

Okay, perfetto.

Copriamo il codice, Andiamo in consolle, cancelliamo tutto e incolliamo.

Vediamo che succede tra creato e in esecuzione.

Questo ovviamente è un messaggio di Eccolo qua.

Okay, Marta, venticinque anni, fotografa.

Finalmente ho imparato a gestire.

Mhm è andato via troppo presto.

Andato via troppo presto.

Non ci ha fatto leggere e poi compare sempre la stessa.

Io ne ho messe due.

Okay, bene.

Ci sarà qualche errore qui nel sempre la stessa.

Okay, allora innanzitutto bello il fatto che sia quasi trasparente, ma non si legge.

Bene, Quindi lo lo migliorerei.

Ecco, adesso andiamo a fare un lavoro di UX sull'elemento di C R O.

Quindi Allora innanzitutto lo ringraziamo perché la gentilezza fa sempre bene a tutti.

Allora alcune modifiche, Anzi, volendo, ora che ci penso Anzi no, aspetta.

Okay, Aggiun-, aggiustiamo la visualizzazione.

Poi la parte di, um, la parte di la parte di stile lo facciamo noi.

Okay, Quindi prendiamo solo la visualizzazione.

Secondo me è troppo veloce.

Um, anche qui io mi ero scritto Perfetto.

Mi ero scritto un altro prot perché immaginavo che la visualizzazione fosse troppo veloce.

Ah, scusami.

Allora, il booster deve apparire dopo cinque secondi, rimanere visibile per quindici e poi scomparire per riapparire dopo cinque secondi e ripetere il ciclo perfetto.

Quindi non c'è dopo cinque secondi, c'è per quindici secondi e poi scompare.

Riparte il ciclo.

La prima volta che appare deve mostrare la recensione numero uno.

Facciamo numero uno la seconda volta, la numero due e poi ricominciare il ciclo.

Okay, facciamoci modificare il codice.

Mhm.

Okay.

Eccolo.

Left ZX diecimila.

Okay, bene.

Coprilo.

Ricarichiamo la pagina.

Così togliamo il vecchio e incolliamo l'uovo.

Okay.

Quattro cinque.

Eccolo, Antonio.

Tre anni di digital marketing specialist con le hanno acquisito skill che mi hanno aiutato tantissimo nel mio lavoro.

Perfetto.

Adesso è leggibile, quindi dovrebbe durare circa quindici secondi e poi sparire.

Vediamo.

Uno, due, tre, quattro, cinque.

Mhm.

Okay.

Dieci secondi, quindi o okay, sparisce per cinque, poi dopo cinque riappare.

Va bene.

Finalmente ho imparato a gestire i miei social per poter acquisire clienti per i miei corsi da fotografa di fotografia.

Okay, bomba.

Benissimo.

Mi piace Adesso andiamo ad aggiustare la parte di stile.

Cosa farei io? Lo renderei innanzitutto non trasparente.

Poi potremmo fare in modo che il nome e il su Okay, Il nome l'età e la la posizione.

Insomma, il ruolo della persona siano più grandi mentre il testo poi rimanga più piccolino.

Quindi che cosa facciamo? Copriamo il codice e apriamo un editor di testo.

Io utilizzo sublime.

Mi piace moltissimo, Sublime text, perché ovviamente contiene tutta una serie di funzioni ad hoc per la modifica del testo per la modifica del codice.

Ma ovviamente tu puoi scegliere quello che vuoi.

Allora andiamo a capire come effettuare queste modifiche.

Allora, innanzitutto partiamo dallo stile background colore.

Eccolo.

Quindi qua dice che, um è nero con opacità all'ottanta percento.

Innanzitutto, andiamo a mettere l'opacità al cento percento Box Shado non ci interessa.

È la Shado, appunto, del l'ombra del Box Z Index.

Poi c'è Antonio trentun anni, bla, bla, bla.

Okay, questo è il cambiare la review.

Questa è la media query.

Cioè, se la grandezza dello schermo è più piccola di se- di sette e sessantotto.

Quindi se siamo su un tablet, insomma, um, il Trust booster è cinquanta percento, altrimenti trenta praticamente le le cose che gli abbiamo chiesto.

Quando su C C.

PT per distinguere desktop e mobile e poi c'è la parte di inizio.

Questo console punto log non ci interessa.

Lo possiamo cancellare.

Copriamo, torniamo qui e lo rilanciamo.

Okay, vediamo come esce.

Oh, Reading ud Ah, okay.

Ho sbagliato qualcosa? No.

Forse l'ho lanciato semplicemente troppo presto.

Okay, vediamo.

Okay.

Eccola qua.

Adesso è nera.

Perfetto, quindi Okay, allora lui crea un paragrafo Mhm e ci mette le Okay, perfetto.

E poi fa dell'elemento.

Perfetto.

Okay, quindi che cosa fa? Va a lui qui sopra.

Crea l'elemento, gli dà tutto.

Quindi questo è il oggettivamente a livello tecnico di H T M L.

Quindi questo è il quadratino nero che adesso abbiamo appunto fatto nero senza opacità.

Qui ci mette le reviews qua potremmo mettere tantissime reviews e poi qua dentro cambia la review.

Okay, quindi noi per fare quello che abbiamo detto, dobbiamo andare a modificare, a fare due modifiche.

Innanzitutto, la prima è direttamente qua e la seconda è su questa.

Su questa riga, questa riga di codice invece che fare UD dobbiamo fare un inner H T m l.

Perché? Perché se noi facessimo guarda ti faccio vedere se io adesso vado a modificare strong il titolo e chiudo strong quindi strong serve a farlo grassetto è un h t m l che serve a fare grassetto.

Poi ci metto un b r in modo tale che va a capo se io adesso lo prendo così questo elemento qua cioè strong, viene dentro il p il paragrafo quindi non è visto come un elemento h t m l non tacchino h t m l ma viene visto come un um del testo quindi lo copio vado qua, facciamo la prova del nove, ricarico la pagina cancello e incollo vediamo se avevo ragione.

Ecco qua vedi c'è scritto strong antonio trentun anni chiuso strong e poi b r.

Quindi non va bene così.

Dobbiamo modificare questa riga qui non è più un ma deve diventare un inner h t m l cioè è praticamente una roba tipo trust punto inner h t m l uguale e poi c'è questo che io non ho mai capito come farlo.

Infatti lo copio sempre da un'altra parte in cui c'era scritto e dobbiamo mettere tipo dollaro um parentesi graffa aperta che va a dire è una variabile in sostanza alla posizione Car Review Index.

No, eccolo qua.

Okay, Okay, perché è già quello.

Okay, perfetto.

Dovrebbe funzionare in questo modo.

Dovrebbe funzionare.

Io Quindi provo a cancellare questa.

Ah, certo.

Dobbiamo mettere la Questo è l'apice americano.

Alla fine ci mettiamo il punto e virgola per comodità e testiamo.

Dovrebbe funzionare adesso in collo.

Infatti.

No? La prima proviamo la seconda.

No? Comunque mhm.

Okay.

Um Review X che va utilizzato perché questo? Perché Review Element è il paragrafo che contiene il test review corrent Boh H T M l Review Element non ci funziona e quindi noi lo forziamo e facciamo reviews alla posizione review X Review Index.

In questo modo dovrebbe funzionare se non funziona neanche adesso, um, ci faremo aiutare da Okay o a lui.

Perfetto.

Quindi, um Antonio, trentuno anni, digital marketing specialist, eccetera, eccetera.

Bene, quindi adesso le modifiche in H T m L.

Che abbiamo fatto qua funzionano.

Volendo potremmo aggiungerci delle stelline.

Da quando è cambiata la modifica, la visualizzazione di questo io non capisco più come si usa.

Non lo so.

Due click.

Okay, a posto.

Okay, Grazie.

Quindi due, quattro, cinque.

Quindi cinque stelline, poi di nuovo br, poi strong, bla, bla, bla.

E poi copriamo esattamente la stessa cosa e lo mettiamo sulla seconda recensione.

Perfetto.

Okay, copio.

Andiamo a vedere Rica-.

Riaggiorniamo la pagina.

Cancello in collo, vediamo se viene carino.

Eccoci qua.

Cinque stelle, Antonio.

Trentun anni, bla, bla, bla Ecco qua.

Se apre ovviamente la pagina Il booster si ingrandisce, ovviamente.

Ecco, questa è questa è un ad esempio, tu puoi farlo.

Puoi aggiungere tutto lo stile che vuoi.

Puoi puoi farlo di un colore diverso effettivamente rispetto al background del del sito.

Sì, ci sta tutto.

Puoi a a aumentare La grandezza del font va benissimo.

Fallo pure e divertiti.

E niente spero di spero di averti insegnato qualcosa di utile.