Injecteur de code Header/Footer (CSS/JS) — Guide complet

Présentation

L’Injecteur de code Header/Footer permet d’ajouter du code CSS, JavaScript ou HTML à votre boutique PrestaShop sans modifier le moindre fichier du thème. Tout se gère depuis le back-office sous forme de snippets : chaque bloc de code possède son emplacement, son ciblage de pages, son ordre d’injection et son statut actif ou inactif.

Cas d’usage typiques : Google Tag Manager, Google Analytics, Meta Pixel, balises de vérification (Search Console, Pinterest…), styles CSS personnalisés, scripts de chat ou bandeau de consentement cookies.

Installation

1. Téléchargez l’archive dfcodeinjector.zip depuis votre compte DataFirefly.
2. Dans le back-office, ouvrez Modules > Gestionnaire de modules, cliquez sur Envoyer un module et déposez l’archive.
3. Cliquez sur Configurer pour ouvrir le gestionnaire de snippets.

Créer un snippet

Depuis le gestionnaire, cliquez sur Ajouter un snippet et renseignez les champs ci-dessous.

Champs du formulaire

• Nom — identifiant interne du snippet (ex. « Google Tag Manager »).
• Emplacement — l’endroit où le code est injecté (voir ci-dessous).
• Code — collez votre code complet, balises comprises. Il est injecté tel quel, sans transformation ni purification.
• Pages ciblées — laissez vide pour toutes les pages, ou sélectionnez des pages précises.
• Ordre d’affichage — les snippets d’un même emplacement sont injectés par ordre croissant.
• Actif — active ou désactive le snippet sans le supprimer.

Les trois emplacements

• Header (balise head) — pour les styles, balises meta et balises de vérification. Injecté via le hook displayHeader.
• Début du body — juste après l’ouverture du body, pour les conteneurs de balisage (ex. la partie noscript de GTM). Hook displayAfterBodyOpeningTag.
• Fin du body — juste avant la fermeture du body, pour les scripts de performance et de suivi. Hook displayBeforeBodyClosingTag.

Ciblage par page

Chaque snippet peut être diffusé partout (champ vide) ou restreint à certaines pages : accueil, fiche produit, catégorie, CMS, recherche, panier, tunnel de commande, etc. Le module compare la page courante au contrôleur front (php_self) ; si une liste est renseignée et que la page n’en fait pas partie, le snippet n’est pas injecté.

Exemples

Google Tag Manager

GTM se pose en deux parties. Créez deux snippets :

1. Snippet « GTM head » — emplacement Header, collez le premier script fourni par 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 » — emplacement Début du body, collez la partie noscript fournie par Google.

CSS personnalisé

Emplacement Header, entourez votre CSS d’une balise style :

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

Balise de vérification

Pour Search Console ou un réseau social, emplacement Header :

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

Multiboutique

En contexte multiboutique, chaque snippet peut être global (toutes les boutiques) ou réservé à une boutique précise via le champ Boutique. En mono-boutique, ce champ est masqué et le snippet s’applique à la boutique courante.

Compatibilité des thèmes

Dépannage

• Le code n’apparaît pas — vérifiez que le snippet est actif, que l’emplacement est correct et que la page courante fait partie des pages ciblées (ou que ce champ est vide).
• Rien en début ou fin de body — votre thème n’appelle probablement pas les hooks correspondants ; utilisez l’emplacement Header ou ajoutez ces hooks au thème.
• Conflit d’ordre — ajustez le champ Ordre d’affichage pour contrôler la séquence d’injection.