Code personnalisé¶

Parfois vous avez besoin d'ajouter du code que l'éditeur visuel ne couvre pas -- un traceur d'analytics, une police personnalisée, un framework CSS ou une balise méta. La boîte de dialogue Paramètres inclut un éditeur de code pour la balise <head>, et un composant de code personnalisé vous permet d'intégrer du HTML et du JavaScript arbitraires n'importe où sur la page.

Deux choses à garder en tête :

Le code dans le head s'exécute sur chaque page (niveau site) ou sur une seule page (niveau page). Choisissez la bonne portée pour que les scripts de suivi ne se déclenchent pas là où ils ne devraient pas.
Les blocs de code personnalisé font partie du contenu de la page. Ils vivent à l'intérieur du <body> et s'affichent là où vous les placez sur le canevas.

L'éditeur de head¶

L'éditeur de head est un éditeur de code à l'intérieur de l'onglet Code de la boîte de dialogue Paramètres. Il vous permet d'écrire du HTML qui sera injecté directement dans l'élément <head> de vos pages publiées.

Ouvrir l'éditeur de head¶

Cliquez sur l'icône d'engrenage dans la barre latérale gauche pour ouvrir la boîte de dialogue Paramètres.
Sélectionnez l'onglet Code.
Vous verrez un éditeur de code avec coloration syntaxique et numéros de ligne.
Écrivez votre HTML.
Cliquez sur Appliquer (ou appuyez sur Ctrl+Entrée).

L'onglet Paramètres Code avec un éditeur HTML pour insérer du code personnalisé dans la balise HEAD

Code de head au niveau site vs. au niveau page¶

Lorsque vous ouvrez les Paramètres du site et ajoutez du code dans l'onglet Code, ce code apparaît dans le <head> de chaque page de votre site. Lorsque vous ouvrez les Paramètres de page et ajoutez du code, il ne s'applique qu'à cette seule page.

Les deux sont injectés. Ils ne se remplacent pas mutuellement. Si vous avez du code de head au niveau site et du code de head au niveau page, les deux seront présents dans le HTML publié -- le code du site en premier, puis le code de la page.

Cela signifie que vous pouvez :

Ajouter Google Analytics au niveau du site pour qu'il suive chaque page.
Ajouter une balise canonique spécifique à une page ou une directive noindex sur des pages individuelles sans affecter le reste du site.

Aperçu en direct¶

Lorsque vous appliquez du code de head, l'éditeur l'injecte immédiatement dans l'aperçu du canevas. Si vous ajoutez une feuille de style externe, vous verrez ses effets tout de suite. Si vous ajoutez un script, il s'exécutera dans le cadre de prévisualisation. Cela vous permet de vérifier que votre code fonctionne avant de publier.

Cas d'utilisation courants du code de head¶

Google Fonts¶

Chargez une police depuis Google Fonts en collant la balise <link> dans l'éditeur de head :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Après avoir ajouté cela, la police "Inter" devient disponible dans le menu déroulant font-family du Style Manager. Vous pouvez ensuite l'appliquer à n'importe quel élément.

Astuce : Ajoutez les liens de polices au niveau du site pour que la police soit disponible sur toutes les pages. Si vous ne l'ajoutez que sur une seule page, les éléments utilisant cette police sur d'autres pages se rabattront sur une police par défaut.

Google Tag Manager¶

Ajoutez le snippet du conteneur GTM pour suivre le comportement des visiteurs sur l'ensemble de votre site :

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

Remplacez GTM-XXXX par votre identifiant de conteneur. Ajoutez ceci au niveau du site pour que le suivi fonctionne sur chaque page.

CSS personnalisé¶

Ajoutez un bloc <style> pour définir des styles que l'éditeur visuel ne prend pas en charge ou que vous souhaitez écrire à la main :

<style>
  /* Défilement fluide pour les liens d'ancrage */
  html {
    scroll-behavior: smooth;
  }

  /* Couleur de sélection personnalisée */
  ::selection {
    background-color: #3b82f6;
    color: white;
  }
