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

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

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

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.