Qu'est-ce que la gestion des scripts ? Ajouter du code personnalisé à un site e-commerce depuis le panneau, cas d'usage, ajout sécurisé, impact sur la vitesse, test et retour arrière, budget de scripts et liste de contrôle

Un jour, il manque quelque chose sur un site e-commerce : une fenêtre de chat en direct pour échanger avec les visiteurs, un bouton de messagerie sur la page d'accueil, le code de suivi que demandent les outils publicitaires et d'analyse, ou une petite correction visuelle sur une seule page. Aucun de ces besoins n'impose de réécrire le site, mais tous exigent d'ajouter un morceau de code à ses pages. La question de savoir où, pour qui, dans quel ordre et de façon réversible vous ajoutez ce code détermine directement la vitesse et la mise en page du site.

Dans ce guide gestion des scripts est présentée ici comme la discipline d'ajout de code personnalisé depuis le panneau : ce que c'est, à quoi elle sert, comment remplir chaque champ, comment le code influence la vitesse des pages, comment le tester après l'ajout, comment revenir en arrière en cas de problème et quelles erreurs sont les plus fréquentes. Deux petits outils sont aussi proposés : un calculateur de budget qui estime la charge de scripts d'une page et un contrôle en huit points pour ajouter un script en toute sécurité. Pour la vitesse globale du site, voir l'importance de la vitesse du site; pour la diffusion des fichiers statiques CDN rehberi il existe des articles distincts ; ici, nous ne regardons que l'aspect vitesse et sécurité du code ajouté après coup à une page.

Qu'est-ce que la gestion des scripts ?

La gestion des scripts est l'espace qui permet d'ajouter, de modifier et, si besoin, de supprimer depuis le panneau du code tel que HTML, CSS et jQuery sur les pages d'un site e-commerce. Le but est d'ajouter aux pages des zones dynamiques et interactives.

Dans Faprika, cet espace est la Gestion des scripts, sous Gestion du contenu. En y entrant et en choisissant Ajouter, vous créez un champ de script ; le code que vous écrivez est placé sur les pages du site à la position choisie. Vous n'avez donc pas à modifier à la main les fichiers du modèle ni à envoyer du code sur un serveur. Le code existe comme un enregistrement : il a un nom, une position, une langue et une portée ; vous pouvez l'activer et le désactiver, le modifier ou le supprimer. Pour les étapes dans le panneau, consultez le tutoriel Gestion des scripts.

Une condition de cet espace doit aussi être connue d'emblée : il faut des connaissances suffisantes en code. Comme le tutoriel l'indique également, les modifications faites ici sans un niveau suffisant en code peuvent provoquer des défauts de conception. La gestion des scripts n'est donc pas un espace de « copier-coller », mais un espace où l'on sait ce que l'on fait et où l'on a préparé un retour en arrière.

À lire aussiPourquoi la vitesse du site est-elle importante en e-commerce ?

À quoi sert la gestion des scripts ?

La gestion des scripts sert à apporter au site de petits ajouts ciblés que le modèle ne propose pas : codes de suivi et de mesure, fenêtre de chat en direct, bouton de messagerie, bouton personnalisé ou correction de style en sont les principaux.

Le tutoriel donne deux exemples : ajouter à la page d'accueil un bouton « Commander par message » et ajouter une fenêtre de chat en direct (aide). Dans la pratique, les usages s'élargissent autour de ces exemples. Le graphique ci-dessous résume quatre types d'usage courants et le point d'attention de chacun.

Codes de suivi et de mesure

Les outils publicitaires et d'analyse demandent généralement un court code ajouté à chaque page du site. La gestion des scripts permet de le garder dans un seul enregistrement, sous un seul nom. Savoir quel code s'exécute où est la condition pour pouvoir aussi le supprimer le jour où l'on abandonne un outil. Pour la mesure faite côté serveur, voir aussi l'article sur le suivi des conversions côté serveur.

Fenêtre de chat en direct

La fenêtre située dans le coin de la page pour échanger avec les visiteurs est aussi un morceau de code. Comme c'est un élément que voient les visiteurs, c'est l'un des ajouts qui demandent le plus d'attention, tant pour la vitesse que pour la mise en page. Pour l'effet du support en direct sur les ventes, canlı destek yazısı un article distinct existe ; ici, seule compte la façon dont le code est ajouté au site.

Boutons personnalisés et petits ajouts d'interface

