Centre de préférences des e-mails via API

La mise en place d’un centre de préférences offre à vos utilisateurs un point d’accès unique pour modifier et gérer leurs préférences de notification pour votre envoi de messages par e-mail. Cet article décrit les étapes pour créer un centre de préférences généré par API, mais vous pouvez également créer un centre de préférences à l’aide de l’éditeur par glisser-déposer.

Dans le tableau de bord de Braze, accédez à Audience > Email Preference Centers.

C’est ici que vous pouvez gérer et consulter chaque groupe d’abonnement. Chaque groupe d’abonnement que vous créez est ajouté à cette liste de centres de préférences. Vous pouvez créer plusieurs centres de préférences.

Important

Le centre de préférences est conçu pour être utilisé dans le canal e-mail de Braze. Les liens du centre de préférences sont dynamiques et basés sur chaque utilisateur ; ils ne peuvent pas être hébergés en externe.

Créer un centre de préférences avec l’API

En utilisant les endpoints Braze du centre de préférences, vous pouvez créer un centre de préférences, un site web hébergé par Braze, qui peut afficher l’état d’abonnement et les statuts des groupes d’abonnement de vos utilisateurs. En utilisant HTML et CSS, votre équipe de développement peut créer le centre de préférences afin que le style de la page corresponde à vos directives de marque.

L’utilisation de Liquid vous permet de récupérer les noms de vos groupes d’abonnement ainsi que le statut de chaque utilisateur. De cette façon, Braze stocke et récupère ces données lorsque la page est chargée.

Conditions préalables

Étape 1 : Utiliser l’endpoint de création du centre de préférences

Commençons par créer un centre de préférences à l’aide de l’endpoint de création du centre de préférences. Pour personnaliser votre centre de préférences, vous pouvez inclure du HTML conforme à votre image de marque dans le champ preference_center_page_html et le champ confirmation_page_html.

L’endpoint de génération d’URL du centre de préférences vous permet de récupérer l’URL du centre de préférences pour un utilisateur spécifique en dehors d’un e-mail envoyé via Braze.

Remarque

Braze affiche confirmation_page_html dans une iframe qui utilise une URL data:. Les navigateurs traitent les URL data: comme des origines opaques. Par conséquent, les scripts dans cette iframe ne peuvent pas charger de ressources externes supplémentaires, et la navigation dans la fenêtre parente ou la communication entre les cadres depuis cette page échouera.

À la place, vous pouvez créer un lien vers du contenu externe, comme une URL de sondage hébergée, au lieu d’intégrer des scripts. Si vous devez intégrer un outil tiers et que le fournisseur le permet, utilisez un <iframe title="Description du contenu intégré" src="https://example.com/..."> pointant vers l’URL HTTPS hébergée de l’outil.

Étape 2 : Inclure dans votre campagne e-mail

Important

Certains navigateurs, comme les applications Naver Android et iOS, ne prennent pas en charge le centre de préférences de Braze. Si vous pensez que certains de vos utilisateurs utilisent ces navigateurs, envisagez de leur proposer d’autres méthodes pour gérer leurs préférences d’e-mail.

Pour placer un lien vers le centre de préférences dans vos e-mails, utilisez l’étiquette Liquid suivante à l’endroit souhaité dans votre e-mail, de la même manière que vous inséreriez des URL de désabonnement.

1
{{preference_center.${kitchenerie_preference_center_example}}}

Vous pouvez également utiliser une combinaison de HTML incluant du Liquid. Par exemple, vous pouvez coller ce qui suit comme URL dans l’éditeur HTML ou l’éditeur par glisser-déposer. Cela affiche la disposition de base du centre de préférences qui répertorie automatiquement tous les groupes d’abonnement e-mail. Si vous utilisez l’aliasing de lien, ajoutez un point d’interrogation final (?) après l’étiquette Liquid afin que Braze puisse ajouter les paramètres de suivi.

1
<a href="{{preference_center.${kitchenerie_preference_center_example}}}?">Edit your preferences</a>

Le centre de préférences dispose d’une case à cocher permettant à vos utilisateurs de se désabonner de tous les e-mails.

