# Header/Footer Code-Injektor (CSS/JS) — Vollständige Anleitung

> Überblick Mit dem Header/Footer Code-Injektor fügen Sie CSS, JavaScript oder HTML zu Ihrem PrestaShop-Shop hinzu, ohne eine einzige Theme-Datei zu ändern. Alles wird im Back-Office in Form von Snippets verwaltet:…

- Seite: <https://www.datafirefly.com/de/documentation/dfcodeinjector/>
- Sprache: de
- Aktualisiert am: 2026-06-27
- Weitere Sprachen: [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), [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/de/documentation/llms.txt>

## Überblick

Mit dem **Header/Footer Code-Injektor** fügen Sie CSS, JavaScript oder HTML zu Ihrem PrestaShop-Shop hinzu, ohne eine einzige Theme-Datei zu ändern. Alles wird im Back-Office in Form von _Snippets_ verwaltet: Jeder Codeblock hat seine Position, sein Seiten-Targeting, seine Einfügereihenfolge und seinen aktiven oder inaktiven Status.

Typische Anwendungsfälle: Google Tag Manager, Google Analytics, Meta Pixel, Verifizierungs-Tags (Search Console, Pinterest...), eigene CSS-Styles, Chat-Skripte oder ein Cookie-Consent-Banner.

## Installation

1. Laden Sie das Archiv `dfcodeinjector.zip` aus Ihrem DataFirefly-Konto herunter.
2. Öffnen Sie im Back-Office **Module > Modul-Manager**, klicken Sie auf **Modul hochladen** und legen Sie das Archiv ab.
3. Klicken Sie auf **Konfigurieren**, um den Snippet-Manager zu öffnen.

Kompatibel mit PrestaShop 8.0 bis 9.x, PHP 8.1 und höher, Multishop. Keine externen Abhängigkeiten.

## Ein Snippet erstellen

Klicken Sie im Manager auf **Snippet hinzufügen** und füllen Sie die folgenden Felder aus.

### Formularfelder

- **Name** — interner Bezeichner des Snippets (z. B. „Google Tag Manager").
- **Position** — wo der Code eingefügt wird (siehe unten).
- **Code** — fügen Sie Ihren vollständigen Code samt Tags ein. Er wird unverändert eingefügt, ohne Transformation oder Purification.
- **Zielseiten** — leer lassen für alle Seiten oder bestimmte Seiten auswählen.
- **Anzeigereihenfolge** — Snippets derselben Position werden in aufsteigender Reihenfolge eingefügt.
- **Aktiv** — aktiviert oder deaktiviert das Snippet, ohne es zu löschen.

### Die drei Positionen

- **Header (head-Tag)** — für Styles, Meta-Tags und Verifizierungs-Tags. Eingefügt über den Hook `displayHeader`.
- **Body-Anfang** — direkt nach dem Öffnen des body, für Markup-Container (z. B. den noscript-Teil von GTM). Hook `displayAfterBodyOpeningTag`.
- **Body-Ende** — kurz vor dem Schließen des body, für Performance- und Tracking-Skripte. Hook `displayBeforeBodyClosingTag`.

### Seiten-Targeting

Jedes Snippet kann überall (leeres Feld) oder auf bestimmte Seiten beschränkt ausgespielt werden: Startseite, Produktseite, Kategorie, CMS, Suche, Warenkorb, Bestellvorgang usw. Das Modul vergleicht die aktuelle Seite mit dem Front-Controller (`php_self`); ist eine Liste gesetzt und die Seite nicht enthalten, wird das Snippet nicht eingefügt.

## Beispiele

### Google Tag Manager

GTM wird in zwei Teilen installiert. Erstellen Sie zwei Snippets:

1. Snippet „GTM head" — Position **Header**, fügen Sie das erste von Google bereitgestellte Skript ein:

```
<!-- 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" — Position **Body-Anfang**, fügen Sie den von Google bereitgestellten noscript-Teil ein.

### Eigenes CSS

Position **Header**, umschließen Sie Ihr CSS mit einem style-Tag:

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

### Verifizierungs-Tag

Für Search Console oder ein soziales Netzwerk, Position **Header**:

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

## Multishop

Im Multishop-Kontext kann jedes Snippet global (alle Shops) oder über das Feld **Shop** auf einen bestimmten Shop beschränkt sein. Im Einzelshop-Modus ist dieses Feld ausgeblendet und das Snippet gilt für den aktuellen Shop.

## Theme-Kompatibilität

Die Einfügung in den **head-Tag** funktioniert mit jedem Theme. Die Positionen **Body-Anfang** und **Body-Ende** beruhen auf den Hooks `displayAfterBodyOpeningTag` und `displayBeforeBodyClosingTag`, die im Classic-Theme von PrestaShop vorhanden sind. Prüfen Sie bei einem individuellen Theme, ob diese Hooks in den Templates aufgerufen werden.

## Fehlerbehebung

- **Der Code erscheint nicht** — prüfen Sie, ob das Snippet aktiv ist, ob die Position korrekt ist und ob die aktuelle Seite zu den Zielseiten gehört (oder ob das Feld leer ist).
- **Nichts am Body-Anfang oder -Ende** — Ihr Theme ruft die entsprechenden Hooks wahrscheinlich nicht auf; verwenden Sie die Position Header oder fügen Sie diese Hooks zum Theme hinzu.
- **Reihenfolge-Konflikt** — passen Sie das Feld Anzeigereihenfolge an, um die Einfügereihenfolge zu steuern.

Da der Code ohne Purification eingefügt wird, überprüfen Sie Ihre Syntax (korrekt geschlossene Tags), bevor Sie ein Snippet in einem Produktiv-Shop aktivieren.