Code en-tête et pied de page – manuel d’utilisation

Page du module : Code en-tête et pied de page PDF · 192 KB

1. À quoi sert le module

Le module ajoute votre propre code à la boutique sans modifier le thème : Google Tag Manager, Google Analytics, Meta Pixel, balises meta de vérification pour Google Search Console ou Bing, widgets de chat et autres extraits du même genre. Vous collez le code dans la configuration du module et choisissez son emplacement : dans l’en-tête de la page (section <head>), juste après l’ouverture de <body> ou à la fin de la page. Un champ à part reçoit le code de conversion de la page de confirmation de commande, avec le numéro, la référence et les montants de la commande. Deux autres champs accueillent votre CSS et votre JavaScript.

Le code est enregistré dans la base de données de la boutique et non dans les fichiers du thème : il reste en place après une mise à jour ou un changement de thème, et chaque boutique d’un multiboutique peut avoir son propre code.

Compatible avec PrestaShop 1.7.8, 8.x et 9.x (PHP 7.2.5 ou plus récent), avec les thèmes Classic et Hummingbird et avec le multiboutique.

2. Installation

  1. Sur la page du module sur addonspresta.com, cliquez sur Télécharger gratuitement (aucun compte nécessaire).
  2. Dans votre back-office, ouvrez Modules → Gestionnaire de modules et cliquez sur Installer un module.
  3. Déposez le fichier ap_customcode_v1.0.1.zip et attendez la confirmation.
  4. Cliquez sur Configurer sur la fiche du module.

3. Fonctionnement

Le module insère chaque bloc de code par un hook standard de PrestaShop affiché par le thème :

  • Code dans l’en-tête (head) et CSS personnalisé — à la fin de la section <head>, après les styles du thème (hook displayHeader) ;
  • Code au début de la page (body) — juste après la balise <body> (hook displayAfterBodyOpeningTag) ;
  • Code à la fin de la page (body) et JavaScript personnalisé — avant la balise </body>, après les scripts du thème (hook displayBeforeBodyClosingTag) ;
  • Code de conversion — uniquement sur la page de confirmation de commande (hook displayOrderConfirmation).

Le thème Classic de PrestaShop 1.7.8, 8 et 9 et le thème Hummingbird de PrestaShop 9 affichent ces hooks sur toutes les pages de la boutique. Un thème d’un autre éditeur peut omettre les hooks du <body> : si le code du début ou de la fin de la page n’apparaît pas, interrogez l’éditeur du thème. La page de maintenance et la page « pays non autorisé » n’ont pas de hooks : aucun code n’y apparaît.

Le module insère le code exactement tel que vous le collez, sans le vérifier ni le modifier. Seule exception : si vous collez dans le champ CSS ou JavaScript le code avec sa balise <style> ou <script>, le module la retire, car il ajoute la sienne. Un bloc désactivé ou vide n’insère rien du tout.

Le code de conversion s’exécute à chaque affichage de la page de confirmation. Dans le code, {order_id}, {order_reference}, {total_paid} (TTC), {total_paid_tax_excl}, {total_products} (produits HT), {total_shipping} (TTC) et {currency} (code ISO de la devise, par exemple EUR) sont remplacés par les valeurs de la commande affichée. Les nombres sont insérés comme des nombres arrondis à deux décimales et les textes comme des chaînes JavaScript entre guillemets : vous pouvez les utiliser tels quels dans un script, ils ne peuvent pas le casser. Aucune donnée personnelle du client (nom, e-mail, adresse) n’est disponible. Quand un panier donne plusieurs commandes (une par transporteur), les valeurs sont celles de la commande affichée sur la page de confirmation.

Le module lui-même ne se connecte ni à addonspresta.com ni à aucun autre serveur et ne dépose pas de cookies. Le code que vous collez le fait souvent : il est sous votre responsabilité, et les scripts de suivi doivent respecter le consentement aux cookies de vos visiteurs (RGPD). Utilisez les fonctions de consentement de l’outil ajouté (par exemple le mode Consentement de Google dans Google Tag Manager) ou un module de gestion du consentement.

4. Fonctions et réglages

Ouvrez Modules → Gestionnaire de modules → Code personnalisé en-tête et pied de page → Configurer. Le cadre Aide en haut de la page renvoie vers ce manuel et vers la page du module sur addonspresta.com, dans la langue de votre back-office.

Chaque bloc a un interrupteur Oui / Non et un champ de code. Désactiver un bloc conserve son code mais arrête son insertion, ce qui est pratique quand un script pose problème. Chaque champ accepte jusqu’à 48 000 octets. Un seul bouton Enregistrer enregistre tous les blocs.

Code sur toutes les pages

  • Code dans l’en-tête (head) — Google Tag Manager (la partie <script>), Google Analytics, Meta Pixel, balises meta de vérification comme <meta name="google-site-verification" content="…">.
  • Code au début de la page (body) — la partie <noscript> de Google Tag Manager.
  • Code à la fin de la page (body) — widgets de chat et scripts qui n’ont pas besoin de se charger tôt, y compris des scripts externes comme <script src="https://…" async></script>.

Confirmation de commande

