Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
Utilisation de la zone d'Injection de Code

Vous pouvez ajouter du code et des scripts personnalisés à votre site à l'aide de la zone Code Injection (Injection de Code) dans Advanced Settings (Paramètres Avancés).

L’injection de code est une fonctionnalité Premium disponible avec les forfaits Entreprise et Commerce.

Regarder une vidéo

Avant de commencer

  • Si vous ajoutez du code à l’injection de code, nous pourrons éventuellement vous demander de le désactiver lorsque vous apporterez des modifications à votre site.
  • Pour ajouter du code JavaScript à un champ d'Injection de Code, entourez le code avec des tags <script></script>.
  • Nous vous recommandons d’ajouter du code CSS à l’Éditeur CSS Personnalisé et non à un champ d’Injection de Code. Si vous l'ajoutez à un champ d'Injection de Code, entourez le code avec des tags <style></ style>.

Quand utiliser la zone d'Injection de Code

Utilisez l’injection de code pour ajouter du code HTML et des scripts afin d’améliorer certaines parties de votre site. Il peut s’agir par exemple de services de chat en direct, de la vérification de domaine pour des services personnalisés de messagerie électronique ou d’outils d’analyse et de statistiques pour votre site.

La zone d'Injection de Code n'est pas conçue pour ajouter du contenu ou des styles. Pour ajouter du contenu à votre site, rendez-vous sur Créer une page. Pour ajouter du code CSS personnalisé aux styles, utilisez l'Éditeur CSS personnalisé.

Étape 1 - Ouvrir la zone d'Injection de Code

Dans le Menu Principal, cliquez sur Settings (Paramètres), puis sur Advanced (Avancé) et enfin sur Code Injection (Injection de Code).

Étape 2 - Ajouter du code HTML

Ajoutez un code HTML ou des scripts valides dans les champs Injection de code correspondant aux éléments suivants : en-tête, pied de page, page de verrouillage ou page de confirmation.

Le code ajouté ici est injecté dans le tag <head> sur chaque page de votre site.

Screen_Shot_2019-01-16_at_1.01.09_PM.png

Le code ajouté ici est injecté avant le tag de clôture <body> sur chaque page de votre site.

Screen_Shot_2019-01-16_at_1.01.25_PM.png

Remarque : la zone Pied de Page est définie par votre template.

Page de verrouillage

L'écran verrouillé s'affiche lorsqu'une page ou un site est protégé(e) par un mot de passe de site  ou de page.Le code injecté ici s'affiche au-dessus du champ Mot de Passe de l'écran verrouillé.

Bien qu'il soit possible d'ajouter du code dans ce champ, nous vous recommandons d'utiliser plutôt le panneau Écran de verrouillage pour créer votre page de verrouillage. Vous pourrez ainsi notamment ajouter une image d'arrière-plan ou un diaporama, ajuster le style des polices ou incorporer votre logo.

Screen_Shot_2019-01-16_at_1.01.32_PM.png

Page de confirmation de commande

Le code ajouté ici est injecté dans la page de confirmation de commande s'affichant après le paiement d'un client, ce qui constitue une solution bien adaptée pour ajouter des programmes tiers de suivi et d'affiliation à votre boutique.

Six balises vous permettent d'insérer des informations client spécifiques :

  • {orderId} – L'identifiant unique de la commande confirmée
  • {orderSubtotal} – Le sous-total de la commande confirmée
  • {orderSubtotalCents} – Le sous-total de la commande confirmée, en cents
  • {orderGrandTotal} – Le montant global de la commande confirmée
  • {orderGrandTotalCents} – Le montant global de la commande confirmée, en cents
  • {customerEmailAddress} – L'adresse email du client ayant été saisie dans le champ « Informations de Facturation »

Screen_Shot_2019-01-16_at_1.01.40_PM.png

Étape 3 - Enregistrer

Après l'ajout de votre code, cliquez sur Save (Sauvegarder).

5.png

Injection de Code sur une page spécifique

Vous pouvez également injecter du code dans une page spécifique :

  1. Ouvrez la page lorsque vous êtes dans la section Pages.
  2. Survolez la zone de contenu avec votre souris.
  3. Cliquez sur Settings (Paramètres).
  4. Dans la fenêtre Page Settings (Paramètres de Pages), cliquez sur Advanced (Options Avancées) dans le coin supérieur droit.

Page Header Code Injection (Injection de Code dans un En-tête de Page) ajoute du code au tag <head> de cette page. Il ne s'affichera pas sur les pages d'accueil Index.

Dans les Paramètres de la Page Blog, la zone Post Blog Item Code Injection (Injection de code après l'Article de Blog) vous permet d'ajouter du code à chaque article de blog.

  • Cette zone apparaîtra au-dessus ou au dessous du contenu de l'article en fonction de votre template.
  • Dans les modèles qui disposent de la page Blog en grille/empilée, le code s’affiche sur la page de destination du blog et non dans chaque billet.
Remarque : un chargement Ajax peut empêcher du code CSS ajouté à un champ d'Injection de Code de se charger correctement. Ajoutez plutôt du code CSS à l'l’Éditeur CSS.

Screen_Shot_2019-01-16_at_1.02.57_PM.png

Désactiver les scripts dans l’aperçu

Le code personnalisé peut vous empêcher de modifier votre site de façon sécurisée. Lorsque nous vous aidons à résoudre les problèmes, nous pouvons vous demander de désactiver les scripts dans l’aperçu. Dans ce cas, vous ne verrez pas votre code personnalisé quand vous serez connecté(e), mais cela n’affectera pas l’affichage de votre site pour les visiteurs.

En cas d’interférence du code, vous verrez s’afficher ce message en bas de votre site :

Erreur lors du chargement de l'aperçu de votre site. Cette erreur est souvent causée par l'injection de code.

Pour apporter vos modifications en toute sécurité, cliquez sur l’option Désactiver les scripts dans l’aperçu en bas de votre site. Vous recevrez le message Les scripts ont été désactivés dans l’aperçu de votre site. Pour afficher votre code personnalisé, ouvrez une nouvelle fenêtre privée dans votre navigateur et entrez l’URL de votre page.

Si le message de désactivation des scripts n’apparaît pas automatiquement :

  1. Déclenchez son affichage en saisissant /safe à la fin de votre URL de modification sécurisée, puis appuyez sur Entrée.
  2. Si cette solution ne fonctionne pas, vérifiez les zones auxquelles vous avez ajouté du code personnalisé pour le supprimer temporairement pendant le dépannage.

Une fois votre code désactivé, le message Activer les scripts dans l’aperçu ? peut s’afficher. Nous vous déconseillons de cliquer dessus, car il peut vous empêcher de prévisualiser, de modifier ou de lancer votre site lorsque vous êtes connecté(e). Il est impossible de masquer ce message, mais vous le verrez uniquement lorsque vous serez connecté(e). Vos visiteurs ne le voient pas.

Remarque : l’ajout et la modification de code sur votre site sont considérés comme des modifications avancées. Nous vous conseillons vivement de n’utiliser l’injection de code que si vous possédez des connaissances en codage. À défaut de pouvoir vous assister davantage à ce sujet, nous vous recommandons les ressources suivantes :

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 121 sur 298
Utilisation de la zone d'Injection de Code