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

Overzicht

Met de Code-injector voor header en footer voegt u CSS, JavaScript of HTML aan uw PrestaShop-winkel toe zonder ook maar één bestand van het thema te wijzigen. Alles verloopt vanuit de backoffice in de vorm van snippets: elk codeblok heeft zijn eigen plaats, zijn paginaselectie, zijn injectievolgorde en zijn status actief of inactief.

Typische toepassingen: Google Tag Manager, Google Analytics, de Meta-pixel, verificatietags (Search Console, Pinterest en dergelijke), eigen CSS-stijlen, chatscripts of een cookiebanner.

Installatie

1. Download het archief dfcodeinjector.zip vanuit uw DataFirefly-account.
2. Open in de backoffice Modules > Modulebeheer, klik op Een module uploaden en plaats het archief.
3. Klik op Configureren om het snippetbeheer te openen.

Een snippet aanmaken

Klik in het beheerscherm op Een snippet toevoegen en vul de velden hieronder in.

Velden van het formulier

• Naam: de interne benaming van het snippet (bijvoorbeeld « Google Tag Manager »).
• Plaats: waar de code wordt ingevoegd (zie hieronder).
• Code: plak uw volledige code, inclusief de tags. Die wordt zonder aanpassing of opschoning ingevoegd.
• Beoogde pagina’s: laat leeg voor alle pagina’s, of kies bepaalde pagina’s.
• Weergavevolgorde: snippets op dezelfde plaats worden in oplopende volgorde ingevoegd.
• Actief: schakelt het snippet in of uit zonder het te verwijderen.

De drie plaatsen

• Header (de head-tag): voor stijlen, metatags en verificatietags. Wordt ingevoegd via de hook displayHeader.
• Begin van de body: net na het openen van de body, voor opmaakcontainers (bijvoorbeeld het noscript-deel van GTM). Hook displayAfterBodyOpeningTag.
• Einde van de body: net vóór het sluiten van de body, voor prestatie- en trackingscripts. Hook displayBeforeBodyClosingTag.

Selectie per pagina

Elk snippet kan overal verschijnen (een leeg veld) of tot bepaalde pagina’s beperkt blijven: startpagina, productfiche, categorie, CMS, zoekresultaten, winkelwagen, bestelproces en zo verder. De module vergelijkt de huidige pagina met de frontcontroller (php_self); staat er een lijst ingevuld en hoort de pagina daar niet bij, dan wordt het snippet niet ingevoegd.

Voorbeelden

Google Tag Manager

GTM bestaat uit twee delen. Maak twee snippets:

1. Snippet « GTM head »: plaats Header, met het eerste script dat Google aanlevert:

<!-- 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 »: plaats Begin van de body, met het noscript-deel dat Google aanlevert.

Eigen CSS

Plaats Header, met uw CSS binnen een style-tag:

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

Verificatietag

Voor Search Console of een sociaal netwerk, plaats Header:

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

Multistore

In een multistorecontext kan elk snippet algemeen zijn (alle winkels) of via het veld Winkel aan één bepaalde winkel worden voorbehouden. Bij één winkel is dat veld verborgen en geldt het snippet voor de huidige winkel.

Compatibiliteit met thema’s

Problemen oplossen

• De code verschijnt niet: controleer of het snippet actief is, of de plaats klopt en of de huidige pagina bij de beoogde pagina’s hoort (of dat dat veld leeg is).
• Niets aan het begin of het einde van de body: uw thema roept de bijbehorende hooks waarschijnlijk niet aan; gebruik de plaats Header of voeg die hooks aan het thema toe.
• Botsende volgorde: pas het veld Weergavevolgorde aan om de invoegvolgorde te sturen.