# 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…

- Page: <https://www.datafirefly.com/documentation/dfcodeinjector/>
- Langue: fr
- Mis à jour le: 2026-06-27
- Autres langues: [en](https://www.datafirefly.com/en/documentation/dfcodeinjector/index.md), [es](https://www.datafirefly.com/es/documentation/dfcodeinjector/index.md), [de](https://www.datafirefly.com/de/documentation/dfcodeinjector/index.md), [it](https://www.datafirefly.com/it/documentation/dfcodeinjector/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfcodeinjector/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfcodeinjector/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfcodeinjector/index.md)
- Index: <https://www.datafirefly.com/documentation/llms.txt>

## 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.

Compatible PrestaShop 8.0 à 9.x, PHP 8.1 et supérieur, multiboutique. Aucune dépendance externe.

## 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 -->
```

1. 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

L'injection dans la **balise head** fonctionne avec tous les thèmes. Les emplacements **début** et **fin de body** reposent sur les hooks `displayAfterBodyOpeningTag` et `displayBeforeBodyClosingTag`, présents dans le thème Classic de PrestaShop. Sur un thème personnalisé, vérifiez que ces hooks sont bien appelés dans les templates.

## 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.

Le code étant injecté sans purification, vérifiez votre syntaxe (balises bien fermées) avant d'activer un snippet sur une boutique en production.