Articles dans cette section

Afficher plus

Code personnalisé

  • Mise à jour

L'éditeur est souple : vous pouvez modifier le code existant ou ajouter le vôtre. Vous étendez ainsi les fonctions de la plateforme et débloquez des possibilités supplémentaires. Vous pouvez par exemple intégrer un widget de calendrier personnalisé, ou encore un formulaire de contact tiers pour encaisser des paiements sur votre site.

Comment ajouter du code personnalisé

Vous ajoutez du code personnalisé à l'aide du widget HTML. Voici comment l'utiliser.

Remarque :

  • Le code personnalisé destiné à s'afficher sur le site s'ajoute via un widget HTML. Le code qui n'est pas visible se place en général dans le header. De façon générale, mieux vaut toujours suivre d'abord les indications de l'auteur du code avant de l'ajouter à votre site.
  • Vous ne pouvez ni téléverser ni exécuter de fichiers PHP. Les langages côté serveur, comme PHP, ne sont pas pris en charge, car la plateforme n'offre ni exécution côté serveur ni accès au système de fichiers.

Widget HTML

Le widget HTML est la façon la plus simple d'ajouter du code personnalisé à votre site. Selon l'endroit où vous le placez, il apparaît sur toutes les pages ou sur une seule. Placé dans le header ou le footer, il s'affiche sur toutes les pages à la fois, car ces deux sections sont communes à tout le site. Placé ailleurs, il n'apparaît que dans le body.

Pour ajouter un widget HTML :

  1. Dans le panneau latéral, cliquez sur Ajouter, puis sur Éléments.
  2. Recherchez HTML, faites glisser le widget dans une colonne ou une ligne de votre site, puis collez-y votre code.

Code personnalisé dans le header

Vous pouvez placer du code dans le header de tout le site ou dans celui d'une page précise.

Remarque : les applications de gestion du consentement ne peuvent pas empêcher un code de s'exécuter avant le consentement lorsqu'il est placé dans le HTML du header. En effet, nous optimisons la structure et l'ordre de chargement du contenu selon les bonnes pratiques de performance : les scripts et les bannières CMP sont placés plus bas dans la page pour accélérer l'affichage du contenu principal. C'est pourquoi, si vous utilisez une application de gestion du consentement, il est conseillé de placer le code en fin de body.

Header de tout le site

Pour placer le code dans le header de tout le site :

  1. Dans le panneau latéral, cliquez sur Plus, puis sur Paramètres.
  2. Cliquez sur HTML DE L'EN-TÊTE.
    • HTML DE L'EN-TÊTE. Ajoutez du contenu dans le champ de la section head.
    • HTML fin du corps. Ajoutez du HTML/JavaScript personnalisé juste avant la balise de fermeture de l'élément <body> de chaque page du site.
  3. Collez votre code, puis enregistrez.

Header d'une seule page

Pour placer le code dans le header d'une seule page :

  1. Dans le panneau latéral, cliquez sur Pages.
  2. Sur la page où vous voulez l'ajouter, cliquez sur l'icône des paramètres.
  3. Cliquez sur SEO.
  4. Faites défiler jusqu'à Code HTML de l'en-tête.
  5. Collez-y votre code, puis enregistrez.

Mon code disparaît quand je le place dans la section head

Il est fréquent que les codes de suivi par pixel disparaissent lorsqu'ils sont placés dans le header. La section head <head> n'accepte pas de code tel que <img>, <iframe> ni d'autres du même type. Elle n'accepte généralement que <link>, <script> et <meta>.

Si un code refuse de s'enregistrer dans la section head, collez-le plutôt dans le champ HTML fin du corps. Pour cela, suivez les étapes de la section « Code personnalisé après la balise body d'ouverture » de cet article.

Code personnalisé après la balise body d'ouverture

Il n'existe pas encore de fonction pour placer du code juste après la balise body d'ouverture. Vous pouvez toutefois le coller dans le champ HTML fin du corps de Paramètres.

Pour coller du code dans le champ HTML fin du corps :

  1. Dans le panneau latéral, cliquez sur Plus, puis sur Paramètres.
  2. Cliquez sur HTML DE L'EN-TÊTE.
  3. Collez votre code dans le champ HTML fin du corps.
  4. Cliquez sur Enregistrer.

Code personnalisé dans les éléments ou les widgets

De nombreux éléments, dont les lignes, les colonnes et les widgets, permettent d'accéder à leur HTML/CSS.

Si vous êtes en mode flex dans le Classic Editor, ou dans l'Editor 2.0 :

  • Vous pouvez modifier le CSS des conteneurs flex (section, colonne, inner column et advanced grid). Dans l'Editor 2.0, vous pouvez aussi modifier le CSS des headers et des footers.
  • Le panneau de design peut ne pas refléter toutes les modifications de code personnalisé, ce qui peut créer des différences de style entre le panneau et les éléments en ligne.

