Andiamo adesso ad implementare il sistema di tracciamento di g a quattro.

Partiamo ovviamente dalla base.

Partiamo con la creazione dell'account di g quattro.

Quindi io ho già creato un account di test di su g a quattro e ho scelto di utilizzare eco bio boutique come come come e-commerce per la simulazione.

Questo perché questo e-commerce è molto ben fatto e contiene tutti i parametri di cui abbiamo bisogno per implementare appunto un sistema corretto.

Quindi vado sul mio account di analytics, prendo l'i d di misurazione, torno su g t m nella sezione tag creo un nuovo tag di google, inserisco l'i d di misurazione e aggiungo nei parametri di configurazione questo parametro valorizzato a true.

In questo modo io con un tag solo creo l'istanza di google analytics e mando un aggiungo l' attivatore pages.

Salvo tag google va benissimo e salvo il tag bene, andiamo adesso a capire quali come andare a prendere queste informazioni.

Ora c'è una premessa che voglio farti.

Sicuramente avrai sentito che il tracciamento di g a quattro e comunque di tanti altri strumenti può essere fatto via datala bene, questo è assolutamente corretto è che io non sono di quella scuola perché il dalayer è uno strumento che se non è presente nativamente sull'e-commerce, quindi se non è valorizzato dal c m s stesso bisogna andare a valorizzarlo.

Come si va a valorizzare il data con javascript? Quindi noi potremmo tranquillamente creare il tar di tracciamento per g quattro per questo e-commerce per tutti gli e-commerce.

Ma cosa vuol dire? Vorrebbe dire andare a creare uno script che contiene dentro che contiene il tar valorizzato con tutti questi parametri qui e quando poi dobbiamo andare a implementare il sistema di tracciamento per meta per tiktok per quello che è, dobbiamo andare nel data di nuovo leggere i dati che abbiamo scritto in precedenza e metterli da un'altra parte perché ti dico questo? Perché come ti facevo vedere prima prima ad esempio meta ha un sistema di tracciamento sì simile, ma che è diverso da e che non si interfaccia al dalayer, cioè se noi andiamo a creare un datala per g quattro che contenga tutte le informazioni dell'evento du content, poi con le informazioni dobbiamo via già scritto andare dentro il datala o comunque creare variabili di tipo lei per andare a prenderci quelle informazioni, metterle in altre variabili un bordello quindi preferisco andare a creare le informazioni singolarmente e mandare degli eventi a g a quattro che sono più complessi, complessi nel senso che contengono più campi, ma che sono tutti gestibili senza andare poi a ad avere un unico oggetto, il dalayer, che potrebbe anche crearmi dei problemi non solo di lunghezza di lavoro, ma immagino la situazione in cui c'è un errore nel dalayer e tu sai qual è l'errore.

Invece di andare a riscrivere il dalayer, puoi andare a riscrivere lo specifico parametro dell'evento di g quattro che ti farò vedere tra un attimo, senza appunto entrare a scrivere codice eccetera eccetera.

Quindi, tornando a noi, queste sono le informazioni di cui abbiamo bisogno.

Quindi carrey e tutta una serie di informazioni relative al prodotto che andranno inserite poi in una r e poi ti farò vedere come inserire quelle informazioni in una rai.

Um, di tutte queste informazioni shopify ci fornisce già la stragrande maggioranza dei dati, cioè shopify ha al suo interno una variabile che si chiama meta che non fa nessun riferimento a meta intese come facebook e instagram, che è appunto, um proprietaria di shopify.

Che cosa vuol dire se io vado su una pagina prodotto e faccio tasto destro ispeziona entro in console, richiedo appunto la variabile meta e lui mi dice che meta contiene alcune informazioni.

Prima di tutto la tipologia di pagina.

Quindi sappiamo che questa pagina è una pagina prodotto bene e poi contiene delle informazioni relative al prodotto, quindi il prodotto, la sua tipologia, quindi il suo tag, la sua categoria, insomma, e la sua variante in questo caso ne ha una sola.

Poi abbiamo il suo SC, il suo nome, il suo prezzo.

Ora c'è una cosa da dire Mhm, mi sono sempre trovato nella situazione di dover scegliere quale i di mandare alle piattaforme.

