Trasforma le tue idee in risultati
GH Logo

TECH

Come si traccia una landing creata con Lovable o Claude Code?

Giacomo Ravagliaa cura diGiacomo Ravaglia
Down arrow

La pagina è online in tre ore. Il tracciamento no.

È una scena che negli ultimi mesi ci capita spesso. Un cliente ci scrive con una landing già pronta, generata con Lovable o con Claude Code: grafica pulita, testi al loro posto, form funzionante, dominio collegato. Ci ha messo un pomeriggio invece di tre settimane, ed è sinceramente un bel risultato. La domanda che arriva subito dopo è sempre la stessa: possiamo lanciare le campagne lunedì?

Allora apriamo il sorgente. Nella metà dei casi non c’è niente. Nell’altra metà c’è qualcosa, ed è la situazione peggiore: quando un impianto sembra funzionare, nessuno va a ricontrollarlo.

Il punto non è che questi strumenti lavorino male. Il punto è che costruiscono un tipo di pagina diverso da quello a cui il tracciamento è abituato, e quasi nessuna delle abitudini che dai per scontate vale ancora. Qui sotto trovi prima cosa si rompe, e poi le istruzioni esatte da dare per farlo funzionare.

Quella non è una pagina, è un’applicazione

Prima di parlare di tag e di eventi conviene guardare bene che cosa hai davanti, perché da lì discende tutto il resto.

Lovable costruisce in React con Vite, usa React Router per la navigazione e Supabase come unico backend. Claude Code, se non gli chiedi esplicitamente il contrario, tende a proporti la stessa famiglia di soluzioni. In pratica il browser scarica un documento una volta sola, all’inizio, e da quel momento in poi cambia quello che vedi senza mai ricaricare nulla. Il caricamento di pagina, che è l’appiglio su cui si regge quasi tutto il tracciamento che conosci, qui avviene una volta e non si ripete più.

Sembra un dettaglio da sviluppatori. È il motivo per cui la tua conversione non arriva.

1. La pagina di ringraziamento non esiste

Il modo più diffuso di tracciare un contatto è anche il più semplice: si dice alla piattaforma di considerare una conversione ogni volta che qualcuno visualizza la pagina di ringraziamento. Funziona da quindici anni e non richiede di capire niente.

Su una landing generata quella pagina non c’è. Quando l’utente invia il form, il messaggio di ringraziamento compare al posto del modulo, nello stesso identico documento che era già aperto. L’indirizzo nella barra resta quello di prima, il browser non carica nulla di nuovo, e il tuo tag non ha nessun motivo di attivarsi.

L’evento va quindi dichiarato a mano dal codice, nel momento esatto in cui l’invio riesce. Non esistono scorciatoie, e chi te ne propone una ti sta descrivendo un altro tipo di sito.

2. Il clic sul pulsante non è una conversione

È la scorciatoia che prendono quasi tutti appena scoprono il problema precedente: se non c’è una pagina da agganciare, si aggancia il clic sul pulsante di invio.

Il guaio è che tra il clic e il contatto salvato succedono parecchie cose. Il form scrive sul database con una chiamata asincrona: parte la richiesta, si attende la risposta, e solo se la risposta è positiva quel contatto esiste davvero. Nel mezzo ci sono la validazione dei campi, la rete e i permessi sul database.

Tracciando il clic conti anche chi ha sbagliato l’email ed è stato respinto, chi ha premuto due volte perché non succedeva niente e chi ha ricevuto un errore che tu non hai mai visto. Numeri gonfiati, costo per contatto che sembra ottimo e un algoritmo che impara a cercare gente che clicca.

L’evento va inviato dove l’invio riesce, non dove l’utente preme. Se poi hai il dubbio su quale evento far ottimizzare alle campagne, il ragionamento sta in come scegliere le conversioni giuste.

3. Il dominio di anteprima

Ogni progetto Lovable nasce con un indirizzo di anteprima del tipo nomeprogetto.lovable.app, ed è comodissimo: è già online, è già in https, si condivide in un secondo. Il collegamento a un dominio tuo è un passaggio separato, che si fa dopo nelle impostazioni del progetto.

Sembra un errore da principianti, e invece capita di continuo: si comincia a spingere traffico a pagamento verso l’indirizzo di anteprima, tanto è la stessa pagina. Non è la stessa pagina. È un altro dominio, con i suoi cookie, e quando passerai a quello definitivo tutto ciò che hai raccolto resta indietro.

Il dominio definitivo va collegato prima di spendere il primo euro, non dopo aver verificato che la landing funzioni.

4. Il banner dei cookie non c’è, e non arriva da solo

Una landing generata nasce senza banner. Non perché lo strumento sia sbadato, ma perché il consenso è un pezzo a sé: va scelto, installato e collegato ai tag, e nessuno lo fa al posto tuo. La pagina intanto va online lo stesso.