</style>

Quand utiliser ceci vs. le Style Manager : Utilisez le Style Manager pour les styles spécifiques aux éléments que vous souhaitez gérer visuellement. Utilisez le CSS personnalisé dans le head pour les comportements globaux, les pseudo-éléments, les animations ou tout ce que le Style Manager n'expose pas.

Balises canoniques¶

Indiquez aux moteurs de recherche quelle URL est la version originale d'une page :

<link rel="canonical" href="https://www.example.com/my-page">

Ajoutez ceci au niveau de la page car chaque page a sa propre URL canonique. Consultez SEO pour en savoir plus sur l'importance des balises canoniques.

Balise méta robots¶

Empêchez les moteurs de recherche d'indexer une page spécifique :

<meta name="robots" content="noindex, nofollow">

Ajoutez ceci au niveau de la page sur les pages brouillons, les pages de remerciement ou les pages d'administration. Ne l'ajoutez pas au niveau du site sauf si vous souhaitez que votre site entier soit masqué des moteurs de recherche.

Frameworks CSS externes¶

Chargez un framework CSS comme Normalize.css ou une bibliothèque utilitaire :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

Ajoutez au niveau du site si vous souhaitez le framework sur chaque page.

Balises de vérification¶

De nombreux services (Google Search Console, Bing Webmaster Tools, Pinterest) vous demandent de vérifier la propriété du site en ajoutant une balise méta :

<meta name="google-site-verification" content="your-verification-code">

