Sono certo che avere competenze anche base di JavaScript può darti una quantità di skill tecniche e strategiche molto più avanzata di quanto tu stesso immagini ricorda.

Sempre che ogni browser pone la sua attenzione sul risultato finale, cioè h, t, m l e C S s pone la sua attenzione su ciò che viene mostrato all'utente.

Quindi parliamo sempre e solo di H, t, M L e C S S non tiene in considerazione la struttura del Se è uno shopify se è un Magento, se è una landing page fatta su elemento, al browser non interessa, interessa solo quello che mostra all'utente.

Saperti interfacciare con gli elementi che vengono mostrati all'utente ti rende quindi capace di andare a modificare esattamente quegli elementi lì.

Questo ti dà una grandissima marcia in più per quando parliamo di C R o per quando parliamo di UX.

Per farti un esempio pratico, immagina questo scenario.

Ci sono due campagne che portano entrambe sullo stesso sito.

Quindi supponiamo che stiamo facendo le generation e abbiamo due campagne su una c'è.

Una promo su un'altra no.

Quindi quello che dobbiamo gestire sono, um un u r l perché abbiamo una landing e elementi della pagina della landing quello che ti consiglio invece di andare a duplicare la pagina, creare quindi un altro u r l andare a modificare, magari campagne in giro, eccetera eccetera.

Quello che puoi fare è aggiungere semplicemente un parametro nell'u r l della campagna che porta sulla landing e sulla base di quell' u r l di quel parametro, quindi che vai a modificare o che vai ad inserire basare la condizione di modifica della tua landing page.

In questo caso parliamo proprio di live C R o perché andiamo a modificare elementi di una landing su una condizione banale che è un t m un parametro in string sull' sull' u r l.

Scusami per farti un esempio pratico, ti condivido lo schermo e ti faccio vedere più o meno cosa possiamo andare a creare.

Allora immagina di essere sul sito di Lerna e immagina che stai portando già traffico attraverso diverse campagne.

Ma, um da un momento x decidi di creare una nuova promo e quindi cosa vuoi fare? Vuoi andare a modificare gli elementi in ded della tua landing in modo che la promo sia più evidente rispetto alla pagina normale? Quindi abbiamo la situazione in cui dobbiamo creare questa pagina qua, che è quella diciamo quella base che già esiste, eccetera eccetera.

E questa pagina qui dove il dove il titolo della pagina rimane magari lo stesso, ma aggiungiamo un sottotitolo che parla proprio della nostra promo Come puoi andare a vedere? Ho ho anche modificato il la grandezza dell'elemento sottotitolo della pagina originale in modo che non prendesse l'attenzione dell'utente.

Quindi che cosa dobbiamo fare per creare questa roba qui? Innanzitutto abbiamo detto che vogliamo aggiungere un elemento sottotitolo che prenda um come dire prenda l'interesse l'attenzione delle persone su una parola specifica.

In questo caso io ho fatto un esempio molto banale attenzione, la promo scade domani.

Questo elemento come lo inserisco qui? Questo è un semplice h t m l che dobbiamo andare ad inserire prima del sottotitolo che esiste già.

Quindi cosa succede? Andiamo a studiare il la parte tecnica del sottotitolo, quindi selezioniamo il sottotitolo tasto destro ispeziona e vediamo che c'è un dev grande che contiene un altro div piccolino nel quale è inserito come puoi vedere qui elemento title.

Quindi sappiamo riusciamo a capire che questo elemento reading title.

Se poi vado dentro, vedo che il digitale offre opportunità bla bla bla è proprio quello.

Quindi io cosa voglio fare? Voglio andare ad inserire un sottotitolo prima di questo.

Quindi cosa cerco su internet? Vado su sul mio carissimo amico Google e cerco auto insert a t m l b Anat element in javascript.

Quindi una volta che effettuo questa ricerca, ti consiglio di prestare attenzione a alle funzioni che ti vengono restituite in questo caso, ad esempio c'è insert m l che è esattamente quello che ci serve.

Se noi facciamo quindi una ricerca più approfondita della funzione l bene come puoi vedere, i risultati che appaiono sono sempre quello di livello per Mozilla e votre schools io utilizzo infatti è eh si vede che è già stato aperto questo link.

Io utilizzo quasi sempre votre schools perché mi mi viene più semplice um però tu puoi utilizzare qualsiasi, basta che sia ovviamente chiaro entriamo quindi su questa su questa pagina e ci dà subito un esempio.

Allora inserisci un nuovo paragrafo dopo l'elemento um Eder.

