Code personnalisé

L'éditeur est flexible dans le sens où il vous permet de modifier le code existant ou d'ajouter le vôtre. Ainsi, vous pouvez à la fois élargir le champ de fonctionnalité de la plateforme et bénéficier de fonctionnalités supplémentaires. Vous pouvez par exemple ajouter un widget calendrier personnalisé, ou même un formulaire de contact personnalisé tiers qui vous permettra d'accepter les paiements sur votre site.

Comment ajouter un code personnalisé

Il y a plusieurs façons d'ajouter du code personnalisé : via le mode développeur ou le HTML widget. Vous trouverez ci-dessous des instructions sur la manière d'accéder aux deux.

Remarque

Le code personnalisé destiné à être visible sur le site doit être ajouté à l'aide d'un widget HTML. Les codes personnalisés qui ne le sont pas doivent généralement être placés dans l'en-tête. En général, il est toujours préférable de suivre les instructions fournies par l'auteur du code avant de l'ajouter à votre site.

Mode développeur

Le mode développeur vous permet de modifier le HTML et le CSS de votre site Web. L'ajout d'un code personnalisé permet une personnalisation avancée qui n'est pas possible avec l'éditeur glisser-déposer. Cependant, ce processus ne doit être réalisé que par des utilisateurs avancés ayant une connaissance approfondie du code de développement Web.

Pour accéder au mode développeur :

  1. Cliquez sur Mode développeur (dev_mode_icon.png) dans la barre de navigation. Vous pouvez également cliquer avec le bouton droit de la souris sur un widget et sélectionner Edit HTML/CSS, puis cliquer sur Dev Mode dans le coin inférieur gauche.

  2. Après avoir ajouté ton code, utilisez les boutons Enregistrer et Aperçu pour voir ton travail.

HTML widget

Le site HTML widget est la méthode la plus simple pour ajouter un code personnalisé à votre site. Selon l'endroit où vous placez votre HTML widget, il apparaîtra soit sur toutes les pages de votre site, soit sur une seule page. Si vous placez le HTML widget dans l'en-tête ou le pied de page, il sera placé sur toutes les pages du site en même temps. En effet, chaque site partage l'en-tête et le pied de page. Si vous placez le HTML widget à un autre endroit, il n'apparaîtra que dans le corps du texte.

Dans le panneau latéral, cliquez sur widgetet faites glisser le HTML widget dans une colonne ou une ligne de votre site et collez le code.

Code personnalisé dans l'en-tête

Vous pouvez placer le code dans l'en-tête du site ou dans l'en-tête d'une page individuelle.

Remarque

Les applications de gestion du consentement ne sont pas en mesure d'empêcher l'exécution du code avant le consentement lorsque le code est placé dans l'en-tête HTML. En effet, nous optimisons la structure et l'ordre de chargement du contenu, sur la base des meilleures pratiques en matière de performances sur le site. Nous plaçons les scripts et les bannières CMP plus bas sur la page, afin d'améliorer la performance du contenu principal. Pour cette raison, il est recommandé de placer le code dans le corps du texte lorsque vous utilisez une application de gestion du consentement.

En-tête du site

Pour placer le code dans l'en-tête du site :

  1. Dans le panneau latéral, cliquez sur SEO & Settings.

  2. Cliquez sur Header HTML.

    • Tête HTML. Ajoutez du contenu au champ de la section d'en-tête.

    • Corps Fin HTML. Ajoutez du HTML/Javascript personnalisé juste avant la fermeture tag de l'élément <body> pour chaque page du site.

  3. Collez votre code, puis enregistrez.

En-tête de page unique

Pour placer le code dans l'en-tête d'une seule page :

  1. Dans le panneau latéral, cliquez sur Pages.

  2. Sur la page à laquelle vous voulez l'ajouter, cliquez sur l'icône des paramètres (settings-icon.png).

  3. Cliquez sur SEO.

  4. Faites défiler vers le bas jusqu'à Header HTML.

  5. Collez votre code et cliquez sur Enregistrer.

Mon code disparaît lorsque je le place dans la section "Head".