Va detto chiaramente, anche se è la parte antipatica. Una landing si genera in tre ore, ma non è a norma in tre ore. Il banner, la privacy policy e la cookie policy sono lavoro a parte, e vanno fatti prima di mandarci sopra del traffico.

Come si fa, in pratica

Non devi scrivere il codice: devi chiedere la cosa giusta, e sapere com’è fatta la cosa giusta. Qui sotto ci sono le istruzioni da dare a Lovable o a Claude Code, da usare così come sono cambiando gli identificativi.

Prima però va presa una decisione, perché le strade sono due. Con Google Tag Manager metti nella pagina un solo container e da lì gestisci Google Ads, GA4, il pixel di Meta e qualsiasi cosa aggiungerai in futuro, senza toccare mai più il codice. Senza, incolli nella pagina il tag di Google e il pixel di Meta e fai partire gli eventi direttamente, il che per una landing con una piattaforma sola è perfettamente sensato.

La differenza sta tutta nel dopo: con il container ogni modifica futura la fai dal pannello, senza container ogni modifica futura è un altro giro di prompt sulla pagina. Trovi entrambe le versioni per ogni passo.

Passo zero: procurati gli identificativi

Con il container ti serve solo il suo ID, quello che comincia per GTM. Senza container ti servono quelli delle piattaforme che vuoi usare: l’ID di misurazione di GA4, l’ID conversione di Google Ads con la relativa etichetta, l’ID del pixel di Meta.

Cercarli dopo, a metà lavoro, è il modo più comune per ritrovarsi un codice di esempio pubblicato in produzione.

Passo uno: il tag va nel documento, non in un componente

È la richiesta che nessuno formula in modo esplicito, ed è quella che evita di ritrovarsi l’evento che riparte da solo ogni volta che l’interfaccia viene ridisegnata.

Aggiungi il container di Google Tag Manager GTM-XXXXXXX al file index.html:
lo snippet script dentro il tag head, e lo snippet noscript come primo
elemento dentro il body.
Non inserirlo dentro un componente React, non usare react-helmet e non
duplicarlo in altre pagine.

Senza container cambia solo l’elenco di quello che gli fai incollare:

Aggiungi al file index.html, dentro il tag head, il tag di Google con ID
di misurazione G-XXXXXXX e il codice base del pixel di Meta con ID
000000000000.
Non inserirli dentro un componente React, non usare react-helmet e non
duplicarli in altre pagine.

Passo due: l’evento dove l’invio riesce, con dentro i dati del contatto

Qui si risolvono insieme il punto 1 e il punto 2. Il nome dell’evento decidilo tu, ma tienilo uguale ovunque.

Nel componente del form di contatto, subito dopo che l'inserimento sul
database è andato a buon fine e prima di mostrare il messaggio di
ringraziamento, invia al livello dati un evento di nome "lead_inviato"
contenente tutti i dati raccolti dal modulo: ad esempio email, telefono,
nome, cognome, azienda e servizio richiesto.

Non inviarlo nel gestore onClick del pulsante, non inviarlo se la chiamata
restituisce un errore, e assicurati che non possa partire due volte per lo
stesso invio.

Senza container è ancora più diretto: nello stesso punto, chiedi di inviare quei dati alle piattaforme come evento lead.

Nello stesso punto invia un evento "lead" con tutti i dati del modulo alle
piattaforme già presenti nella pagina: la conversione di Google Ads e
l'evento Lead del pixel di Meta.

Su quest’ultimo punto vale la pena fermarsi, perché è la differenza tra un tracciamento che conta e uno che serve. Un evento vuoto ti dice solo che qualcuno ha compilato qualcosa. Un evento che si porta dietro email e telefono è quello che permette alle piattaforme di riconoscere quella persona e a te di ricollegarla al contatto che ritrovi nel gestionale. Quali parametri pesano davvero nel riconoscimento lo abbiamo spiegato parlando dell’Event Match Quality di Meta.

Passo tre: cattura il codice del clic e salvalo insieme al contatto

Quando qualcuno arriva da un annuncio, la piattaforma attacca all’indirizzo un codice che identifica quel clic: gclid per Google, fbclid per Meta. Su queste pagine quel codice sparisce appena l’utente naviga, e nessuno lo salva. Senza, il contatto che ti ritrovi sul database non porta con sé nessuna traccia di dove è arrivato.

Al primo caricamento della pagina leggi dall'indirizzo i parametri gclid,
gbraid, wbraid, fbclid e i parametri utm, e conservali per la durata della
sessione del browser, in modo che sopravvivano alla navigazione interna
anche quando l'indirizzo viene riscritto.

Aggiungi al form dei campi nascosti con quei valori, salvali sul database
insieme al contatto in colonne dedicate, e includi gli stessi valori
nell'evento.

