Iniettore di codice Header/Footer (CSS/JS) — Guida completa

Panoramica

L’Iniettore di codice Header/Footer permette di aggiungere codice CSS, JavaScript o HTML al tuo negozio PrestaShop senza modificare alcun file del tema. Tutto si gestisce dal back-office sotto forma di snippet: ogni blocco di codice ha la sua posizione, il suo targeting di pagine, il suo ordine di iniezione e il suo stato attivo o inattivo.

Casi d’uso tipici: Google Tag Manager, Google Analytics, Meta Pixel, tag di verifica (Search Console, Pinterest…), stili CSS personalizzati, script di chat o banner di consenso ai cookie.

Installazione

1. Scarica l’archivio dfcodeinjector.zip dal tuo account DataFirefly.
2. Nel back-office, apri Moduli > Gestore moduli, fai clic su Carica un modulo e rilascia l’archivio.
3. Fai clic su Configura per aprire il gestore di snippet.

Creare uno snippet

Dal gestore, fai clic su Aggiungi uno snippet e compila i campi seguenti.

Campi del modulo

• Nome — identificatore interno dello snippet (es. «Google Tag Manager»).
• Posizione — dove viene iniettato il codice (vedi sotto).
• Codice — incolla il tuo codice completo, tag inclusi. Viene iniettato così com’è, senza trasformazione né purificazione.
• Pagine mirate — lascia vuoto per tutte le pagine, o seleziona pagine specifiche.
• Ordine di visualizzazione — gli snippet di una stessa posizione vengono iniettati in ordine crescente.
• Attivo — attiva o disattiva lo snippet senza eliminarlo.

Le tre posizioni

• Header (tag head) — per stili, tag meta e tag di verifica. Iniettato tramite l’hook displayHeader.
• Inizio del body — subito dopo l’apertura del body, per i contenitori di markup (es. la parte noscript di GTM). Hook displayAfterBodyOpeningTag.
• Fine del body — subito prima della chiusura del body, per gli script di performance e tracciamento. Hook displayBeforeBodyClosingTag.

Targeting per pagina

Ogni snippet può essere mostrato ovunque (campo vuoto) o limitato a determinate pagine: home, scheda prodotto, categoria, CMS, ricerca, carrello, processo d’ordine, ecc. Il modulo confronta la pagina corrente con il controller front (php_self); se è impostato un elenco e la pagina non vi compare, lo snippet non viene iniettato.

Esempi

Google Tag Manager

GTM si installa in due parti. Crea due snippet:

1. Snippet «GTM head» — posizione Header, incolla il primo script fornito da Google:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){ ... })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

2. Snippet «GTM body» — posizione Inizio del body, incolla la parte noscript fornita da Google.

CSS personalizzato

Posizione Header, racchiudi il tuo CSS in un tag style:

<style>
.header-banner { background:#0f172a; color:#fff; }
</style>

Tag di verifica

Per Search Console o un social network, posizione Header:

<meta name="google-site-verification" content="IL_TUO_CODICE" />

Multinegozio

In contesto multinegozio, ogni snippet può essere globale (tutti i negozi) o riservato a un negozio specifico tramite il campo Negozio. In modalità mononegozio, questo campo è nascosto e lo snippet si applica al negozio corrente.

Compatibilità dei temi

Risoluzione dei problemi

• Il codice non appare — verifica che lo snippet sia attivo, che la posizione sia corretta e che la pagina corrente faccia parte delle pagine mirate (o che il campo sia vuoto).
• Niente a inizio o fine body — il tuo tema probabilmente non richiama gli hook corrispondenti; usa la posizione Header o aggiungi questi hook al tema.
• Conflitto di ordine — regola il campo Ordine di visualizzazione per controllare la sequenza di iniezione.