# Code-injector voor header en footer (CSS/JS): volledige gids

> Overzicht De Code-injector Header/Footer voegt CSS-, JavaScript- of HTML-code toe aan uw PrestaShop-winkel zonder de themabestanden aan te passen. Elk codeblok is een snippet dat u in de back-office beheert,…

- Pagina: <https://www.datafirefly.com/nl/documentation/dfcodeinjector/>
- Taal: nl
- Bijgewerkt op: 2026-10-11
- Andere talen: [fr](https://www.datafirefly.com/documentation/dfcodeinjector/index.md), [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)
- Index: <https://www.datafirefly.com/nl/documentation/llms.txt>

## Overzicht

De **Code-injector Header/Footer** voegt CSS-, JavaScript- of HTML-code toe aan uw PrestaShop-winkel zonder de themabestanden aan te passen. Elk codeblok is een _snippet_ dat u in de back-office beheert, met een eigen locatie, doelpagina's, invoegvolgorde en status.

Veelvoorkomend gebruik: Google Tag Manager, Google Analytics, Meta Pixel, verificatietags (Search Console, Pinterest), eigen CSS, chatwidget.

## Installatie

1. Download het archief `dfcodeinjector.zip` uit uw DataFirefly-account.
2. Open in de back-office **Modules > Modulebeheer**, klik op **Een module uploaden** en sleep het archief erin.
3. Klik op **Configureren** om de lijst met snippets te openen.

Compatibel met PrestaShop 8.0 tot 9.x en multistore. Interface beschikbaar in het Frans, Engels, Spaans, Duits, Italiaans, Nederlands, Pools en Portugees.

## Updaten vanaf versie 1.0.0

Upload het nieuwe archief via Modulebeheer: de update wordt automatisch uitgevoerd en uw snippets blijven behouden. Een snippet dat tot bepaalde pagina's beperkt was, krijgt de targeting **Alleen de geselecteerde pagina's**, de overige **Alle pagina's**.

## Een snippet aanmaken

Klik in de lijst op **Snippet toevoegen**.

### Formuliervelden

- **Naam**: interne naam, bijvoorbeeld "Google Tag Manager".
- **Locatie**: waar de code wordt ingevoegd (zie hieronder).
- **Code**: de volledige code, inclusief tags. Ze wordt ongewijzigd ingevoegd. In dit veld voegt de Tab-toets 4 spaties in; druk op Escape en daarna op Tab om naar het volgende veld te gaan.
- **Targeting**, **Pagina's** en **Andere pagina's**: de pagina's waarop het snippet van toepassing is.
- **Volgorde**: invoegvolgorde binnen een locatie. Blijft het veld leeg, dan komt het snippet als laatste.
- **Testmodus**: beperkt het invoegen tot de onderhouds-IP-adressen.
- **Actief**: schakelt het snippet in of uit zonder het te verwijderen.
- **Winkel** (alleen multistore): alle winkels of één winkel.

### De drie locaties

- **Header (head-tag)**: stijlen, metatags, verificatietags, hoofdscript van GTM. Hook `displayHeader`.
- **Begin van de body**: direct na de openende body-tag, voor het noscript-deel van GTM. Hook `displayAfterBodyOpeningTag`.
- **Einde van de body**: direct voor de sluitende body-tag, voor tracking- en chatscripts. Hook `displayBeforeBodyClosingTag`.

Roept uw thema de hooks voor begin of einde van de body niet aan, dan voegt de module de code op dezelfde plek rechtstreeks in de uiteindelijke HTML van de pagina in (hook `actionOutputHTMLBefore`). Alle drie de locaties werken dus met elk thema, zonder instelling.

### Paginatargeting

Het veld **Targeting** biedt drie modi: **Alle pagina's**, **Alleen de geselecteerde pagina's** of **Alle pagina's behalve de geselecteerde**.

De lijst **Pagina's** bevat 30 PrestaShop-pagina's: startpagina, categorie, productpagina, CMS, zoeken, winkelwagen, afrekenen, orderbevestiging, inloggen, mijn account, bestelgeschiedenis, contact, 404-pagina en meer. Het veld **Andere pagina's** accepteert extra technische paginanamen, gescheiden door komma's. Voor een modulepagina is het formaat `module-modulenaam-controller`.

De technische naam van een pagina vindt u in de broncode: in het Classic-thema en daarvan afgeleide thema's is het het attribuut `id` van de body-tag.

### Testmodus

Een snippet in testmodus wordt alleen ingevoegd voor de IP-adressen in het veld onderhouds-IP op de pagina **Onderhoud** van de winkelinstellingen. CIDR-bereiken zijn toegestaan. Zo controleert u een tag in de live winkel zonder dat een bezoeker hem ontvangt, en zet u daarna de testmodus uit om hem te publiceren.

### Een snippet dupliceren

Het menu van elke regel in de lijst biedt **Dupliceren**. De kopie wordt uitgeschakeld aangemaakt en als laatste geplaatst: controleer haar voordat u haar activeert.

## Voorbeelden

### Google Tag Manager

GTM heeft twee snippets nodig:

1. "GTM head", locatie **Header**, met het eerste script van Google:

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

1. "GTM body", locatie **Begin van de body**, met het noscript-deel van Google.

### Conversiepixel

Locatie **Einde van de body**, targeting **Alleen de geselecteerde pagina's**, pagina **Orderbevestiging**. De pixel gaat alleen af na een aankoop.

### Eigen CSS

Locatie **Header**, CSS in een style-tag:

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

### Verificatietag

Voor Search Console of een sociaal netwerk, locatie **Header**:

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

## Multistore

Met multistore ingeschakeld bepaalt het veld **Winkel** of een snippet in alle winkels of in één winkel draait. Bij een installatie met één winkel is het veld verborgen en geldt het snippet voor de hele winkel.

## Problemen oplossen

- **De code verschijnt niet**: controleer of het snippet actief is, of de testmodus uit staat (of uw IP bij de onderhouds-IP's staat) en of de huidige pagina binnen de targeting valt.
- **Er is een full-page-cachemodule geïnstalleerd**: leeg de cache ervan na elke wijziging van een snippet.
- **Het snippet verschijnt niet op een modulepagina**: controleer de technische naam in **Andere pagina's**, die moet exact overeenkomen met die van de pagina.
- **Twee scripts draaien in de verkeerde volgorde**: pas het veld **Volgorde** aan.

De code wordt zonder enige filtering ingevoegd. Controleer de syntaxis (correct gesloten tags) en gebruik de testmodus voordat u de code in een productiewinkel activeert.