Ogni pagina web è composta alla fine di tutto da h t, m l e c s s che tu utilizzi un c M s come wordpress o un c M s per uno store come shopify age presta shop, qualunque esso sia.

Alla fine ciò che verrà mandato in in lettura sul braccio howser di ogni utente sarà sempre e solo html e css, ovviamente con l'aggiunta di javascript per alcuni elementi dinamici dinamici.

Scusami, ma cosa vuol dire che una pagina quindi è fatta da html e c s s vuol dire che noi saremo in grado di identificare qualsiasi elemento, sempre utilizzando appunto i selettori c S s mi spiego meglio.

Questo è un elemento H t m l è il mio titolo a livello visivo, ma quello che mi interessa è appunto andare a identificare questo elemento.

Quindi come faccio? Faccio doppio click su tutto l'elemento o su una porzione di esso, poi tasto destro.

Quindi vado qui in ispezione quando ispezionano l'elemento mi si um come dire si evidenzierà nella pagina accanto dove ci sono tutti gli elementi.

Qual è quel singolo elemento? Come faccio ad arrivare esattamente a quell'elemento? Lì faccio di nuovo tasto destro, poi copi e poi copy j s.

Cosa vuol dire? Questo copia ci fornirà esattamente il percorso per raggiungere quell'elemento via.

Se io adesso vado in consolle e in collo vedo che questo piccolo codice, cioè document punto selector elemento, mi fornisce esattamente questo elemento qui come faccio io a leggerne il contenuto? Faccio freccia su o di nuovo incolla e poi faccio punto inner text inner text mi fornisce il testo presente in quell'elemento.

Okay, a cosa serve tutto ciò? Immagina questa situazione immagina di essere in una situazione in cui io sto portando traffico sul mio sito web con delle campagne di ricerca su Google Apps e quello che voglio fare è modificare dinamicamente la mia pagina sulla base sulla base di alcune dinamiche.

Quindi supponiamo che io stia creando delle campagne per la consulenza Google e consulenza Google Z per le performance Max.

Così per inventare andrò a creare due annunci diversi nel primo il primo mi servirà appunto per portare utenti sulla mia landing che hanno fatto ricerche specifiche per consulenza Google Ads, quindi un po' più generica e altre invece per ricerca di performance x, quindi molto più specifico.

Cosa posso fare? Aggiungo nell'u r l un parametro che sia esso un U t M o che sia un parametro um inventato da me, inserisco tipo um tipo esatto tipo uguale generica o tipo uguale performance max.

Andrò quindi a leggere l' u r l di quella pagina e se nell' u r l il valore della yang tipo è generico lascio così altrimenti se è performance max, io voglio andare a modificare il titolo della mia pagina.

In che modo partiamo dall'ultimo punto quello di modifica come abbiamo visto qua, noi siamo riusciti a arrivare al testo dell'elemento ma possiamo modificarlo cioè aggiungendo una modifica e cioè inner text è uguale a cosa consulenza performance max, per esempio io vado a dire che l'elemento deve cambiare e deve essere questo.

Quindi quello che posso andare a fare nel caso di cui abbiamo appena parlato è copiare questo codice e andare ad inserirlo in un nuovo tag.

Clicco sul nuovo quindi configurazione abbiamo visto che la il raggiungimento di questo elemento e la conseguente modifica è stata fatta via codice.

Per fare questa roba qua avremo bisogno di un tag di tipo h t m l personalizzato.

Il nostro codice è un javascript, quindi dovremo anteporre a tutto il codice la l'identificazione appunto, script tra parentesi angolare e posporre a tutto il codice l'identificazione della fine dello script.

Esattamente in questo modo.

Quindi apro lo script, chiudo lo script dentro, vado ad inserire il mio codice perfetto.

Questo è il mio codice di modifica o manipolazione del titolo della mia landing page.

Abbiamo detto però che deve Ghersi solo quando nell'u r l c'è uno specifico parametro perfetto.

Quindi io vado in attivazione, clicco sul pulsante P e creo un nuovo attivatore di tipo visualizzazione di pagina alcune visualizzazioni di pagina perché abbiamo detto che nell' u r L deve esserci uno specifico campo, quindi vado a identificare il mio page U R L che contiene tipo uguale performance max.

Quindi mi copio questo valore per comodità e vado a salvare il mio attivatore e quindi dico questa è la con atterraggio G S Performance performance Max e salvo Perfetto, quindi salvo il mio tag H T m l Per comodità io vado a inserire delle um come dire degli standard quando vado a scrivere i tag.