Tester les centres de préférences

Les liens du centre de préférences sont générés pour chaque utilisateur au moment de l’envoi et sont liés à l’envoi d’une Campaign ou d’un Canvas en direct. Les envois de test et les prévisualisations de l’éditeur ne prennent pas en charge l’enregistrement des modifications d’abonnement. Il s’agit du comportement attendu.

Ce que vous verrez

• Envois de test : Les étiquettes Liquid du centre de préférences peuvent ne pas se résoudre en un lien valide. Si la page se charge, le bouton Enregistrer les préférences est désactivé et les modifications d’abonnement ne sont pas enregistrées.
• Onglet Prévisualisation de l’éditeur par glisser-déposer : Vous pouvez prévisualiser la mise en page et le style, mais vous ne pouvez pas tester l’enregistrement des préférences depuis l’éditeur.

Comment tester de bout en bout

Pour vérifier que les liens et les boutons du centre de préférences fonctionnent avant un lancement complet :

1. Créez une Campaign ou une étape d’e-mail Canvas qui inclut votre étiquette Liquid du centre de préférences.
2. Ciblez uniquement vos utilisateurs test ou un petit segment interne.
3. Lancez le message et ouvrez l’e-mail depuis une vraie boîte de réception (pas Envoyer le test).
4. Sélectionnez le lien du centre de préférences, mettez à jour les groupes d’abonnement et sélectionnez Enregistrer les préférences.
5. Confirmez les modifications sur le profil de l’utilisateur dans le tableau de bord de Braze.

Comme alternative pour les centres de préférences créés via l’API, utilisez l’endpoint Générer l’URL du centre de préférences pour récupérer une URL fonctionnelle pour un utilisateur spécifique en dehors d’un envoi de test.

Pour les autres limitations des envois de test, consultez la section Envoyer des messages test.

Prévisualisation, envoi de test et envoi en direct

Modifier un centre de préférences

Vous pouvez modifier et mettre à jour votre centre de préférences en utilisant l’endpoint de mise à jour du centre de préférences.

Identifier les centres de préférences et leurs détails

Pour identifier vos centres de préférences, utilisez l’endpoint d’affichage des détails du centre de préférences pour renvoyer des informations associées telles que l’horodatage de la dernière mise à jour, l’ID du centre de préférences, et plus encore.

Personnaliser un centre de préférences

Braze gère les mises à jour de l’état d’abonnement depuis le centre de préférences, ce qui maintient le centre de préférences synchronisé. Cependant, vous pouvez également créer et héberger votre propre centre de préférences en utilisant les API des groupes d’abonnement avec les options suivantes.

Option 1 : Lien avec des paramètres de chaîne de requête

Utilisez des paires champ-valeur de chaîne de requête dans le corps de l’URL pour transmettre l’ID utilisateur et la catégorie d’e-mail à la page afin que les utilisateurs n’aient qu’à confirmer leur choix de désabonnement. Cette option convient à ceux qui stockent un identifiant utilisateur sous forme hachée et qui ne disposent pas déjà d’un centre d’abonnement.

Pour cette option, chaque catégorie d’e-mail nécessite son propre lien de désabonnement spécifique :
http://mycompany.com/query-string-form-fill?field_id=Alex&field_category=offers

Conseil

Il est également possible de hacher l’ID externe de l’utilisateur au moment de l’envoi à l’aide d’un filtre Liquid. Cela convertira le user_id en une valeur de hachage MD5, par exemple :

1
2
{% assign my_string = ${user_id} | md5 %}
My encoded string is: {{my_string}}

Option 2 : Authentifier avec un jeton web JSON

Utilisez un jeton web JSON pour authentifier les utilisateurs sur une partie de votre serveur web (par exemple, les préférences de compte) qui se trouve normalement derrière une couche d’authentification telle qu’un identifiant et un mot de passe.

Cette approche ne nécessite pas de paires de valeurs de chaîne de requête intégrées dans l’URL, car celles-ci peuvent être transmises dans le payload du jeton web JSON, par exemple :

1
2
3
4
5
{
    "user_id": "1234567890",
    "name": "Alex Smith",
    "category": "offers"
}

