Come installare una heatmap sul tuo negozio Shopify (senza app, con una sola riga di codice)

Riepilogo dell'articolo

• Aggiungere una heatmap a Shopify richiede solo di incollare una singola riga di codice in theme.liquid — nessuna app da installare
• Duplica sempre il tuo tema come backup prima di modificarlo. Le modifiche hanno effetto non appena salvi — a differenza di STUDIO, non c'è un passaggio separato di ripubblicazione
• Le pagine di checkout non eseguono il codice del tema, quindi non vengono tracciate. Il successo si misura dall'effettivo aumento del conteggio nella dashboard di HeatMapX — non solo dall'assenza di errori

Ti stai chiedendo se puoi aggiungere una heatmap al tuo negozio Shopify senza installare un'app? Puoi farlo. Shopify ti permette di incollare una sola riga di codice tag direttamente nel tuo tema, senza bisogno di alcuna app. Questa guida illustra il passaggio di backup da fare sempre per primo, come aggiungere il tag, come verificare che funzioni e alcuni aspetti a cui prestare attenzione.

Passaggio 1: Ottieni la tua site key

Per prima cosa, registrati su HeatMapX (è disponibile un piano gratuito), registra il tuo negozio e ottieni la tua site key. Non è richiesta alcuna carta di credito.

Una volta ottenuta la site key, usa il tag qui sotto, sostituendo YOUR_SITE_KEY con la chiave effettiva che ti è stata assegnata.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Passaggi: aggiungere il tag a theme.liquid

1. (Obbligatorio) Duplica il tuo tema come backup

Prima di modificare direttamente il codice, duplica sempre il tuo tema attuale. Nel tuo pannello di amministrazione Shopify, vai su Negozio online → Temi, trova il tuo tema pubblicato, clicca sul menu "…" (azioni) e scegli Duplica. Questo ti fornisce una copia sicura a cui tornare in caso di problemi. Saltare questo passaggio significa non avere modo di annullare una modifica errata.

2. Apri l'editor del codice

1. Nel tuo pannello di amministrazione Shopify, vai su Negozio online → Temi
2. Sul tuo tema pubblicato, clicca sul menu "…" (azioni) e scegli Modifica codice
3. Sulla sinistra si aprirà un file browser per il tuo tema

3. Aggiungi il tag dentro layout/theme.liquid

1. Nell'elenco dei file, apri la cartella "Layout" e clicca su theme.liquid
2. Cerca nel file </head> e incolla il tag sopra subito prima
3. Salva il file

4. Salvare è tutto ciò che serve — nessuna ripubblicazione necessaria

Su Shopify, modificare il codice del tema ha effetto nel momento stesso in cui lo salvi. A differenza di STUDIO, non esiste un passaggio separato di "pubblicazione" o "ripubblicazione". Una volta salvato, il tuo negozio live ha già il tag caricato.

Come verificare che funzioni davvero

Dopo aver aggiunto il tag, naviga su alcune pagine del tuo negozio. Ma ecco la parte importante.

Il fatto che una pagina si carichi senza errori non è la stessa cosa del tracciamento che funziona davvero. Anche se la console del tuo browser non mostra nulla di sbagliato, una site key digitata male o un tag incollato nel posto sbagliato possono significare che nessun dato raggiunge mai HeatMapX.

L'unico controllo affidabile è aprire la dashboard di HeatMapX, trovare il tuo sito nell'elenco dei siti e confermare che il suo conteggio sia effettivamente aumentato. Dopo aver visitato alcune pagine — pagine prodotto, pagine collezione e così via — se il conteggio aumenta, l'installazione funziona.

Cose a cui prestare attenzione

Le pagine di checkout non vengono tracciate

Il tag che hai aggiunto a theme.liquid viene eseguito sul tuo storefront — homepage, pagine prodotto, pagine collezione e carrello — ma non viene eseguito sulle pagine di checkout (le pagine di pagamento sotto /checkouts/). Il checkout è ospitato direttamente da Shopify, separatamente dal tuo tema, e il codice del tema da theme.liquid non viene mai caricato lì. Se noti l'assenza di dati per le pagine di checkout nella tua dashboard, è un comportamento previsto, non un bug.

Cambiare tema significa aggiungere di nuovo il tag

Il tag esiste solo nel file theme.liquid del tema che hai modificato. Se in seguito passi a un tema diverso (pubblichi un nuovo tema), il suo theme.liquid non porterà automaticamente il tag con sé. Ogni volta che cambi tema, ripeti gli stessi passaggi per aggiungere il tag al nuovo tema.

Domande frequenti

D. Questo rallenterà il mio negozio? R. Il tag si carica in modo asincrono ed è leggero, quindi l'impatto sulla velocità di caricamento della pagina è minimo.

D. Ho aggiunto il tag, ma il conteggio nella dashboard non aumenta R. La causa più comune è una site key non corrispondente — aver incollato la chiave di un sito diverso, oppure un carattere perso durante la copia. Controlla anche che le pagine che stai testando siano pagine dello storefront (home, prodotto, collezione) e non pagine di checkout, dato che il checkout non viene mai tracciato.

In conclusione

Aggiungere una heatmap a Shopify si riduce a incollare una riga di codice in theme.liquid — nessuna app richiesta. HeatMapX è gratuito per iniziare, quindi provalo e scopri come i tuoi clienti vivono realmente il tuo negozio.