Um questa questo ragionamento va fatto specificatamente di caso in caso, perché potrebbe essere necessario, um, legarsi ad un catalogo che è già stato creato per meta o per il merchant center che contiene l'id della variante oppure che contiene lo sco del prodotto.

Quindi ogni volta di caso in caso dovrai andare a analizzare il catalogo, capire quale informazione è contenuta all'interno dell' di e scegliere quindi l'informazione da mandare ai sistemi pubblicitari e di analisi.

Ed ecco perché in questo caso ti dico che so perfettamente che in questo specifico caso il valore da prendere è lo scoop.

Ora, una volta che sappiamo che tutte le informazioni che ci servono sono qui dentro tranne carc, che possiamo um, possiamo simulare che questo e-commerce lavori solo in italia o comunque solo in Europa e quindi simuliamo che la carrey sarà sempre e abbiamo un ultimo problema in questo specifico caso, um in cui parliamo di simulazione, noi non abbiamo accesso al G T m che è presente sul sito di eco bio, ma con un piccolo trucco potremmo andare a dere il g T M presente sul sito di eco bio facendo finta che sia il nostro.

Quindi come facciamo? Andiamo su g t m.

Avviamo l'anteprima e lui ci dirà su quale sito vuoi far partire questo container.

Gli diremo sul sito di eco bio in questo caso per la simulazione.

Ovviamente metterai il tuo sito web quando dovrai i quello del tuo cliente.

Insomma, quando dovrai creare il sistema di tracciamento e clicchiamo su connetti in questo momento lui dice Guarda, non c'è il tuo container, io non posso debba pagare nulla.

Ovviamente quello che andiamo a fare, quindi è cliccare con il tasto destro su ispeziona e andiamo a inserire questo codice.

Questo codice, che ovviamente dovrai andare a modificare con l'i d del container che vuoi utilizzare, ci permetterà di inserire di volta in volta perché ovviamente non è un qualcosa che poi rimane all'interno del sito web.

Di volta in volta andremo ad inserire il G T m.

Questo il G T M appunto che andiamo ad inserire avrà la facoltà di leggere tutti gli eventi che sono stati mandati dal o dai gtm principali con la potenzialità di gestire le nostre variabili.

Quindi adesso noi andremo a implementare le nostre variabili o i nostri tag.

Come puoi vedere, questo è il tag di Yuba che abbiamo um creato precedentemente.

Questo è il tag di Google che abbiamo creato un attimo fa.

Quindi avremo i nostri tag e le nostre variabili A um e potremo utilizzarle con gli eventi principali.

Quindi, tornando a noi, andiamo su una pagina prodotto perché abbiamo detto che i gli eventi principali che vogliamo tracciare o oltre, ovviamente al che stiamo già tracciando sono ora andiamo a prendere il WM e implementare i valori per questo evento.

Quindi torniamo qui, ovviamente il debug Ah, scusami.

Qui il debug si è rotto lui dice non c'è il tuo tag manager, quindi noi rifacciamo la stessa operazione, inseriamo il nostro tag manager e lui magicamente riprende a funzionare aprendo cancelliamo tutte queste cose qui, aprendo di nuovo la variabile meta.

Troviamo di nuovo informazioni relative al prodotto e sappiamo che praticamente è tutto qui dentro.

Come raggiungiamo queste informazioni? Abbiamo detto che questa è una variabile di tipo javascript presente all'interno di shopify.

Come raggiungo queste informazioni? Semplicemente vado sul valore che mi interessa in questo caso, ad esempio sc clicco tasto destro e faccio copy property Pat.

In questo modo io avrò accesso al pat per raggiungere questo piccolo elemento di questo grande oggetto meta.

Quindi copi questo valore torno sul mio tak manager, vado in variabili, clicco su nuova variabile configurazione variabile jscript in collo quello che mi ha restituito la console ma devo fare bene attenzione a rimuovere le parentesi quadre.

Le parentesi quadre in javascript, così come il punto in G t m servono ad indicare il livello quindi product scendo di livello, vado in variant, scendo di livello, vado all'elemento zero, scendo di livello vado lo scoop.

Abbiamo detto però che questa informazione fa riferimento ad una variabile principale che è meta.

Quindi prima di tutto questo dovrò anteporre meta punto product NTSC.

Il nome di questa variabile sarà proprio product sc salvo la mia variabile e continuo nell'implementazione delle altre degli altri dati.