Quindi lui prende in una costante in una variabile di tipo costa costante ma va bene, andiamo avanti il valore dell'h due Quindi lui fa document punto element by i d m t poi crea una nuova variabili h t m l con il paragrafo e poi dice h due quindi punto di partenza punto insert h t m l dove cosa h t m l quindi molto semplice punto di partenza punto cosa fare? Inserisci altro h t m l dove e cosa devo inserire la parte dove è molto importante infatti se scendiamo poco poco vediamo che ci sono scusami diverse posizioni e nel nostro caso sceglieremo il forn perché vogliamo prendere um diciamo l'atte può porre l'attenzione su questo elemento e aggiungerne uno prima quindi di questo elemento qua.

Quindi quello che dobbiamo andare a fare è esattamente questa roba qua okay, come lo facciamo? Andiamo sul nostro elemento lo selezioniamo, facciamo tasto destro copy jt andiamo in consolle in modo tale che riusciamo ad avere subito live una risposta a quello che ci serve e lo incolliamo e vediamo che è esattamente quello lì perfetto do invio perché ora non ci serve e andiamo a creare il nostro h t m l quindi creiamo var h t m l uguale dobbiamo creare un elemento ma andando a vedere bene nello specifico questo elemento qui che cos'è che tag è niente, è semplicemente del testo nel dev.

Quindi non è un tag h t m l specifico è testo nel dev, quindi posso creare direttamente un dev che contiene del testo.

Quindi abbiamo detto prima, ad esempio attenzione! La promo scade domani.

Okay, chiudo il mio V e chiudo l'elemento h t m l perfetto.

In questo modo ho creato il mio elemento.

So qual è il punto di partenza.

Vado ad usare insert e i giant H t m l.

Quindi torno qua, riprendo il mio documento di parte, il mio elemento di partenza cancello questa parte qua che sarebbe semplicemente il risultato.

Quindi torno vicino alla chiusura della parentesi tonda e faccio punto insert ace h t m l Eccolo qui apro le tonde position for che cosa devo inserire? Il mio elemento che ho chiamato h t m l.

Ecco qua.

Ovviamente lui ha inserito il semplicemente quello che gli ho chiesto.

Adesso dovremmo andare a modificare lo stile.

In che modo selezioniamo quindi l'elemento.

Anzi no, andiamo a vedere il titolo.

Il titolo ha un tre punto tre REM e un Novecento.

Okay, noi vogliamo creare qualcosa che sia grande, ma non tanto quanto il titolo deve essere proprio un sottotitolo.

Quindi innanzitutto andiamo a definire che il nostro elemento deve avere font family in erit.

Cioè deve prendere lo stesso stile della Mhm.

Come dire, um, lo stesso lo stesso font che è stato definito A C S S Globale.

Poi gli andiamo a dire che font deve essere? Quello era tre punto tre REM.

Possiamo fare tre REM, quindi più piccolino, anche se non troppo.

Forse un po' troppo grande.

Proviamo a scendere a due punto otto, okay? E poi andiamo a mettere un font che lo renda un sottotitolo.

Proviamo con Okay.

Ottocento.

Mantiene lo stesso lul del titolo.

Vediamo come viene da desktop.

Okay, ci sta.

Perfetto, è più piccolo del titolo, ma comunque rimane un sottotitolo anche a livello.

Appunto, grafico.

Adesso, quello che dobbiamo fare è diminuire il fonte di questo, quindi abbassarlo.

Come Infatti qua Vedi c'è questa media uno punto sette R M.

Quindi possiamo fare uno punto cinque REM.

Okay, lo abbiamo reso più piccolo.

Forse possiamo andare anche un po' più in basso.

Okay, mi piace.

E abbassiamo il suo in modo tale da renderlo meno aggressivo.

Scusami.

Font Wait.

Okay, direi che cinquecento va bene okay in questo modo abbiamo completamente modificato perfetto completamente modificato la parte di questa pagina andando a porre l'attenzione su una promo che in questo momento semplicemente per motivi di di di tempo.

Insomma non andiamo a ideare e implementare ma la differenza è notevole se io duplici la pagina iniziale ovviamente si perde tutto quello che abbiamo fatto e diciamo che la differenza è abissale cioè qui l'attenzione cade proprio su titolo e sottotitolo e questo rimane un rafforzativo del perché dovresti attivare la promo e non un rafforzativo del perché dovresti usare il prodotto quindi la strategia di marketing è completamente differente perfetto ora tutto quello che abbiamo fatto dobbiamo andarlo a mettere sul nostro ovviamente sul nostro g t m.