De petits éléments d'interface, comme un bouton de messagerie sur la page d'accueil, une zone d'information supplémentaire sur une page ou une note de campagne, s'ajoutent en HTML et CSS. Selon le tutoriel, le code HTML est placé sans être enveloppé dans une balise ; pour le style, on ouvre une balise style, et pour jQuery une balise script.

Corrections de style

Si un petit ajustement est nécessaire sur une seule page dans l'apparence proposée par le modèle, une règle CSS suffit souvent. La règle d'or est ici de garder une portée étroite : écrire des règles qui n'affectent que l'élément visé, concernant une page et non tout le site.

Quels champs trouve-t-on dans le panneau de gestion des scripts ?

Lors de la création d'un champ de script dans le panneau, on trouve les champs Code du script, Langue, Position sur la page, Nom du script, Paramètres actifs et Groupe d'utilisateurs restreint. Chaque champ détermine quand, où et pour qui le code s'exécutera.

Code du script

Le code HTML, CSS et jQuery que vous avez créé s'ajoute dans ce champ. N'oubliez pas d'ouvrir une balise style pour le CSS et une balise script pour jQuery ; le code HTML est placé sans être enveloppé dans une balise. L'exemple ci-dessous est un extrait générique et inoffensif, préparé uniquement pour montrer la structure.