Quindi vado a prendermi il name.

Quindi nuovo tasto destro cop nuova variabile meta punto in collo.

Elimino le quadre e le sostituisco dal punto.

Questo sarà il mio product name salvo, vado a prendermi il price.

Il price, come puoi vedere, è duemilaquattrocento.

Quindi semplicemente perché shopify gestisce i valori in modo diverso, noi dobbiamo semplicemente copiare il valore e andare a dividerlo per cento.

Quindi creiamo la nostra variabile meta niente non riesco a scrivere punto incolla cancello le quadre diviso cento e questo sarà il mio product price.

Perfetto.

Quindi abbiamo name price ops no Sky, ho sbagliato.

Scu cosa ci manca? Torniamo sul nostro.

Per vederlo abbiamo bisogno ancora del brand e della category, oltre che della currency, che ovviamente non è un qualcosa di um abbiamo detto non è dinamico.

Quindi torniamo qui, prendiamo il brand che è qui, quindi copy nuova variabile meta punto incolla però Duc brand salvo e vado a prendere l'ultima informazione che è la category nuova javascript meta punto Incollo product categori Bene, adesso andiamo a A Creiamo una variabile costante che contenga appunto il valore EUR.

Questa sarà la nostra prot carre.

Sì, salvo aggiorno l'anteprima in modo tale da leggere le variabili che ho appena scritto.

Torno sulla pagina prodotto, rilancio il codice del mio task manager E adesso vado a vedere qui cosa ci dice nelle variabili product.

Abbiamo product brand eco bio produc category skincare EUR buybacks.

Non abbiamo il price c'è un errore sul price e poi c'è product SC Abbiamo un errore sul Price.

Andiamo a vedere meta punto products variant zero price Probabilmente non gli piace il diviso cento.

Okay, allora, dato che non gli piace, cambiamo approccio e cioè, andiamo a modificare questa variabile.

Questa la chiameremo Price e andiamo a creare una nuova variabile di tipo personalizzato che ci fornirà praticamente lo stesso risultato.

Quindi ritorno pro product price diviso cento perfetto.

Siamo andati quindi a creare una variabile di tipo Java personalizzato che deve seguire comunque una una standardizzazione.

Cioè, deve essere una function che deve restituire un valore.

In questo caso noi abbiamo il product price è duemilaquattrocento e abbiamo bisogno di avere il diviso cento.

Quindi la funzione è molto, molto semplice.

Prendiamo il valore che abbiamo già preso.

Dall'altra parte, lo dividiamo per cento e basta.

Quindi questa è la funzione che andiamo a creare.

Aggiorniamo L'anteprima.

Torniamo sul nostro sito, prendiamo buybacks, cancelliamo questi messaggi, installiamo il nostro G T m.

Andiamo a leggere il valore delle variabili, quindi Esatto.

Il Price a Duemilaquattrocento e il price adesso è ventiquattro.

Perfetto, abbiamo tutto.

Quindi tornando qui abbiamo tutte queste informazioni.

Quello che dobbiamo fare adesso è inserirle in un la.

Ad esempio per g quattro.

In che modo lo andiamo a fare? Creiamo semplicemente una variabile anche in questo caso di tipo javascript.

Quindi sarà la stessa che abbiamo appena creato jscript personalizzato.

Andiamo a dire che è una function semplicemente perché è standard e andiamo a inserire i valori che ci servono.

Quindi dobbiamo creare la variabile che è un array.

Nella variabile items dobbiamo inserire alcuni valori quali i i, i i brand category.

E quali sono questi valori? Quelli che abbiamo appena creato.

Quindi torniamo qui e facciamo ops.

Scusami is punto push Cosa? Le nostre variabili.

Quindi inseriamo in questo array il valore item name che lo abbiamo preso da qua.

Quindi i name il ovviamente l'ordine non è non è importante.

Item name due punti inseriamo product name lo abbiamo appena fatto e qui ci mettiamo una virgola.

Poi andiamo qui a copiare item i d copiamo.

Torniamo qui.

Mamma mia L'alimentazione è importante, però va bene i product sc virgola bene item che copiamo diciamo prima item brand abbiamo detto due punti product brand di nuovo virgola copiamo ancora it category eh? Due punti product category ancora virgola ce ne manca uno.