Code de conversion — conversions Google Ads, événement Purchase du Meta Pixel, réseaux d’affiliation. Écrivez les variables sans guillemets, le module les ajoute là où il faut :

<script>
  gtag('event', 'purchase', {
    transaction_id: {order_reference},
    value: {total_paid},
    currency: {currency}
  });
</script>

CSS et JavaScript personnalisés

  • CSS personnalisé — des règles CSS sans balises <style>. Elles se chargent après les styles du thème et l’emportent donc sur les règles du thème ayant le même sélecteur.
  • JavaScript personnalisé — du JavaScript sans balises <script>. Il s’exécute à la fin de la page, après les scripts du thème. Pour charger un fichier de script externe, collez plutôt la balise <script src="…"> complète dans le Code à la fin de la page (body).

Le champ CSS ne peut pas contenir </style> et le champ JavaScript ne peut contenir ni </script> ni <!-- : un tel code fermerait trop tôt la balise ajoutée par le module, ou l’empêcherait de se fermer, et casserait la page. L’enregistrement affiche donc une erreur.

5. Multiboutique

Le code est enregistré pour la boutique ou le groupe choisi dans l’en-tête du back-office ; une note au-dessus du formulaire indique ce que vous modifiez. Choisissez Toutes les boutiques pour définir un code commun à toutes les boutiques, ou une seule boutique pour lui donner son propre code. Le code enregistré pour une boutique l’emporte sur celui de son groupe ou de toutes les boutiques. Dans le contexte Toutes les boutiques ou groupe, seul un employé qui gère toutes ses boutiques peut enregistrer. Une licence couvre toutes les boutiques de l’installation.

6. Désinstallation

Gestionnaire de modules → Code personnalisé en-tête et pied de page → Désinstaller supprime tout le code et les réglages du module. Copiez d’abord votre code si vous risquez d’en avoir besoin, ou choisissez plutôt Désactiver, qui conserve tout.

7. Questions fréquentes et dépannage

Le code n’apparaît pas dans la source de la page. Vérifiez que le bloc est activé et enregistré, puis videz le cache dans Paramètres avancés → Performances. Si un module de cache de pages ou un CDN se trouve devant la boutique, videz aussi son cache. S’il ne manque que les blocs du <body>, votre thème n’affiche peut-être pas ces hooks (voir Fonctionnement).

Google Search Console ne trouve pas ma balise de vérification. Collez la balise <meta …> dans le Code dans l’en-tête (head), enregistrez, videz le cache et ouvrez la source de la page d’accueil : la balise doit se trouver dans <head>. Relancez ensuite la vérification.

Ma boutique s’affiche mal après l’enregistrement d’un code. Désactivez le bloc et enregistrez : le code reste dans le champ, vous pouvez le corriger tranquillement. Faites de même pour un script qui affiche des erreurs dans la console du navigateur.

La conversion est comptée deux fois. La page de confirmation exécute de nouveau le code de conversion quand le client la recharge. Transmettez {order_reference} ou {order_id} comme identifiant de transaction : Google Ads, Meta et la plupart des réseaux d’affiliation compteront alors chaque commande une seule fois.

Pourquoi écrire {total_paid} sans guillemets ? Le module insère des valeurs JavaScript prêtes à l’emploi : 123.45 pour les montants et "EUR" entre guillemets pour les textes. Des guillemets en plus transformeraient le montant en texte.

Puis-je utiliser les variables dans un pixel image ou un lien ? Pas directement. Les variables sont prévues pour du JavaScript : un texte comme {order_reference} arrive avec ses propres guillemets, qui couperaient un attribut HTML tel que <img src="…?ref={order_reference}">. Construisez plutôt l’adresse du pixel dans un script :

<script>
  new Image().src = 'https://example.com/pixel?ref=' + encodeURIComponent({order_reference});
</script>

Comment exclure certaines pages ? Dans Apparence → Positions, ouvrez le hook du bloc (par exemple displayHeader), modifiez la ligne du module Code personnalisé en-tête et pied de page et ajoutez les pages à ses exceptions.

Puis-je changer la façon dont le CSS ou le JavaScript personnalisé est inséré ? Oui. Copiez views/templates/hook/style.tpl ou script.tpl dans themes/<votre-thème>/modules/ap_customcode/views/templates/hook/ et modifiez la copie, par exemple pour ajouter un attribut demandé par votre outil de consentement aux cookies.

8. Mises à jour et assistance

Les mises à jour sont gratuites : téléchargez les nouvelles versions depuis la page du module sur addonspresta.com et installez-les comme un nouveau module. Votre code et vos réglages sont conservés. Chaque version passe notre audit de sécurité avant sa publication.

Ce module gratuit est fourni avec la même licence que nos modules payants (une boutique avec autant de boutiques multiboutique que vous voulez, un code que vous pouvez modifier mais pas partager) et sans assistance technique. Si vous avez besoin d’aide pour l’installation ou la configuration, nous pouvons vous la proposer en tant que prestation payante. Signalez les failles de sécurité à mail@addonspresta.com : nous les corrigeons en priorité.

-->

Retour : Manuels des modules

Retour en haut