Da qui in avanti ogni riga del tuo database porta scritto da dove è arrivata. È la condizione senza la quale, più avanti, non potrai dire alle piattaforme quali di quei contatti sono diventati clienti. Se sul funzionamento delle sorgenti vuoi il quadro completo, sta nella guida a UTM e sorgenti di traffico.

Passo quattro: l’attivatore, se usi il container

In Google Tag Manager crei un attivatore di tipo evento personalizzato con nome lead_inviato, e ci agganci il tag di conversione di Google Ads, l’evento GA4 e il tag di Meta. Da questo momento la conversione non dipende più da nessuna pagina: dipende dal fatto che il contatto sia stato salvato.

Un’accortezza che Google segnala e che quasi nessuno applica: se gestisci i tag con il container, non attivare in GA4 la rilevazione automatica della cronologia, altrimenti le pagine viste finiscono contate due volte.

Senza container questo passo non esiste, perché l’hai già fatto nel passo due: lì l’evento è già la conversione.

Su Claude Code le istruzioni si danno identiche: cambia il posto in cui le scrivi, non il contenuto.

Il passaggio che quasi tutti saltano

Il tag vive dentro un file del progetto, e quel file è lo stesso che l’assistente riscrive quando gli chiedi di cambiare un titolo, spostare una sezione o sistemare i colori. Nessuno ti garantisce che dopo la ventesima modifica il tuo codice sia ancora lì, e soprattutto nessuno ti avvisa se sparisce.

La soluzione esiste ed è gratis. Il tracciamento va scritto nelle istruzioni permanenti del progetto, non solo dentro il codice. Su Lovable si trovano in Project settings, alla voce Knowledge: sono istruzioni che l’agente rilegge a ogni richiesta. Lovable legge anche i file di istruzioni presenti nel repository, come CLAUDE.md o AGENTS.md, che sono gli stessi che usa Claude Code: ne scrivi uno solo e vale per entrambi.

Dentro ci va una riga come questa:

Questo progetto ha il tracciamento attivo. Il container Google Tag Manager
GTM-XXXXXXX deve restare nel file index.html, e l'evento lead_inviato deve
restare nel ramo di successo dell'invio del form di contatto.
Non rimuoverli, non spostarli dentro un componente e non modificarli,
nemmeno riscrivendo quei file per altri motivi.

Come si verifica, prima di spendere

Non fidarti del codice che leggi nel progetto: fidati di quello che parte davvero. Quattro prove, in quest’ordine, e ti portano via un quarto d’ora.

Compila il form per davvero. Non dall’anteprima: dal dominio definitivo, con dati veri, fino al messaggio di ringraziamento. È l’unica prova che riproduce quello che farà un utente.

Tieni aperto il tempo reale di GA4 mentre lo fai. Se l’evento non compare entro pochi secondi, non compare. Non serve aspettare domani per saperlo.

Prova a sbagliare. Inserisci un’email non valida e premi invio. Se l’evento parte lo stesso, stai tracciando il clic e non l’esito: torna al passo due.

Conta a fine settimana. Contatti nel database contro conversioni dichiarate dalla piattaforma, stesso intervallo. Devono somigliarsi. Se la piattaforma è molto più generosa hai dei doppioni; se è molto più avara stai perdendo eventi. Se i numeri non tornano per ragioni meno ovvie, la checklist è in perché le conversioni non vengono registrate in Google Ads.

Ricorda

Se la landing ti serve per validare un’idea e il traffico lo porti a mano, da una newsletter o da qualche post, non montarci sopra un impianto. Ti bastano l’analytics di base e il conteggio dei contatti nel database: tutto il resto è tempo sottratto alla cosa che stai cercando di capire.

Il discorso cambia nel momento esatto in cui accendi una campagna a pagamento. Da lì in poi una conversione sbagliata non è un numero storto in un rapporto: è un’istruzione che stai dando a un algoritmo che spende i tuoi soldi.

Noi questa cosa la facciamo per lavoro, siamo Stape Partner certificati e sviluppiamo in WordPress da prima che il server-side diventasse una parola da vendere in slide.

Leggi anche...

AI gratis o a pagamento
7 giorni fa
Le parole dell'AI: token, prompt, allucinazioni, agenti
3 settimane fa
Down arrow

E se ti serve aiuto...

Siamo a tua completa disposizione. Il nostro team ha visto cose… difficile sorprenderci ormai.

Compila il form: ti ricontattiamo noi.

Grazie per aver richiesto la tracking checklist

Abbiamo inviato all’indirizzo di posta da te indicato tutte le istruzioni per poter fare una prima analisi dello stato di salute dei tuoi tracciamenti.

Attendi qualche minuto per la ricezione dell’email

Sono tutti bravi a parole

Noi vogliamo dimostrarti che ciò che facciamo funziona attraverso casi studio reali, creati con una logica

Accedi

Proprio perché vogliamo garantire risultati concreti ed un’attenzione totale a ogni progetto, il numero di aziende che possiamo seguire ogni mese è necessariamente limitato.