Comment ajouter un code personnalisé à mes landing pages ?
Vous pouvez ajouter votre propre code HTML, formatage CSS et JavaScript à vos landing pages en utilisant l’élément de code personnalisé.
Voici quelques éléments à garder à l’esprit lorsque vous travaillez avec du code personnalisé :
- Vous pouvez ajouter du code personnalisé dans la section <body> ou <head> de votre landing page. Si vous utilisez un code tiers, assurez-vous de vérifier les informations concernant son emplacement auprès de son fournisseur.
- Pour être conforme au RGPD, veillez à informer vos prospects et visiteurs si vous utilisez des formulaires tiers ou du code impliquant des outils de heat-mapping ou de suivi.
- L’ajout de plusieurs codes de suivi, widgets, etc., peut ralentir votre landing page. De plus, un contenu trop chargé peut amener les visiteurs à quitter la page rapidement.
- Lorsque vous travaillez dans l’éditeur de landing page, vous ne verrez que le champ réservé. Le script ne fonctionne qu’en mode aperçu et sur la page publiée. Il est donc recommandé d’inspecter la page immédiatement après sa publication pour vérifier son bon fonctionnement. Il est préférable de ne pas partager le lien de la page avant d’avoir vérifié sa qualité.
- Il est également conseillé de vérifier si la page contenant le code s’affiche correctement dans tous les navigateurs web, surtout si vous modifiez le CSS.
- Notre équipe Réussite Client peut vous fournir une assistance pour les fonctionnalités standard disponibles dans l’éditeur. Nous ne pouvons pas offrir d’assistance ni garantir le bon fonctionnement des scripts tiers.
Ajouter un code personnalisé dans le corps de la landing page
La section du corps d’une landing page est la zone principale où le contenu principal est affiché, comme le texte, les images, les vidéos et les éléments interactifs tels que les formulaires d’inscription. Elle se situe entre l’en-tête et le pied de page, servant d’espace central pour délivrer des informations et engager les visiteurs.
Pour ajouter un code personnalisé dans le corps de votre landing page :
- Dans l’éditeur de landing page, cliquez sur le bouton Ajouter des éléments.
- Faites glisser et déposez l’élément Code personnalisé dans le contenu de votre page. Notez que l’éditeur mettra en surbrillance les zones où vous pouvez le déposer.
- Cliquez à l’intérieur de l’objet Code personnalisé pour ouvrir la barre d’outils et saisissez votre code dans l’éditeur à droite.
Il y a trois types de code que vous pouvez utiliser dans la section du corps :
- HTML – formatage HTML standard, par exemple :
<p> </p> - CSS – placez votre code CSS entre les tags de style :
<style> </style> - JavaScript – placez votre code JS entre les tags de script :
<script> </script>
Si vous souhaitez utiliser le formatage Less ou Sass, vous devez d’abord le compiler en CSS, puis le placer entre les tags de style :<style> </style>
Vous pouvez également définir des options supplémentaires pour votre élément de code personnalisé :
- Ajouter des noms de classes supplémentaires – activez cette option pour ajouter des noms de classes au conteneur de l’élément, afin de pouvoir le styliser selon vos besoins.
- Positionnement absolu – activez cette option pour placer le code personnalisé n’importe où sur votre landing page. Nous recommandons d’utiliser cette option uniquement si vous avez un design particulier qui ne peut pas être créé autrement. L’utilisation d’objets avec un positionnement absolu peut rendre votre page moins responsive sur les appareils mobiles. Vous pouvez trouver plus d’informations sur cette fonctionnalité ici.
- Masquer sur les appareils mobiles – activez cette option pour masquer le contenu du code personnalisé lorsque votre page est ouverte sur un appareil mobile.
Ajouter un code personnalisé dans la section de votre landing page
La section <head> d’une landing page contient des métadonnées et des informations sur la page, telles que son titre, l’encodage des caractères, les feuilles de style liées, les scripts et les balises liées au SEO. Elle n’affiche pas directement de contenu sur la page, mais fournit des instructions essentielles pour les navigateurs et les moteurs de recherche.
Pour ajouter un code personnalisé dans la section <head> de votre landing page :
- Dans l’éditeur de landing page, cliquez sur le bouton Gestion des pages.
- Survolez le bouton d’action à côté de la home page et cliquez sur Paramètres.
- Dans la fenêtre des paramètres de la page, allez dans l’onglet élément <head> et collez votre propre script ou celui d’un tiers à cet endroit.
Remarque : les modifications sont enregistrées automatiquement lorsque vous cliquez en dehors de la zone de texte.
Utilisez des tags pour nous indiquer comment le code doit être rendu.
- Pour le HTML, utilisez des tags HTML, comme :
<h2> </h2> - Pour le CSS, entourez le code avec des tags
<style> </style> - Pour le JavaScript, entourez le code avec des tags
<script> </script>
Étapes pour anciennes landing pages
Vous pouvez ajouter un code personnalisé (HTML, CSS et JavaScript) à votre landing page en utilisant l’espace réservé pour le code personnalisé dans l’éditeur de landing pages. Utilisez cette option chaque fois que vous souhaitez ajouter des outils et widgets qui ne sont pas inclus dans l’éditeur.
Le code est ajouté aux versions de bureau et mobile de votre landing page. Si vous souhaitez effectuer un test A/B sur votre landing page, assurez-vous d’ajouter l’espace réservé à chaque variante. Vous pouvez également l’ajouter à une page de remerciement.
Vous pouvez intégrer le code personnalisé dans n’importe quel modèle, qu’il soit nouveau ou existant, directement dans l’éditeur. Voici comment y accéder :
1. Accédez à Landing pages et effectuez l’une des actions suivantes :
- Cliquez sur le bouton Créer une landing page pour créer une nouvelle page.
- Sélectionnez Modifier la page dans le menu Actions à côté du nom de la page.
2. Double-cliquez sur l’icône Code personnalisé pour ajouter l’espace réservé au template.
L’espace réservé apparaît dans le coin supérieur gauche de la section affichée.
Lorsque vous double-cliquez sur l’icône, une fenêtre modale s’ouvre automatiquement, vous permettant d’entrer le code.
3. (Facultatif) Faites glisser l’espace réservé si vous souhaitez que celui-ci apparaisse à un endroit spécifique de la page. Double-cliquez ensuite sur l’espace réservé pour ouvrir une fenêtre modale où vous pouvez entrer le code.
4. Collez ou tapez le code. Assurez-vous d’enrouler vos scripts dans des balises <script> (pour JavaScript). Lorsque vous ajoutez plusieurs extraits de code, collez-les les uns sous les autres.
5. (Facultatif) Si vous effectuez un test A/B, répétez les étapes 2 à 4 pour chaque variante de la page.
6. Lorsque vous créez une nouvelle page, cliquez sur l’icône du téléphone portable pour générer une version mobile-friendly de votre page. Si vous modifiez une page existante, cliquez dessus pour vérifier si vous approuvez les modifications.
7. (Facultatif) Cliquez sur Aperçu pour vérifier si le code affiche correctement les éléments que vous avez ajoutés et qui doivent être visibles pour vos visiteurs.
8. Enregistrez les modifications ou publiez la landing page.
9. Affichez la landing page publiée pour vérifier qu’elle s’affiche correctement.