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

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.

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

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