Il est fréquent que les codes de suivi des pixels disparaissent lorsqu'ils sont placés dans l'en-tête. La section head <head> n'accepte aucun code qui soit <img>, <iframe>, et plus encore. Il ne prend normalement que <link>, <script>, et <meta>.

Si vous devez coller du code qui n'est pas enregistré dans la section head, collez-le dans le header ou dans le body-end.html. Pour ce faire, suivez les étapes de la section Code personnalisé après le corps d'ouverture tag de cet article.

Code personnalisé après le corps d'ouverture tag

Pour le moment, aucune fonctionnalité ne permet de placer du code directement après le tag d'ouverture du corps. Vous pouvez toutefois coller un code directement dans le fichier body-end.html. Il existe deux façons de le faire : en mode développeur ou dans les paramètres.

Pour coller le code directement dans le fichier body-end.html en mode développeur :

  1. Cliquez sur l'icône du mode développeur (dev_mode_icon.png) dans la barre supérieure.

  2. Cliquez sur Site HTML / CSS pour élargir la sélection.

  3. Cliquez sur body-end.html.

  4. Collez votre code dans la dernière ligne.

  5. Cliquez sur Enregistrer et Terminé.

Pour coller le code directement dans le fichier body-end.html dans les paramètres :

  1. Dans le panneau latéral, cliquez sur SEO & Settings.

  2. Cliquez sur Head HTML.

  3. Collez ce code dans le champ Body End HTML.

  4. Cliquez sur Enregistrer.

Code personnalisé dans les éléments ou widget

De nombreux éléments, notamment les lignes, les colonnes et widget, offrent la possibilité d'accéder à leur code HTML/CSS.

Pour ajouter n'importe quel code à n'importe quel élément ou widget :

  1. Cliquez avec le bouton droit de la souris sur widget ou sur un élément pour afficher le menu contextuel.

  2. Cliquez sur Modifier HTML/CSS. Si vous êtes en mode flex dans l'Éditeur classique ou l'Éditeur 2.0, cliquez sur l'icône en forme de trois points dans le menu flottant, puis sélectionnez Éditer CSS.

  3. Modifiez ou ajoutez du code selon les besoins.

  4. Cliquez sur Mettre à jour.

Vous devrez peut-être actualiser le navigateur pour voir la modification.

Ajouter un code de suivi au formulaire de contact

Pour ajouter un code de suivi à un formulaire de contact :

  1. Rendez-vous sur la page contenant votre formulaire de contact.

  2. Cliquez sur le formulaire de contact pour ouvrir les options.

  3. Cliquez sur Soumission.

  4. Suivi des clics.

  5. Collez votre code de suivi des conversions.

Lignes directrices recommandées pour les codes personnalisés

Vous trouverez ci-dessous les recommandations à suivre lorsque vous travaillez avec du code personnalisé et en mode développeur.

Lignes directrices générales

  • Créez toujours une sauvegarde de votre site avant d'ajouter du code personnalisé.

  • Avant de placer le code dans l'en-tête, testez-le d'abord sur un site distinct. Vous pouvez le faire en créant une copie de votre site pour tester le code personnalisé.

  • Pour le code devant être inséré sur une page, créez une page d'essai et intégrez-y le code.

  • L'aperçu utilise HTTPS, alors que le site réel peut ne pas l'utiliser. Cela entraînera souvent une rupture du code personnalisé.

  • Veillez à rester dans les colonnes. Nos sites Web adaptatifs s'appuient sur une structure ligne-colonne. Cela signifie que chaque ligne contient une colonne, qui contient elle-même le contenu. Lorsque vous ajoutez ou modifiez votre propre HTML, assurez-vous qu'il est à l'intérieur d'une colonne.