Ajoutez ceci au niveau du site. Il n'a besoin d'être que sur une seule page (généralement la page d'accueil), mais l'avoir sur toutes les pages ne cause aucun problème.

Blocs de code personnalisé¶

L'éditeur de head est pour le code dans le <head>. Mais parfois vous avez besoin d'intégrer du HTML, du CSS ou du JavaScript à l'intérieur du corps de la page -- un widget de formulaire de contact, un lecteur vidéo embarqué, un bouton de chat en direct ou un composant interactif.

Pour cela, utilisez le composant Code personnalisé. Il vous permet de placer un bloc de HTML arbitraire n'importe où sur votre canevas.

Ajouter un bloc de code personnalisé¶

Ouvrez le panneau Composants (l'icône plus ou le panneau des blocs dans la barre latérale gauche).
Trouvez le bloc Code personnalisé.
Glissez-le sur le canevas où vous le souhaitez.
Double-cliquez sur le bloc pour ouvrir l'éditeur de code.
Écrivez votre HTML, CSS ou JavaScript.
Enregistrez et fermez l'éditeur.

Le bloc affiche votre code dans l'aperçu. Si votre code produit une sortie visible (un formulaire, un widget, un graphique), vous le verrez directement sur le canevas.

Cas d'utilisation des blocs de code personnalisé¶

Intégrer un formulaire. Collez le code d'intégration d'un service de formulaires (Typeform, Google Forms, Tally, etc.) dans un bloc de code personnalisé. Le formulaire apparaît sur votre page là où vous avez placé le bloc.

Ajouter un widget interactif. Les widgets de chat, les outils de prise de rendez-vous et les flux de réseaux sociaux fournissent souvent des codes d'intégration. Collez-les dans un bloc de code personnalisé.

Composants alimentés par JavaScript. Si vous avez besoin d'un composant qui nécessite du JavaScript -- un diaporama, un accordéon, un compteur dynamique -- écrivez-le dans un bloc de code personnalisé. Le JavaScript s'exécute dans le navigateur lorsque la page se charge.

Cartes embarquées. Google Maps et OpenStreetMap fournissent des codes d'intégration <iframe> que vous pouvez coller dans un bloc de code personnalisé.

Blocs de code personnalisé vs. code de head¶

	Éditeur de head (onglet Code)	Bloc de code personnalisé
Emplacement dans le HTML	À l'intérieur de `<head>`	À l'intérieur de `<body>`, là où vous le placez
Portée	Tout le site ou par page	Uniquement sur la page où vous l'ajoutez
Contenu typique	Balises méta, feuilles de style, analytics, polices	Formulaires, widgets, intégrations, composants interactifs
Visible sur le canevas	Non (le contenu du head est invisible)	Oui (s'affiche sur place)
Comment l'ajouter	Boîte de dialogue Paramètres > onglet Code	Glisser le bloc Code personnalisé depuis le panneau Composants

Sécurité et performance¶

Scripts dans le head¶

Chaque script que vous ajoutez au head s'exécute avant le rendu de la page. Trop de scripts ralentissent votre page. Limitez les scripts du head à l'essentiel : analytics, polices et balises méta critiques.

Si un script n'a pas besoin de s'exécuter avant le chargement de la page, placez-le dans un bloc de code personnalisé en bas de la page, ou ajoutez l'attribut async ou defer :

<script src="https://example.com/widget.js" async></script>

async charge le script en parallèle et l'exécute dès qu'il est prêt. defer le charge en parallèle mais attend que la page soit entièrement analysée. Les deux empêchent le script de bloquer le rendu de la page.

Code tiers¶

Chaque script tiers (analytics, widgets de chat, traceurs publicitaires) est une source potentielle de problèmes de performance et de confidentialité. N'ajoutez que ce dont vous avez réellement besoin. Supprimez les scripts des services que vous n'utilisez plus.

Tests¶

Après avoir ajouté du code personnalisé, faites toujours :

Vérifiez l'aperçu de l'éditeur pour confirmer que cela fonctionne.
Publiez et testez sur le site en ligne.
Vérifiez la console du navigateur (F12 > Console) pour les erreurs JavaScript.
Testez sur mobile -- certains codes d'intégration ne se redimensionnent pas bien.

Erreurs courantes¶

Ajouter un <script> dans le head alors qu'il devrait être dans le body. Analytics et polices appartiennent au head. Les widgets interactifs et les codes d'intégration appartiennent aux blocs de code personnalisé dans le body.
Oublier de définir la bonne portée. Le code de head au niveau du site s'exécute sur chaque page. Si vous ajoutez une balise canonique spécifique à une page au niveau du site, chaque page obtient la même URL canonique -- ce qui est incorrect.
Coller du code avec des guillemets typographiques. Si vous copiez du code depuis un article de blog ou un PDF, les guillemets typographiques (\u201c\u201d) peuvent remplacer les guillemets droits (""). Cela casse le HTML. Copiez toujours depuis la source originale ou un éditeur de code.
Ne pas tester après publication. L'aperçu de l'éditeur est proche du résultat publié, mais pas identique. Vérifiez toujours sur le site en ligne.
Charger trop de scripts externes. Chaque script ajoute une requête réseau et un temps d'analyse. Cinq scripts d'analytics et de suivi peuvent ajouter des secondes au chargement de votre page. Auditez régulièrement et supprimez ce que vous n'utilisez pas.

Avancé : ordre d'exécution et interaction entre le code de head du site et de la page

Ordre d'injection¶

Lorsqu'une page est publiée, le code de head est injecté dans cet ordre :

Balises générées standard (titre, description, favicon, balises Open Graph)
Code de head personnalisé au niveau du site
Code de head personnalisé au niveau de la page

Cela signifie que le code au niveau de la page peut surcharger les styles au niveau du site (les règles CSS ultérieures l'emportent) et que les scripts au niveau de la page s'exécutent après les scripts au niveau du site.

Surcharger les styles au niveau du site¶

Si votre code de head au niveau du site ajoute une feuille de style et que vous souhaitez surcharger un style spécifique sur une page, ajoutez un bloc <style> dans le code de head de cette page avec un sélecteur plus spécifique ou le même sélecteur (il l'emporte car il vient plus tard dans le document).

Éviter les scripts en double¶

Si vous chargez le même script au niveau du site et au niveau de la page, il s'exécutera deux fois. Cela peut causer des erreurs ou un double comptage dans les analytics. Utilisez le niveau site pour les scripts qui doivent s'exécuter partout. Utilisez le niveau page uniquement pour les scripts uniques à cette page.

Politique de sécurité du contenu¶

Si votre hébergeur applique une politique de sécurité du contenu (CSP), les scripts et feuilles de style externes peuvent être bloqués. Vérifiez la console de votre navigateur pour les erreurs CSP si le code tiers ne se charge pas. La solution dépend de votre configuration d'hébergement et sort du cadre de la boîte de dialogue Paramètres.

Quiz¶

Q1 : Vous souhaitez ajouter le suivi Google Analytics à l'ensemble de votre site. Où placez-vous le code de suivi ?

A) Dans un bloc de Code personnalisé sur la page d'accueil
B) Dans l'onglet Code des Paramètres du site
C) Dans l'onglet Code des Paramètres de page de chaque page

Réponse

B) Dans l'onglet Code des Paramètres du site. Le code de head au niveau du site s'exécute sur chaque page, ce qui est ce que vous souhaitez pour les analytics. L'option A ne suit que la page d'accueil. L'option C fonctionne mais nécessite d'ajouter le code sur chaque page manuellement.

Q2 : Vous avez collé un code d'intégration de formulaire de contact dans l'éditeur de head, mais rien n'apparaît sur la page. Que s'est-il passé ?

A) Le code d'intégration est cassé
B) L'éditeur de head injecte le code dans le <head>, qui est invisible -- les codes d'intégration de formulaire doivent aller dans un bloc de Code personnalisé dans le body
C) Vous devez ajouter du CSS pour le rendre visible

