Ajouter des liens d'ancrage au contenu de l'email avec du HTML

Description

Un lien d'ancrage amène le lecteur à un autre endroit du même email, par exemple d'une table des matières en haut vers une section plus bas. Cet article explique comment créer la destination avec un bloc HTML, puis comment y diriger un lien, un bouton ou un élément de menu.

Cette méthode fonctionne dans une newsletter normale créée avec l'éditeur glisser-déposer. Vous n'avez pas besoin d'écrire votre email en HTML : vous ajoutez seulement un petit bloc HTML pour chaque destination.

Pourquoi c'est important

Les liens d'ancrage rendent les longues newsletters et les emails de type récapitulatif plus faciles à lire. Les lecteurs vont directement aux sections qui les intéressent : ils font moins défiler et s'intéressent davantage à votre contenu. Les liens d'ancrage sont utiles pour les emails qui présentent plusieurs sujets, des produits ou un programme d'événements.

Utilisez l'attribut id sur une balise <a> vide, par exemple <a id="section1"></a>. N'utilisez pas l'attribut name : la plateforme le retire à l'envoi, et le lien ne mène alors nulle part. Une <div> avec un id ne fonctionne pas non plus.

Gmail (sur le web et dans l'application) ne prend pas en charge les liens vers une section du même email : le lien ne fait rien. Ils fonctionnent dans la plupart des autres messageries, comme Apple Mail et Outlook. Si beaucoup de vos abonnés utilisent Gmail, préférez des liens vers des pages web.

Instructions étape par étape

Ajoutez un bloc HTML
- Dans l'éditeur d'emails, ouvrez l'onglet Contenu.
- Glissez le bloc HTML à l'endroit où le lecteur doit arriver, juste au-dessus de la section visée.
- Le reste de votre email ne change pas : vos textes, images et boutons restent des blocs normaux.
Ajoutez le repère de destination
- Sélectionnez le bloc HTML. Son code s'affiche à droite, dans le panneau Propriétés HTML.
- Effacez le code d'exemple du bloc et collez ce code à la place :
```
Code
<a id="section1"></a>
```
Cette balise vide marque la destination. Le lecteur ne la voit pas dans l'email.
Créez le lien vers la destination
- Lien dans un texte : sélectionnez le texte, puis cliquez sur l'icône de lien (Insérer/modifier lien) dans la barre d'outils du texte. La fenêtre Insert link s'ouvre en anglais : dans le champ URL, tapez #section1, puis cliquez sur Save.
- Bouton : sélectionnez le bouton. Dans ses propriétés, sous Action, tapez #section1 dans le champ URL.
- Élément de menu : sélectionnez le menu. Sous Configurer les éléments de menu, activez Plus d'options pour l'élément, puis tapez #section1 dans le champ URL. Chaque champ d'un élément de menu est expliqué dans Utiliser le bloc Menu.
L'adresse est le signe # suivi de l'id exact de la destination.
Enregistrez et testez
- Enregistrez votre email.
- Envoyez-vous un email de test et cliquez sur chaque lien d'ancrage pour vérifier qu'il mène au bon endroit.

Règles pour les noms d'ancrage

Donnez à chaque destination un id unique dans l'email.
N'utilisez ni espace ni accent dans l'id. Utilisez des lettres, des chiffres et des traits d'union, par exemple section1 ou menu-desserts.
L'adresse du lien doit correspondre exactement à l'id, précédée du signe # : id="section1" et #section1.

Exemple de code HTML

Voici un exemple avec un lien en haut de l'email et sa destination plus bas :

Code
<p><a href="#section1">Aller à la section 1</a></p>

<!-- ... autre contenu ... -->

<a id="section1"></a>
<h2>Section 1</h2>
<p>Contenu de la section 1.</p>

Quand le lecteur clique sur Aller à la section 1, l'email défile jusqu'à la balise <a id="section1"></a>, juste au-dessus du titre de la section.

Le suivi des clics ne modifie pas les liens d'ancrage. Ils restent #section1 dans l'email envoyé.

Dépannage

Le lien ne mène nulle part

N'utilisez pas l'attribut name (<a name="section1">). La plateforme le retire à l'envoi. Utilisez plutôt id : <a id="section1"></a>.
Une <div> avec un id (<div id="section1">) ne fonctionne pas comme destination. Utilisez une balise <a> vide avec un id.
Vérifiez que l'id ne contient ni espace ni accent.
Vérifiez que l'adresse du lien correspond exactement à l'id, majuscules et minuscules comprises.

Le lien mène au mauvais endroit

Vérifiez que chaque id n'est utilisé qu'une seule fois dans l'email.
Placez la balise de destination juste avant le contenu que le lecteur doit voir.

Compatibilité des clients de messagerie

Gmail (sur le web et dans l'application) ne prend pas en charge les liens d'ancrage : le lien ne fait rien. Ils fonctionnent dans la plupart des autres messageries, comme Apple Mail et Outlook.
Testez dans les applications de messagerie que votre public utilise le plus.
Dans un très long email, ajoutez aussi un court résumé en haut pour que tous les lecteurs trouvent l'information.

Le code HTML ne s'affiche pas

Utilisez le bloc HTML, et non un bloc de texte, pour la balise de destination.
Vérifiez que chaque balise est bien fermée.