Quindi ritorniamo in ispezione andiamo a vedere questo elemento qua quando abbiamo creato um l'elemento noi abbiamo semplicemente aggiunto il b poi dalla parte di element punto style abbiamo aggiunto il c s s che ci interessa ma il risultato finale rimane qui quindi noi andiamo qui facciamo edit a s a t m l copiamo tutto e adesso ti faccio vedere che se ricarico la pagina torno nella mia consolle e vado a dire che var h t m l non è più quella di prima, eccetera eccetera, ma incollo quello che ho creato adesso andando a fare attenzione ad una cosa ecco ho ho sbagliato invece di usare i doppi apici, quindi shift f due bisogna usare l'apice singolo perché gli apici doppi semplicemente vengono utilizzati nello stile e quindi non è una regola ma potrebbe crearti dei dei dei piccoli macelli qua e là.

Quindi vai ad utilizzare in questo caso l'apice singolo perché l'apice doppio viene utilizzato in altre parti.

Cancelliamo tutti gli spazi in modo tale che questa che tutto tutta questa riga rimanga sempre rossa e inviamo.

Ora andiamo a fare esattamente la stessa cosa, quindi prendo il sottotitolo copy j spat console incollo punto insert insert e giacenti h t m l b for h t m l ops ed ecco che l'ha l'ha inserito già con lo stile che abbiamo messo prima.

Quello che dobbiamo andare a fare adesso è modificare lo stile di quest'altro elemento.

Quindi come andiamo qua? No, copriamo di nuovo j s.

Pat e facciamo punto style in questo modo andiamo a vedere tutte le dichiarazioni che ci sono, eccetera eccetera ma a noi non è che ci interessa più di tanto quello che dobbiamo fare è punto sta il punto.

Set property Font sides.

Abbiamo detto uno punto cinque REM.

Vediamo Ecco, lo sapevo che mi ero dimenticato, Quindi taglia.

Okay, quello che dobbiamo fare adesso è modificare lo stile del sottotitolo.

Come facciamo esattamente? La stessa cosa che abbiamo fatto prima.

Quindi modifi C S s Perfetto.

Quindi school, andiamo a vedere che cosa ci dice.

Okay, quindi che sarebbe esattamente il copy copy j spat bla bla bla punto style punto property uguale new style Okay, quindi possiamo fare in questo modo? Andiamo Qui spect di nuovo Copi JT console punto style Eccolo uguale uno punto quattro REM Perfetto E lo rifacciamo punto Font wat Perfetto, abbiamo detto era quattrocento via fatto in questo momento, Quindi abbiamo sia la il codice JavaScript per creare questo elemento, che è quello per modificare questo e sono entrambi in ispezione nella nostra console, quindi ce li andiamo a prendere.

Questo è per modificare il Wat.

Andiamo su per modificare il SIS e questo è per aggiungere l'elemento prima.

Quindi torniamo sul nostro Google Tak Manager.

Creiamo un nuovo tag di tipo H T M l personalizzato.

Andiamo a inserire il nostro tag script, Chiudiamo il tag script così non abbiamo difficoltà dopo Okay, e dentro ci andiamo ad inserire tutti i nostri elementi.

Quindi questo è il nostro elemento da aggiungere.

Perfetto.

Questo è il dove lo andiamo ad aggiungere.

Perfetto.

E poi dobbiamo andare a prendere gli altri due codici di modifica.

Eccolo qua, il Wat e il side.

Ecco qua.

In questo modo noi abbiamo modificato completamente la pagina.

Sulla base di cosa? Di un trigger di tipo che andiamo ad inserire sulla base di quello che abbiamo.

Quindi creiamo un nuovo trigger, visualizzazione di pagina, alcune visualizzazioni di pagina e andiamo a mettere dove Page l contiene.

E qui ci sarà il parametro che abbiamo definito all'inizio che potrebbe essere um non so um campane uguale promo.

Immagina un U R l in cui da meta da Google Z, da qualsiasi sorgente di traffico arriva questo questo utente che ha cliccato su un link fatto in questo modo la pagina sarà sempre la stessa.

Non ci sarà bisogno di duplicare, andare a fare modifiche, chiedere a sviluppatori, eccetera eccetera.

Andiamo a aggiungere il nostro um parametro direttamente nella piattaforma di advertising e sulla base del parametro andiamo a fare le modifiche che abbiamo inserito nel nostro TAC.

Quindi facile e veloce campa in uguale promo.

Ecco qua salviamo il tag custom H t m l um header manipulation promo Ecco qua.

Questa è solo una delle tantissime cose che puoi fare con eh con JavaScript nelle tue strategie di digital marketing mirato.

Nel corso delle prossime lezioni vedremo tante altre belle cose.