Réponse

B) L'éditeur de head est pour le contenu invisible du <head>. Les formulaires et autres éléments visibles appartiennent à un bloc de Code personnalisé, qui s'affiche à l'intérieur du corps de la page. Le <head> est pour les balises méta, les feuilles de style et les scripts -- pas pour le HTML visible.

Q3 : Vous avez ajouté un lien Google Font dans l'éditeur de head des Paramètres d'une seule page. Sur les autres pages, le texte utilisant cette police s'affiche mal. Pourquoi ?

A) Google Fonts a une limite sur le nombre de pages pouvant utiliser la police
B) La police n'est chargée que sur la page où vous avez ajouté le lien -- les autres pages ne l'ont pas
C) Vous devez vider le cache du navigateur

Réponse

B) La police n'est chargée que sur la page où vous avez ajouté le lien. Ajoutez les liens de polices au niveau du site pour qu'elles soient disponibles sur chaque page. Le code de head au niveau de la page ne s'applique qu'à cette page spécifique.

Q4 : Votre page se charge lentement après avoir ajouté plusieurs scripts tiers. Que devriez-vous vérifier en premier ?

A) Si certains scripts peuvent utiliser l'attribut async ou defer
B) Si les scripts sont dans le mauvais ordre
C) Si les scripts doivent être minifiés

Réponse

A) Si certains scripts peuvent utiliser async ou defer. Ces attributs empêchent les scripts de bloquer le rendu de la page. Vérifiez également si vous avez encore besoin de tous -- supprimer les scripts inutiles est la meilleure amélioration de performance.

Q5 : Vous souhaitez empêcher votre page "Merci" d'apparaître dans les résultats de recherche. Qu'ajoutez-vous, et où ?

A) <meta name="robots" content="noindex, nofollow"> dans l'onglet Code des Paramètres de cette page
B) <meta name="robots" content="noindex, nofollow"> dans l'onglet Code des Paramètres du site
C) Supprimer le titre de la page dans les paramètres SEO

Réponse

A) Ajoutez la balise méta robots dans l'onglet Code des Paramètres de cette page. Cela masque uniquement cette page des moteurs de recherche. L'ajouter au niveau du site masquerait votre site entier. Supprimer le titre n'empêche pas l'indexation.

Éditer cette page sur GitLab