Pour ajouter du code à un élément ou à un widget :

  1. Dans le Classic Editor, faites un clic droit sur votre widget ou élément pour ouvrir le menu contextuel.
  2. En mode flex dans le Classic Editor ou dans l'Editor 2.0, cliquez pour sélectionner le conteneur flex, le header ou le footer.
  3. Cliquez sur Modifier HTML/CSS. En mode flex dans le Classic Editor ou dans l'Editor 2.0, cliquez sur l'icône à trois points du menu flottant, puis sélectionnez Modifier CSS.
  4. Modifiez ou ajoutez le code ici, selon vos besoins.
  5. Cliquez sur Actualiser.

Il faudra peut-être actualiser le navigateur pour voir le changement.

Ajouter un code de suivi à un formulaire de contact

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

  1. Accédez à la page où se trouve votre formulaire de contact.
  2. Cliquez sur le formulaire de contact pour ouvrir ses options.
  3. Cliquez sur Soumission.
  4. Cliquez sur Suivi.
  5. Collez-y votre code de suivi des conversions.

Recommandations pour le code personnalisé

Voici les recommandations à suivre lorsque vous travaillez avec du code personnalisé.

Recommandations générales

  • Pour un code qui doit figurer sur une page, créez une page de test et placez-y le code.
  • L'aperçu utilise le HTTPS, ce qui n'est pas forcément le cas de votre site publié. Cela empêche souvent le code personnalisé de fonctionner.
  • Veillez à rester à l'intérieur des colonnes. Nos sites responsifs reposent sur une structure de lignes et de colonnes : chaque ligne contient des colonnes, qui accueillent le contenu. Lorsque vous ajoutez ou modifiez votre propre HTML, assurez-vous qu'il se trouve dans une colonne.

Résoudre les problèmes de code personnalisé

Si un code personnalisé ajouté à votre site nuit à ses performances ou vous empêche de le modifier, c'est le plus souvent parce qu'il est mal formaté ou non compatible HTTPS. Voici des solutions aux problèmes que vous pouvez rencontrer avec le code personnalisé.

Annuler une modification ou restaurer une version antérieure

Si du code personnalisé a cassé votre site, ou si vous voulez simplement revenir en arrière, annulez vos dernières modifications dans l'éditeur.

Si le problème remonte plus loin que votre historique, ou si l'éditeur ne s'ouvre plus, contactez le support Smoobu. L'équipe peut rétablir une version antérieure de la page pour vous.

Messages d'erreur particuliers

Voici certains messages d'erreur et leur signification :

  • DUPLICATE_ID. Chaque élément doit avoir un identifiant unique.
  • INVALID_ELEMENT_LOCATION. Tout élément doit se trouver dans une colonne, elle-même dans une ligne.
  • BAD_PROPORTION. Les colonnes d'une ligne doivent totaliser 12.
  • INVALID_CLASS_FOR_ELEMENT. Une classe du Créateur de sites Web a été ajoutée à un élément non valide.

Le code ne fonctionne pas

Si un code ne fonctionne pas sur le site, c'est le plus souvent parce qu'il est mal formaté ou non compatible HTTPS.

Si votre code contient des liens (http:// ou //) et que votre site utilise le HTTPS, ou que vous êtes dans l'aperçu, vous devrez les remplacer par https://. En effet, un code non HTTPS ne fonctionne pas sur une connexion chargée en HTTPS (aperçu du site, éditeur, etc.).

Impossible d'ouvrir l'éditeur

Si vous ne parvenez pas à accéder à l'éditeur au premier chargement de votre site, essayez de l'ouvrir sur une autre page en ajoutant un chemin de page différent à la fin du lien de l'éditeur (par exemple /about). Une fois sur place, vous pouvez supprimer puis recréer la page qui pose problème.

Si l'éditeur ne répond pas, vous pouvez aussi forcer son ouverture à l'aide du raccourci clavier de l'inspecteur d'éléments : Command+Option+C sur Mac, Ctrl+Alt+C sur PC.

Charger la version non sécurisée de l'éditeur

Chargez la version non sécurisée de l'éditeur pour charger les scripts qui n'ont pas été intégrés via une connexion sécurisée. Pour cela, ouvrez l'éditeur sur une connexion non sécurisée en ajoutant ?nossl à l'URL de votre éditeur.

Problème de vitesse de page

L'optimisation de la vitesse de page influe sur la façon dont certains scripts s'exécutent. Nous appliquons l'optimisation PageSpeed à la plupart des pages, ce qui peut perturber votre code personnalisé.

Pour savoir si un problème de vitesse affecte votre code personnalisé :

  1. Dupliquez la page qui contient vos scripts.
  2. Remplacez l'URL par « testing_scripts ».
  3. Publiez, puis vérifiez la page sur votre site en ligne.
  4. Si votre code fonctionne sur cette page, contactez le support pour qu'il désactive l'optimisation de la vitesse sur votre site.

Si vous utilisez un script, vous pouvez aussi vous assurer qu'il s'exécute de façon asynchrone. Ce n'est pas garanti, mais cela résout parfois le problème des scripts qui ne s'exécutent pas correctement dans le navigateur.

Pour activer async sur vos scripts, modifiez votre code ainsi :

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

Articles associés

Commentaires

0 commentaire

Cet article n'accepte pas de commentaires.