<style>
  .ozel-not { padding: 12px 16px; background: #f3f6ff; border-radius: 12px; }
</style>
<div class="ozel-not">Bu bölüm örnek bir bilgi notudur.</div>
<script>
  document.querySelector(".ozel-not").setAttribute("data-durum", "hazir");
</script>

Dans l'exemple, trois parties sont séparées : la règle de style dans une balise style, l'élément visible en HTML sans balise et le comportement dans une balise script. Conserver la même séparation dans un vrai code facilite le débogage.

Langue

Dans ce champ, vous choisissez si le code du script s'applique à une seule langue ou à toutes. Sur un site multilingue, on ne veut pas qu'un élément contenant du texte, comme « Commander par message », s'affiche à l'identique dans toutes les langues ; il est alors logique de créer un enregistrement distinct par langue.

Position sur la page

Ce champ détermine dans quelle partie de la page le code est placé. Avec header, le code va dans la balise head ; avec footer, dans la balise body, mais tout à la fin. Ce choix modifie à la fois le moment d'exécution et l'effet sur la vitesse ; il est traité à part dans une section ultérieure.

Nom du script

C'est le nom saisi pour distinguer les scripts entre eux ; il doit être unique, sans doublon. Si le nom décrit l'objectif du code et la date d'ajout (« fenêtre de chat en direct, novembre »), la personne qui consultera cet enregistrement six mois plus tard comprendra tout de suite pourquoi il est là.

Paramètres actifs

Si le code que vous utilisez contient des paramètres, cliquez sur le bouton « Paramètres actifs » en haut et choisissez les paramètres voulus. Le tutoriel met ici en garde sur une règle : un paramètre ne peut être utilisé que sur les types de page où il est valide. Si vous utilisez un paramètre produit, le type de page doit absolument être défini sur produit ; sinon, le paramètre ne trouve pas sa valeur.

Groupe d'utilisateurs restreint

Vous pouvez restreindre le code du script selon les groupes d'utilisateurs. Dans l'exemple du tutoriel, le code n'est pas ajouté pour les non-membres. Cela réduit la charge inutile pour les ajouts qui ne concernent qu'une audience précise ; pour plus de détails sur les groupes, voir l'article sur les groupes d'utilisateurs.

À lire aussiQu'est-ce que les groupes d'utilisateurs ?

Comment un script influence-t-il la vitesse des pages ?

Chaque script représente un travail supplémentaire que le navigateur doit télécharger, analyser et exécuter. Plus il y a de scripts, plus ils sont lourds et plus ils se chargent tôt dans la page, plus la page s'ouvre lentement.

La vitesse a trois composantes, et chacune correspond à une décision en gestion des scripts. La première est le nombre : chaque nouveau script représente une requête ou un travail supplémentaire. La deuxième est la taille : un gros code, ou les fichiers supplémentaires qu'il charge, prend plus de temps à télécharger. La troisième est le moment : un code chargé en début de page (header) peut retarder l'affichage de la page ; un code chargé en fin de page (footer) reste en général derrière le contenu. L'effet exact dépendant de ce que fait le code, il faut mesurer plutôt que d'avancer un chiffre.

Établir un budget approximatif avant de mesurer est utile. L'outil ci-dessous vous permet de saisir vos propres estimations du nombre de scripts de la page, de la taille moyenne et du délai moyen, et de voir la charge totale. Si vous saisissez aussi une hypothèse de report, il montre ce que vous pourriez gagner en retardant les scripts jusqu'à la première interaction. Le résultat repose sur vos hypothèses ; il ne remplace pas une vraie mesure.

Gardez deux points à l'esprit en lisant l'outil. D'abord, les retards ne s'additionnent pas exactement en pratique ; certains scripts s'exécutent en parallèle. L'outil propose donc une somme « estimée » et simple : le but n'est pas de trouver la milliseconde exacte, mais de voir comment la charge augmente avec le nombre de scripts. Ensuite, le plus grand gain consiste souvent non pas à différer un script, mais à ne jamais en ajouter d'inutile.

En-tête ou pied de page ?

Le choix de la position dans la page est la décision la plus importante pour la vitesse. Le code ajouté à l'en-tête se place dans la balise head et le navigateur le rencontre avant d'afficher la page ; le code ajouté au pied de page se place tout à la fin du body et s'exécute une fois le contenu affiché.

• Adaptés à l'en-tête : les règles de style nécessaires avant même l'affichage de la page, et les codes de mesure dont les instructions indiquent « à ajouter dans le head ».
• Adaptés au pied de page : les éléments qui peuvent apparaître une fois la page affichée, comme une fenêtre de chat en direct ou un bouton de messagerie, et le code jQuery qui s'attache à des éléments de la page.

La règle est simple : si les instructions de l'outil indiquent une position, suivez-la ; sinon, placez le code dans le pied de page et déplacez-le dans l'en-tête seulement si nécessaire. Procéder dans cet ordre réduit le risque d'un code qui fait attendre la page inutilement.

Okumanızı öneririzCDN Nedir? Ve Ne İşe Yarar?

Comment ajouter un script à votre site en toute sécurité

Ajouter un script en toute sécurité se fait en quatre étapes : vérifier la source, restreindre la portée, tester d'abord et garder un moyen de revenir en arrière. Aucune n'est techniquement difficile ; le plus dur est de ne pas toutes les sauter quand on est pressé.

1. Vérifiez la source

Le code que vous collez dans le panneau s'exécute dans le navigateur de chaque visiteur de votre site. N'ajoutez donc jamais un code dont vous ignorez l'origine. Un code pris sur l'écran de configuration d'un outil n'inspire pas la même confiance qu'un code issu d'un article ou d'une personne inconnue. N'ajoutez pas un code que vous ne comprenez pas ou dont vous ne pouvez pas lire le fonctionnement ; si possible, relisez-le avec la personne qui l'a écrit ou qui fournit l'outil.

2. Restreignez la portée

Faites en sorte que le code ne s'exécute que là où il est nécessaire. Le choix de la langue, le type de page, l'utilisation de paramètres et un groupe d'utilisateurs restreint sont les leviers de cette restriction. Exécuter sur tout le site un code utile seulement sur la page produit, c'est une charge que tous les visiteurs finissent par payer. Dans la partie CSS du code, les sélecteurs ne doivent eux aussi cibler que l'élément visé.

3. Testez d'abord

Avant de publier le code, décidez où vous le testerez. Si vous n'avez pas d'environnement de test, commencez au moins par une page à impact limité ou un groupe d'utilisateurs restreint. Pendant le test, ne vérifiez pas seulement que « ça fonctionne », mais aussi que « rien d'autre n'est cassé » : examinez les parcours critiques comme la page d'accueil, la page produit, le panier et l'étape de paiement.

4. Gardez un moyen de revenir en arrière

La formation elle-même le recommande : en cas de problème, vous pouvez désactiver le script ou supprimer la zone de script. C'est pourquoi chaque code est ajouté comme une entrée distincte ; regrouper plusieurs tâches dans une seule entrée complique l'identification de la partie fautive. Avant de modifier un code, enregistrez son ancienne version quelque part.

Un véritable déroulement d'ajout peut se résumer ainsi :

1. Écrivez l'objectif et le responsable en une phrase.
2. Vérifiez la source du code ; n'ajoutez pas un code que vous ne comprenez pas.
3. Définissez le nom du script, la langue, la position dans la page et la portée.
4. Publiez d'abord avec une portée limitée et vérifiez les pages critiques.
5. S'il n'y a pas de problème, élargissez la portée ; sinon, désactivez l'entrée.
6. Si le code n'est plus nécessaire, supprimez l'entrée.

Okumanızı öneririzE-Ticaret Sitesi Güvenlik Sistemleri

Sécurité et données dans la gestion des scripts

Chaque script ajouté au site s'exécute dans le navigateur du visiteur avec les mêmes droits que votre page. Ce que le code ajouté collecte et l'endroit où il l'envoie relèvent donc à la fois de la sécurité et de la protection des données.

Répondez à trois questions avant d'ajouter un code : quelles informations du visiteur le code lit-il ou envoie-t-il, l'information requise a-t-elle été donnée au visiteur pour ces données, et le code s'exécute-t-il sur une page de paiement ou de connexion ? La portée d'un code exécuté lors du paiement ou de l'inscription doit rester aussi étroite que possible, et il ne faut pas l'ajouter du tout à ces pages s'il n'est pas nécessaire. Si un code de suivi exécuté dans le navigateur utilise des cookies, la gestion des cookies entre aussi en jeu ; pour les détails, consultez çerezler et la conformité KVKK les articles.

Pour les mesures générales de cybersécurité, consultez l'article sur la cybersécurité en e-commerce. Pour la gestion des scripts, la règle de synthèse est la suivante : n'ajoutez que le code d'une source de confiance, gardez une portée étroite et supprimez le code que vous n'utilisez plus.

Comment tester un script ajouté

Pour tester un script, vérifiez d'abord que le code fonctionne, puis que le reste de la page n'est pas altéré, et enfin son effet sur la vitesse. Les trois points se contrôlent séparément sur ordinateur et sur mobile.

• Fonctionnement : l'élément ajouté est-il visible, le bouton mène-t-il au bon endroit, la fenêtre s'ouvre-t-elle et se ferme-t-elle ?
• Mise en page : les autres sections de la page n'ont-elles pas bougé, y a-t-il des conflits avec d'autres éléments ? Les éléments du coin inférieur droit (chat en direct, bouton de messagerie) se chevauchent-ils ?
• Parcours critiques : la page produit, le panier et l'étape de paiement fonctionnent-ils comme avant ?
• Mobile : l'élément ajouté est-il lisible et cliquable sur un petit écran ?
• Vitesse : la page est-elle nettement plus lente qu'avant ? Mesurez la même page avec la même méthode avant et après l'ajout, puis comparez.
• Portée : le code s'exécute-t-il uniquement sur la page, la langue et le groupe d'utilisateurs visés ?

Pour mesurer la vitesse, il est important de garder les mêmes conditions : même page, même connexion, même outil. De petits écarts peuvent n'être que du bruit de mesure ; en cas d'écart net, envisagez de différer le code, de changer sa position ou de le supprimer.

Erreurs les plus fréquentes dans la gestion des scripts

La plupart des erreurs viennent non pas du code lui-même, mais de la manière dont il est ajouté : ajout sans objectif, portée trop large, absence de test et oubli de suppression figurent en tête de cette liste.

1. Coller sans comprendre : ajouter au panneau un code d'origine incertaine. L'avertissement de la formation est clair : sans connaissances suffisantes en code, la conception peut être cassée.
2. Tout regrouper dans une seule entrée : en cas de problème, il devient plus difficile de trouver quelle partie en est la cause.
3. Laisser la portée trop large : exécuter sur tout le site un code utile seulement sur la page produit.
4. Utiliser un paramètre sur le mauvais type de page : pour un paramètre produit, ne pas sélectionner le type de page produit.
5. Ajouter deux fois le même code : par exemple, placer le même code de mesure à la fois dans le modèle et dans le panneau ; les données sont comptées en double et la charge augmente.
6. Ne pas rendre le nom unique ni le décrire : six mois plus tard, personne ne sait à quoi sert chaque entrée.
7. Publier sans tester : surtout sur mobile et à l'étape de paiement.
8. Laisser du code inutilisé : le code des outils abandonnés continue de s'exécuter et d'alourdir la charge.

À lire aussiQu'est-ce que le suivi des visiteurs en direct ?

Liste de contrôle pour ajouter un script en toute sécurité

Les huit points ci-dessous constituent le contrôle à effectuer avant et après l'ajout d'un script. Le plus sûr est de ne pas publier le code tant que tous les points ne sont pas cochés.

Quand la gestion des scripts est-elle la bonne solution ?

La gestion des scripts est la bonne solution lorsque le besoin du site est un ajout petit, ciblé et réversible. Si le besoin exige de modifier la structure du site, ou si vous n'avez pas de connaissances en code, il faut choisir une autre voie.

La gestion des scripts est pertinente dans les cas suivants : ajouter le code d'un outil à tout le site, placer un petit bouton sur la page d'accueil, corriger un style sur une seule page. La prudence s'impose dans ces cas : ajouter du code à des étapes critiques comme le paiement ou l'inscription, tenter de modifier le fonctionnement de base du site, essayer un code d'origine incertaine. Dans ces situations, il est plus sûr d'en parler d'abord à votre équipe ou à l'équipe Faprika, ou de trouver quelqu'un qui a les connaissances en code pour le faire. Si une fonctionnalité ou un module complémentaire prêt à l'emploi remplit la même fonction, le choisir est aussi moins risqué que d'ajouter du code à la main ; vous trouverez les solutions toutes prêtes de Faprika sur la page des modules complémentaires.

La gestion des scripts avec Faprika

Dans Faprika, la gestion des scripts se fait depuis la zone Gestion des scripts, sous Gestion du contenu : vous créez une nouvelle zone de script, choisissez le code, la langue, la position dans la page, le nom et la portée, puis désactivez l'entrée en cas de problème.

L'avantage pratique de cette zone est que le code reste sous forme d'entrées distinctes, sans toucher aux fichiers du modèle. Comme chaque code a un nom, une position et une portée, il est facile de voir quel code s'exécute où et d'annuler les modifications. Les options de langue et de groupe d'utilisateurs vous aident à n'exécuter le code que là où il est nécessaire. Pour les étapes d'utilisation du panneau, consultez la formation Gestion des scripts ; pour la disponibilité de la fonctionnalité selon l'offre, consultez la page des offres e-commerce. Si vous souhaitez discuter de la mise en œuvre sur votre propre site, vous pouvez contacter notre équipe.

Questions fréquentes

Qu'est-ce que la gestion des scripts ?

La gestion des scripts est la zone qui permet d'ajouter, depuis le panneau, du code HTML, CSS et jQuery aux pages d'un site e-commerce. Dans Faprika, on y accède par Gestion des scripts sous Gestion du contenu, et l'on crée une zone de script avec « Ajouter ».

À quoi sert la gestion des scripts ?

Elle sert à faire de petits ajouts que le modèle ne propose pas : code de suivi, fenêtre de chat en direct, bouton de messagerie, bouton personnalisé ou correction de style. Le but est d'ajouter aux pages des zones dynamiques et interactives.

Faut-il savoir coder pour utiliser la gestion des scripts ?

Oui. Sans connaissances suffisantes en code, les modifications faites ici peuvent provoquer des défauts d'affichage. Si vous ne comprenez pas un code, ne l'ajoutez pas ; en cas de problème, vous pouvez désactiver le script ou supprimer le champ de script.

Quelle est la différence entre header et footer ?

Si vous choisissez header dans le champ Position sur la page, le code est placé dans la balise head ; avec footer, il est placé dans la balise body, tout à la fin. Si les instructions de l'outil indiquent une position, suivez-les ; sinon, placez le code dans le footer et déplacez-le dans le header si nécessaire.

Un script ralentit-il la vitesse des pages ?

Chaque script implique un téléchargement et un traitement supplémentaires ; leur nombre, leur taille et un chargement précoce peuvent retarder l'ouverture de la page. L'effet dépendant du code, il faut mesurer la même page avec la même méthode avant et après l'ajout, puis comparer.

Peut-on n'afficher un script qu'à certains utilisateurs ?

Oui. Avec le champ Groupe d'utilisateurs restreint, vous pouvez limiter le code du script selon les groupes d'utilisateurs ; par exemple, vous pouvez choisir de ne pas ajouter le code pour les non-membres. Avec le champ Langue, vous pouvez aussi exécuter le code dans une seule langue ou dans toutes les langues.

Articles qui peuvent vous intéresser

• Pourquoi la vitesse du site est-elle importante en e-commerce ?
• CDN Nedir? Ve Ne İşe Yarar?
• Qu'est-ce que les groupes d'utilisateurs ?
• Qu’est-ce que le suivi des conversions côté serveur ?