Foire aux questions

Pourquoi mon centre de préférences ne fonctionne-t-il pas dans un envoi de test ?

Les liens du centre de préférences nécessitent un contexte d’envoi réel. Les envois de test ne génèrent pas d’URL de centre de préférences valides, et le bouton Enregistrer les préférences est désactivé si la page se charge. Il s’agit du comportement attendu. Pour tester de bout en bout, lancez une campagne ou une étape Canvas vers un utilisateur test ou un petit segment interne, ou utilisez l’endpoint de génération d’URL du centre de préférences. Pour plus de détails, consultez Tester les centres de préférences.

Je n’ai pas créé de centre de préférences. Pourquoi est-ce que je vois « PreferenceCenterBrazeDefault » sur mon tableau de bord ?

Cela est utilisé pour afficher le centre de préférences lorsque le Liquid hérité ${preference_center_url} est utilisé, ce qui signifie que les étapes Canvas ou les modèles qui font référence à ${preference_center_url} ou preference_center.${PreferenceCenterBrazeDefault} ne fonctionneront pas. Cela s’applique également aux messages précédemment envoyés qui incluaient le Liquid hérité ou « PreferenceCenterBrazeDefault » dans le message.

Si vous faites référence à ${preference_center_url} dans un nouveau message, un centre de préférences nommé « PreferenceCenterBrazeDefault » sera créé à nouveau.

Les centres de préférences prennent-ils en charge plusieurs langues ?

Non. Cependant, vous pouvez tirer parti de Liquid lors de la rédaction du HTML pour les pages personnalisées d’abonnement et de désabonnement. Si vous utilisez des liens dynamiques pour gérer les désabonnements, il s’agit d’un lien unique.

Par exemple, si vous suivez le taux de désabonnement des utilisateurs hispanophones, vous devrez soit utiliser des campagnes distinctes, soit exploiter les analyses autour de Currents (comme vérifier quand un utilisateur se désabonne et consulter la langue préférée de cet utilisateur).

Autre exemple : pour suivre les taux de désabonnement des utilisateurs hispanophones, vous pourriez ajouter une chaîne de paramètre de requête comme ?Spanish=true à l’URL de désabonnement si la langue de l’utilisateur est l’espagnol, et utiliser un lien de désabonnement classique dans le cas contraire :

1
2
3
4
{% if ${language} == 'spanish' %} "${unsubscribe_url}?spanish=true"
{% else %}
${unsubscribe_url}
{% endif %}

Ensuite, via Currents, vous pourriez identifier quels utilisateurs parlent espagnol et combien d’événements de clic il y a eu pour ce lien de désabonnement.

Les liens de désabonnement et les centres de préférences des e-mails sont-ils tous deux requis pour l’envoi ?

Non. Si vous voyez le message « Your Email Body does not include an unsubscribe link » lors de la composition d’une campagne e-mail, cet avertissement est attendu si votre lien de désabonnement se trouve dans un bloc de contenu.

Comment mettre à jour l’icône par défaut du navigateur ?

Par défaut, l’icône à côté du nom de l’onglet du navigateur (favicon) utilise le logo Braze. Pour ajouter un favicon personnalisé, vous le définissez via l’attribut links-tags dans votre appel API de création ou de mise à jour du centre de préférences. Braze injecte ensuite la balise <link rel="icon" ...> dans la page hébergée pour vous.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "name": "MyPreferenceCenter",
  "preference_center_title": "Email Preferences",
  "preference_center_page_html": "<!doctype html> ...",
  "confirmation_page_html": "<!doctype html> ...",
  "state": "active",
  "options": {
    "links-tags": [
      {
        "rel": "icon",
        "type": "image/png",
        "sizes": "32x32",
        "href": "https://yourcdn.com/path/to/favicon-32x32.png"
      },
      {
        "rel": "shortcut icon",
        "type": "image/x-icon",
        "href": "https://yourcdn.com/path/to/favicon.ico"
      },
      {
        "rel": "apple-touch-icon",
        "sizes": "180x180",
        "href": "https://yourcdn.com/path/to/apple-touch-icon.png"
      }
    ]
  }
}