Sappiamo che la quantità del prodotto visto è uno differente sarà la quantità del prodotto aggiunto a carrello, quindi quantità uno Chiudiamo quindi la graffa della funzione push, la tonda della funzione push e poi punto e virgola e ritorna items items.

Sarà appunto la variabile l'array che siamo andati a creare.

Abbiamo appena creato questa variabile.

La chiameremo items in product page.

Salvo Perfetto.

Facciamo un ultimo aggiornamento dell'anteprima per andare a valutare.

Ops.

Arriva alla riga undici.

Mi sono dimenticato una graffa.

Ah, certo.

Quella della funzione.

Quello della funzione principale.

Okay, invio anteprima.

Bene.

Quindi torno sul sito, apro la mia pagina prodotto cancello tutto.

Inserisco il mio manager e vado a de pagare.

Quindi i miei ci sono tutti.

Ed ecco la mia page che contiene tutte le informazioni che mi servono.

Ora, quello che um quello che dobbiamo fare adesso è andare a inviare il tag l'evento a g a quattro.

Una cosa importante sarà legata al trigger dell'evento.

Quando abbiamo visto per la prima volta la variabile meta, abbiamo visto che questa è una page.

Questa informazione può essere molto importante quando si tratta di aggiungere una condizione di di un tag.

Come userei io questa informazione? Io mi mi andrei a creare un'informazione che contiene il valore del quindi vado qui creo una nuova variabile di tipo javascript che sarà meta punto page punto pape e la chiamo Pape e so che quando è product sono in una page, quindi posso lanciare un un nel caso di G a quattro, quindi vado nei miei attivatori, creo un nuovo trigger di tipo visualizzazione di pagina, aggiungendo la condizione che pasty contiene product.

Quando avrò una visualizzazione di pagina con uguale a product che contiene product, so che questa è una product page perfetto.

In questo modo so che posso mandare quell'evento di g a quattro e di tutti gli altri sistemi, proprio quando sono in product page.

Quindi mando finalmente il mio tag.

Il tag sarà un evento di google analytics, quindi evento di g a quattro l'i d di misurazione sarà quello che abbiamo inserito nel tag di um nel tag di Google.

Quindi vado un attimo nel tag di Google.

Prendo questa informazione e la trasferisco in una variabile costante, così non dovrò sempre aggiungerla manualmente, quindi creo la variabile costante e questo è il G a quattro management.

I D avevamo già creato una variabile di questo tipo, che però non è corretta.

Nel senso era a titolo di esempio e quindi la vado a eliminare precedentemente andando a vedere.

Ecco, lo sapevo.

Okay, allora facciamo così.

Facciamo così cambiamo il valore di questa variabile.

Quindi questa variabile la posso eliminare quella che ho appena creato.

Vado in major i d g a quattro e la modifico invece che essere una tabella delle espressioni regolari diventa una costante con il valore di del nostro account di G a quattro.

Bene, quindi torno qua.

Creo il tag di analytics di tipo evento come i d di misurazione.

Posso andare a mettere il management i d di g a quattro.

Lui mi dice ho trovato il tag di google che fa riferimento a questo i d nel nome evento qui io dovrò andare ad inserire esattamente quello di g a quattro.

Quindi se non mi ricordo come si chiama se non me lo sono scritto, torno qua in risorse, vado nella lista degli eventi um mi cerco, copio, vado qui e lo inserisco.

Vado ad inserire adesso i parametri.

I parametri quali sono? Sono proprio questi qui che abbiamo messo nel nostro.

E quindi carc che eccolo ce lo dava già ce lo suggeriva e abbiamo una nostra variabile che si chiama product currency.

Andiamo ad inserire un altro parametro che è proprio il nostro che sarà uguale al product price.

Quindi lui ce lo suggerisce ed è product price a una cosa che forse non ho mai detto prima d'ora noi possiamo richiamare le variabili o con doppia graffa o andando a cliccare qui, quindi è esattamente la stessa cosa.

Però mi sono appena accorto di non avertelo mai detto e poi andando, um qui ci andiamo a copiare il modo in cui si scrive items e richiamiamo anche questo parametro.

Ovviamente è noto e richiamiamo items in page.

Perfetto.

In questo modo noi abbiamo creato il tag di tracciamento per g a quattro come attivatore.