Lignes directrices spécifiques au mode développeur

  • Veillez à rester dans les colonnes. Nos sites Web adaptatifs s'appuient sur une structure ligne-colonne. Cela signifie que chaque ligne contient une colonne, qui contient elle-même le contenu. Lorsque vous ajoutez ou modifiez votre propre HTML, assurez-vous qu'il est à l'intérieur d'une colonne.

  • Laissez les classes en place. L'éditeur dépend des différentes classes qui sont ajoutées aux éléments. Si une classe existe déjà (elle commence généralement par « dm »), laissez-la en place. Si vous supprimez des classes, le site peut ne pas avoir le même aspect que sur l'aperçu.

  • Jetons un œil aux dimensions des classes. Les colonnes ont une valeur de taille qui est ajoutée comme classe, par exemple, large-6 ou small-12. Cette valeur détermine la taille des colonnes à l'intérieur de cette ligne. Vous devrez les laisser en place, car elles constituent le cœur du dimensionnement de la ligne sur différents appareils.

  • Évitez autant que possible de modifier les extensions. Dans le code HTML, vous verrez déjà des espaces réservés pour les éléments de la page. Si vous le pouvez, évitez de les modifier, en particulier les valeurs de données qu'ils contiennent. La modification de ces éléments peut briser le site widget une fois qu'il est renvoyé à l'éditeur.

Dépannage du code personnalisé

Si vous avez ajouté du code personnalisé à votre site et que celui-ci nuit à votre performance ou vous empêche de modifier votre site, il est probable que le code en question n'ait pas été correctement formaté ou qu'il ne soit pas compatible avec le HTTPS.

Vous trouverez ci-dessous des solutions de dépannage pour les problèmes que vous pouvez rencontrer lorsque vous travaillez avec du code personnalisé.

Restaurer une sauvegarde de votre site

Restaurez une sauvegarde de votre site à un point antérieur à l'ajout du code personnalisé (même si vous n'avez pas créé de sauvegarde, l'éditeur en crée une pour vous lorsque vous publiez ou passez en mode développeur).

Pour restaurer une sauvegarde :

  1. Dans le panneau latéral, cliquez sur SEO & Settings, puis sur Backup Site.

  2. Cliquez sur le lien Restaurer en regard de la sauvegarde que vous souhaitez restaurer.

  3. Confirmez votre sélection en cliquant sur Restaurer.

Messages d'erreur spécifiques

Vous trouverez ci-dessous les messages d'erreur spécifiques et leur signification :

  • DUPLICATE_ID. Chaque élément doit avoir un identifiant unique.

  • INVALID_ELEMENT_LOCATION. Tous les éléments doivent se trouver dans une colonne qui doit se trouver dans une ligne.

  • MAUVAISE_PROPORTION. La somme des colonnes d'une même ligne doit être égale à 12.

  • INVALID_CLASS_FOR_ELEMENT. Une classe IONOS a été ajoutée à un élément invalide.

Le code ne fonctionne pas

Si vous avez du code qui ne fonctionne pas sur le site, il est probable que le code en question n'ait pas été correctement formaté ou qu'il ne soit pas compatible avec le HTTPS.

Si votre code inclut des liens (http:// ou //) et que votre site utilise le HTTPS ou que vous êtes dans l'aperçu, vous devrez remplacer ces éléments par https://. En effet, le code non compatible avec le HTTPS ne fonctionnera pas dans le cadre d'une connexion HTTPS (aperçu du site, éditeur, etc.).

Problème de vitesse des pages

L'optimisation de la vitesse des pages affecte la façon dont certains scripts sont exécutés. Nous optimisons PageSpeed sur la plupart des pages, ce qui peut causer des problèmes avec votre code personnalisé.

Pour déterminer si votre code personnalisé est affecté par un problème de vitesse de page :

  1. Dupliquez la page avec vos scripts.

  2. Modifiez l'URL en "testing_scripts."

  3. Publiez et vérifiez la page sur votre site réel.

  4. Si le code tu fonctionne sur cette page, contactez le support pour désactiver l'optimisation de la vitesse des pages pour votre site.

Si vous utilisez un script, vous pouvez également essayer de vous assurer que votre script s'exécute de manière asynchrone. Il n'y a pas de garantie, mais cela résout parfois le problème de scripts qui ne s'exécutent pas correctement dans le navigateur.

Pour activer l'exécution asynchrone du script, vous devez le modifier de la manière suivante :

  • Ancien code : <script src="https://example.com/script.js">< /script ></script>

  • Nouveau code : <script src="https://example.com/script.js" async defer>< /script ></script>