Questo è un tag di tipo H T m l personalizzato, quindi custom H T M l il tag di tipo custom H t M L mi permette di andare a Mhm capire in futuro ad occhio quando ho tutta la mia sfilza di tag di che cosa parliamo questo tag quindi sarà il mani mani, popolazione, titolo, performance non l'ho scritto bene, Max Perfetto salvo salvo il mio tag e vado in anteprima ballo sulla mia pagina e vedo che ovviamente l'u r l non contiene performance.

Max, vado qui.

Lo cerco Manipolazione performance.

Max non è stato sparato.

Se volessi andare a vedere il visualizzazione di pagina, quindi qual è? Specificatamente, il che non è stato attivato.

Vado sui miei window lad.

Vedo che Window lad non ha attivato questo.

Quindi Landing atterraggio GZ performance Max qua dice il filtro dovrebbe essere che l' r l contiene tipo performance.

Max lo contiene? No.

E quindi io non parto.

Giusto? Vado sul mio sito web e aggiungo un un query string con tipo uguale performance.

Max, quello che succede è che magicamente il javascript che abbiamo scritto viene attivato.

Come faccio a vedere dove clicco sul sulla pagina clicco sul mio tag e lui mi dice che il container che lo ha sparato è stato il ventuno il ventuno io posso raggiungerlo cliccando qui o cliccando fuori.

E poi il ventuno ci clicco su e lui mi dice che landing atterraggio gz performance max è stato attivato perché nel mio r l c'è tipo uguale performance max esattamente questo quali sono altri casi in cui questa cosa è molto impattante? Ti faccio un esempio c'è questo sito perfetto ops vabbè, ha degli errori, noi li tralasciamo.

Immagina che questo sito web porti traffico eh diverso cioè ci sono tante campagne c'è la campagna rimborso per vodafone o rimborso per fastweb, Vodafone e fastweb ovviamente hanno dei dei segni di riconoscimento molto diversi tra loro.

Vodafone è rosso, fastweb giallo oltre al nome, quindi nella stessa maniera noi potremmo cambiare diverse cose.

Esempio andiamo sul sito di vodafone e capiamo il codice colore dell'oro rosso.

Possiamo farlo in diversi modi, ma noi adesso cliccherà sulla loro c t a rossa perché è il rosso che ci interessa.

Andiamo a fare click su ispeziona e poi nello stile, quindi un po' più in giù andiamo a vedere che il loro background colore è questo.

Quindi sarà r g b duecentotrenta zero zero.

Quindi questo colore diventa il nostro colore di riferimento.

Torniamo qui e vogliamo cambiare il colore della C T a.

Quindi di nuovo ispeziona andiamo a cercare.

Faccio un po' di zoom out perché è cambiata la visualizzazione.

Ecco.

Quindi lo ri clicco.

Eccolo qua.

Lui ha una classe ed eccolo qua background bla bla, bla.

Quello che voglio fare è questo um posso farlo qua e in element style.

Lo vado a modificare direttamente, quindi back background colore due punti in collo.

Perfetto.

Adesso abbiamo lo stesso colore di Vodafone.

Come facciamo a farlo via Javascript Rica- ricarico la pagina così te lo mostro, lo seleziono, vado qui copio.

Copri il suo pat.

Faccio un test in consolle, quindi cancello tutto dalla console incollo il colore è uno stile a differenza del testo.

Quindi qui dovrò andare a cercare tra le mie cose lo stile, lo stile mi dice che c'è un c s s bla bla bla che fa cose.

Quindi io voglio andare a modificare il colore.

Modificare il colore vuol dire cambiare un attributo.

Quindi dopo stile farò punto di nuovo set a però pertino ricarico la pagina.

Vado di nuovo a selezionare il pulsante Tasto destro Copy J s pat.

Vado in consolle in collo il Pat javascript per raggiungere quel pulsante.

Il colore, a differenza del testo, è uno stile quindi fa parte del c S S, quindi farò punto style style ecco e qual è la proprietà dello stile che voglio andare a cambiare? Come abbiamo visto qua è background color quindi torno qui e faccio punto background color eccola qua uguale esattamente come l'inner test torno qui, mi copio l'r g b in collo ed ecco che il colore del testo è cambiato allo stesso modo vado a cambiare il testo del titolo anche in questo caso, quindi copy jt console invio in collo scusami punto in text quello che voglio fare è problemi con vodafone ed ecco che la mia landing è cambiata totalmente con due righe di codice.

Queste due righe mi permettono di essere molto più impattante a livello di c r, quindi di rate nei confronti di questo utente che ha problemi con vodafone e invece di arrivare su una pagina che è super america trova già un percorso strutturato verso la risoluzione del suo bisogno.

Questo è solo un esempio di modifiche che possiamo fare in pagina utilizzando il selettore degli elementi più avanti vedremo delle modifiche ancora più avanzate e soprattutto come farci aiutare da C C PT per scrivere il codice.