Ovviamente abbiamo creato la visualizzazione di pagina con dentro l'informazione che il tipo di pagina è una pagina prodotto e quindi qui andremo a fare g a quattro.

Dio, idem salvo e io adesso voglio andare a debuggato l'evento.

Quindi se siamo fortunati funziona perché a volte potrebbe non funzionare.

Torno sul mio account di google analytics.

Apro la debug perfetto.

Sta funzionando.

Torno sul mio g t m.

Aggiorno l'anteprima con il tag appena mandato, quindi riapro il sito riapro la pagina prodotto.

In questo caso ovviamente dovrebbe già partire se avessimo accesso al g t m principale, ma noi non ce l'abbiamo, quindi installiamo il nostro g t m abbiamo che su questa pagina è partito il nostro g quattro item cliccando sopra vediamo tutti i parametri che sono stati mandati, quindi clicchiamo di nuovo sul container su scusami, non di nuovo clicchiamo sul trigger che ha fatto partire questo tag e qua in alto abbiamo o i nomi delle variabili che mandiamo o i valori.

Quindi in questo caso sappiamo che abbiamo mandato un evento con currency EUR valore ventiquattro h e G h and m I d brand category e ha il nome evento a questo I d di misurazione Se noi andiamo qui perfetto.

Abbiamo i due item con elementi buybacks item, i d quantity, eccetera, eccetera.

Mi sono ricordato ho appena notato di aver mancato L'informazione Price dell'evento vie item, quindi vado nella Scusami un attimo.

Non mi ricordo come.

Eccolo qua.

Price non è required, però.

Ecco, ce l'ho.

Gliela do.

Torno qui.

Come scusami per farti capire cosa intendo.

Vedi, qui manca il prezzo del prodotto.

Il valore del content l'ho inserito, ma il prezzo del prodotto Ho semplicemente dimenticato di inserirlo, Quindi torno sul mio G T M nella mia variabile items in product page.

Ah, eccola.

Scusami, non la vedevo e aggiungo qui tra le varie informazioni Price due punti Product price aggiungo la virgola.

Perfetto.

Adesso ho risolto molto agilmente questo piccolo bug che avevo trovato.

Bene, potremmo fare la stessa identica cosa per tutti gli altri elementi.

Tutti gli altri pezzi, tutti gli altri eventi che vogliamo mandare.

In questo caso vediamo che l'unica Cosa veramente importante da andare a definire è la quantità sulla ti faccio vedere come possiamo andare a prenderla allora la quantità del è questo valore qui in questo caso c'è uno bene, um in una delle prime lezioni abbiamo visto come andare a selezionare gli elementi con i selettori c s s ora perché dobbiamo optare per questa tipologia di lavorazione di questa informazione? Perché nel nel valore della variabile meta non c'era la quantità.

Ovviamente sto guardando un prodotto guardo un prodotto non è la quantità, non fa parte del valore del evento, ma fa parte ovviamente dei parametri che dovremmo aggiungere.

All'evento all'evento aggiungi al carrello, quindi andiamo a prendere questo valore.

Noi sappiamo che è qua dentro, quindi lo selezioniamo e sappiamo che è dentro questo input.

Quindi tasto destro copy jt console in collo per vedere per riuscire a manipolarlo dato che è in un input, il suo valore sarà molto facile da aggiungere.

Basterà fare punto peli.

Se noi aggiungiamo la quantità, ovviamente cambierà il valore di questa variabile di tipo javascript che andiamo a creare.

Quindi copiamo intanto la variabile che ci serve nuovo già lo script personalizzato perché appunto è un selettore non più meta, non più meta, inteso come appunto la variabile specifica di um shopify perfetto voglio andare a creare una mia funzione che mi restituisca direttamente questo valore.

Quindi uno e questo sarà il mio product a t c a tot quantity.

Perfetto.

Ora come faccio a modificare il valore di page con la quantity? In realtà io posso andare a sfruttare la variabile che ho appena creato direttamente qui.

Perché? Perché questo questa variabile fa riferimento a questo tag che viene sparato non appena l'utente carica la pagina prodotto.

Quindi la pagina prodotto non appena viene caricata ha come valore sulla quantità sempre uno.

Quindi io non vado a sporcare il dato di content, ma vado ad aggiornare il dato di quando c'è un.

Quindi se io qui fornisco il valore di quantità, so che al all'apertura della pagina sarà uno e se l'utente modifica la quantità sarà quattro in questo caso quindi va benissimo utilizzarla in questo caso salvo la variabile items, quindi non ho bisogno di creare un'altra variabile e vado a capire quale utilizzare.

Quando faccio un intanto andiamo a vedere se shopify ci dà qualcosa.

Quindi io inserisco il mio google top manager e capisco cosa succede al click su aggiungi al carrello, al giù, al click su aggiungi al carrello ci sono diverse cose che non sono.

Ah, eccolo qua, c'è un questo però attenzione, potresti non trovarlo perché questo è scritto esattamente nello stesso modo in cui viene mandato a g a quattro.

Quindi questo potrebbe essere l'evento che viene mandato dall'evento g a quattro che viene mandato dal g t m principale.

Quindi in questo caso io lo vedo, ma tu potresti non vederlo, quindi faccio riferimento al momento prima e cioè sul click di aggiunta al carrello.

Preferisco in questo modo ti do una informazione più utilizzabile su tutti i tuoi progetti, quindi se c'è un click con click text, aggiungi al carrello c'è un'aggiunta al carrello.

Quindi cosa succede? Vado a copiare aggiungi al carrello parentesi Questa questa cosa non mi fa impazzire per una questione di velocità.

Utilizziamo questo metodo, ma sarebbe cioè quello che farei io è entrare nel codice dello shopify e andare ad inserire un evento personalizzato, dato che questo premette che io conosca il Liquid co-.

Quindi il codice con cui si scrive il template di shopify e probabilmente tu no.

Il mio consiglio intanto è dirtelo se ti piace il mondo del tracciamento o comunque di integrazione di cose, ma se non lo dovessi conoscere va bene utilizzare appunto questa metodologia aggiungi al carrello, quindi andiamo sul nostro g t m creiamo un nuovo trigger nuovo.

In questo caso sarà click tutti gli elementi con alcuni click click text contiene aggiungi al carrello e quindi questo sarà il nostro A t c on product page perfetto salvo vado a creare finalmente il mio tag di aggiunta al carrello, come abbiamo visto prima, come abbiamo visto sul plan eccetera eccetera è esattamente identico al item.

Quindi vado qui, lo copio.

Cambio il suo nome ovviamente non è un ma un a t c cambio il nome dell'evento andando a prendere da qui a tot in collo e cambio l'attivazione non è più visualizzazione della page, ma sarà il click sull' quindi a t C o salvo rilancio l'anteprima così si aggiorna con tutte le informazioni che abbiamo.

Intanto anche la debug vie dovrebbe continuare a funzionare.

Perfetto.

Quindi torno sulla pagina prodotto cancello tutto.

Aggiungo il mio manager.

Ricevo un vediamolo da qui.

Eccolo qua.

Lo aspettiamo di vederlo anche su task Manager su Google Analytics.

Scusami.

Eccolo Usage adesso arriva nel frattempo per accelerare i tempi mando l aggiungi al carrello.

Quindi fa sempre così.

Um andiamo qui a controllare che sia arrivato il G a quattro.

Quindi lui è arrivato.

Te lo confermo.

Apro il container perfetto.

Ah, ecco, adesso abbiamo aggiunto anche il price sul sul bio item sul lato.

Invece eccolo qua che è partito al quarantaquattro dove c'è il price sempre uno perché non l'avevo aggiornata ed abbiamo eccolo qua la.

Quindi elementi price.

Questo è in non mi ricordo come si chiama, um tecnicamente questa um milione.

Okay, non mi ricordo come viene chiamata da Google questa specifica tipologia del dato.

Ma non ti preoccupare, il prezzo è giusto.

È lui che lo manipola in questo modo.

Ma il prezzo è ventiquattro.

Non preoccuparti.

Anche perché il qui è ventiquattro, quindi va benissimo così.

A posto.

Abbiamo gestito il nostro, abbiamo gestito il nostro.

Non resta che andare avanti con i con con gli eventi successivi puoi provare ad implementare tu stesso gli eventi partendo da tutto quello che abbiamo fatto e sfruttando le informazioni che ti lascio qui io per ora ti saluto e ci vediamo nella prossima lezione