Objectif de cet article
Apprenez à activer et à utiliser les pages hébergées de Klaviyo, qui vous permettent de coder vos propres pages de préférences, d’abonnement et de désabonnement.
Cet article s’adresse aux développeurs. Klaviyo ne propose pas actuellement de services d’aide à la création ni d’assistance au dépannage pour le code personnalisé. Pour en savoir plus sur nos pages de consentement intégrées, consultez notre article sur les notions de base à connaître au sujet des pages de consentement.
Avant de commencer
Avant de configurer une page hébergée, vous devez activer cette fonctionnalité :
- Accédez à Paramètres > Autre.
- Sélectionnez Pages de consentement dans la liste déroulante.
- Sous Pages hébergées personnalisées, activez l’option Utiliser un domaine dédié personnalisé pour les pages hébergées.
Notez que seuls les comptes disposant d’un abonnement payant et ayant fait l’objet d’une vérification ont accès à ce paramètre.
Créer une page de consentement personnalisée
- Accédez à Paramètres > Autre.
- Cliquez sur Pages hébergées.
- À côté de Pages, cliquez sur le symbole + pour créer une page.
- Donnez-lui un nom (par exemple, unsubscribe.tmpl). Vous pourrez l’utiliser pour n’importe laquelle de vos pages de consentement, mais vous pouvez également créer plusieurs pages si vous le souhaitez.
Les noms des pages hébergées ne peuvent pas contenir d’espaces, car cela entraînerait une erreur. Utilisez des traits de soulignement à la place.
- Concevez une page HTML qui contient les champs et les fonctionnalités de votre choix. Voici quelques exemples de champs pouvant être insérés dans une page de consentement personnalisée :
- Choix de la fréquence des e-mails :
- Une option pour se désabonner
- Une option pour recevoir tous les e-mails
- Des options de fréquence pour les newsletters quotidiennes, hebdomadaires, mensuelles, etc.
- Des informations qui peuvent être utilisées pour le ciblage et la segmentation :
- Une case à cocher pour indiquer si l’utilisateur souhaite ou non recevoir des offres spéciales
- Une case à cocher pour indiquer si l’utilisateur souhaite ou non recevoir des annonces de nouveaux produits
- Une case à cocher pour indiquer si l’utilisateur souhaite ou non recevoir des annonces de publication sur le blog
- Autres listes auxquelles l’utilisateur est susceptible de s’inscrire
- Choix de la fréquence des e-mails :
Exemple de code HTML pour une page de consentement
Vous pouvez utiliser ce code sur votre page unsubscribe.tmpl pour obtenir une page de consentement entièrement fonctionnelle avec des préférences en matière de type d’e-mails et de fréquence d’envoi :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
.header h1 {
margin: 10px 0;
}
.required-fields {
text-align: right;
}
.required-fields span {
color: #a94442;
font-weight: bold;
}
.list-group-item label {
font-weight: normal;
margin-top: 17px;
}
.list-group-item label input[type="checkbox"] {
margin-right: 4px;
}
.form-group span.required {
position: absolute;
top: 0;
right: 0;
font-size: 20px;
color: #a94442;
font-weight: bold;
user-select: none;
}
label.error {
color: #a94442;
font-weight: bold;
margin-top: 4px;
}
.form-actions {
margin: 25px 0;
}
.form-control+.form-control {
margin-top: 6px;
}
.panel-group .panel-title .closed-icon,
.panel-group .panel-title .open-icon {
margin-right: 0.5em;
top: 2px;
}
.panel-group .panel-title a:hover,
.panel-group .panel-title a:active {
text-decoration: none;
}
.panel-group .panel-title a:hover .text,
.panel-group .panel-title a:active .text {
text-decoration: underline;
}
.panel-group .panel-title .closed-icon {
display: none;
}
.panel-group.closed .panel-title .open-icon {
display: none;
}
.panel-group.closed .panel-title .closed-icon {
display: inline;
}
/* Custom page footer */
.footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
<img src="http://via.placeholder.com/300x75" />
<h1>Email Preferences</h1>
</div>
<form action="" id="preferences_form" method="POST" role="form" class="form-horizontal">
{% if form.non_field_errors %}
<div class="alert alert-danger">
{% for error in form.non_field_errors %}
{{ error }}{% if not forloop.last %}<br />{% endif %}
{% endfor %}
</div>
{% endif %}
<input type="hidden" name="$fields" value="EmailInterests,EmailFrequency" />
<input type="hidden" name="$list_fields" value="EmailInterests" />
<!-- <input type="hidden" name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden" name="$updated_profile_url" value="/p/preferences_updated" /> -->
<!--<p class="required-fields">
<span>*</span> Required Information
</p>-->
<div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}">
<label for="email" class="col-sm-3 control-label">Email Address<span class="required">*</span></label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="$email" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$email' }}{% else %}{{ person.email|default:'' }}{% endif %}" />
{% if form.errors|lookup:'$email' %}
<p class="help-block">{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}</p>
{% endif %}
</div>
</div>
<div class="form-group">
<label for="first_name" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="first_name" name="$first_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$first_name' }}{% else %}{{ person.first_name|default:'' }}{% endif %}" />
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="last_name" name="$last_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$last_name' }}{% else %}{{ person.last_name|default:'' }}{% endif %}" />
</div>
</div>
<div class="form-group">
<label for="interests" class="col-sm-3 control-label">Interests</label>
<div class="col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInterests" value="New Releases" {% if 'New Releases' in person.EmailInterests or 'New Releases' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
New Product Releases
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInterests" value="Promotions" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Promotions & Sales
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInterests" value="Blog" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Latest from the Blog
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInterests" value="Events" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Events
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="interests" class="col-sm-3 control-label">How often would you like to hear from us?</label>
<div class="col-sm-9">
<div class="radio">
<label>
<!-- Default value. -->
<input type="radio" name="EmailFrequency" id="email_frequency_0" value="All" {% if person.EmailFrequency == 'All' or request.POST.EmailFrequency == 'All' %}checked="checked"{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}checked="checked"{% endif %} />
Twice per Week
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="EmailFrequency" id="email_frequency_1" value="Weekly" {% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} />
Once per Week
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="EmailFrequency" id="email_frequency_2" value="Monthly" {% if person.EmailFrequency == 'Monthly' or request.POST.EmailFrequency == 'Monthly' %}checked="checked"{% endif %} />
Once per Month
</label>
</div>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="$unsubscribe" value="true" />
<span class="text">Unsubscribe me from all emails.</span>
</label>
</div>
<div class="clearfix form-actions">
<div class="pull-right">
<button type="submit" class="btn btn-default btn-primary">Update Preferences</button>
</div>
</div>
</form>
<footer class="footer">
<p>
© 2017 Company Name — <a href="https://www.klaviyo.com" target="_blank">Privacy Policy</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script>
$(function() {
$('#preferences_form').validate({
rules: {
$email: {
required: true
}
},
messages: {
$email: 'Please enter your email address.',
$first_name: 'Please enter your first name.',
$last_name: 'Please enter your last name.'
}
});
// Toggle validation based on selection.
$('input[name="$unsubscribe"]').on('change', function() {
$('form .form-actions button[type="submit"]').toggleClass('cancel', $(this).is(':checked'));
});
});
$('input[name="$unsubscribe"]').on('change', function(){
$('input[type=checkbox]').not(this).prop('checked', false);
});
$('input[type=checkbox]').not('input[name="$unsubscribe"]').on('change', function(){
$('input[name="$unsubscribe"]').prop('checked', false);
});
</script>
</body>
</html>Définir la redirection d’une page hébergée après sa validation (facultatif)
Par défaut, lorsqu’une page hébergée (par exemple, une page de préférences hébergée) est validée, 2 types de redirection sont possibles :
- Si l’utilisateur a demandé à se désabonner, il sera envoyé à la page de confirmation de désabonnement par défaut de votre compte.
- S’il a mis à jour son profil (ou fait quoi que ce soit qui ne soit pas une demande de désabonnement), l’utilisateur sera envoyé à la page de confirmation (validée) des préférences par défaut de votre compte.
Si vous avez utilisé l’exemple de code HTML ci-dessus, le contenu de l’élément <body> se présentera comme suit :
<!-- <input type="hidden"
name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden"
name="$updated_profile_url" value="/p/preferences_updated" /> -->Pour personnaliser le type de redirection après validation de votre page hébergée, adaptez les lignes « value="..." » et ajoutez l’URL de votre choix dans le code HTML.
Ajouter des ressources personnalisées aux pages hébergées (facultatif)Ajouter des ressources personnalisées aux pages hébergées (facultatif)
Si vous souhaitez utiliser vos propres fichiers CSS, JS ou images sur votre page hébergée, téléchargez-les en cliquant sur le symbole + en regard de Ressources et faites-y référence dans le code source de la page.
Utilisez la balise suivante pour faire référence à une ressource que vous avez téléchargée dans votre compte Klaviyo : {% asset_url 'style.css' %}.
Utiliser les pages de consentement personnalisées
Vous pouvez remplacer chacune des pages de consentement par défaut de votre compte par des pages personnalisées, de sorte que tous les e-mails utilisent ces pages par défaut. Vous pouvez également configurer une seule liste spécifique pour qu’elle utilise des pages personnalisées, de sorte que seuls les e-mails envoyés à cette liste utilisent ces pages.
- Si vous avez personnalisé les pages de consentement pour une liste spécifique, tous les e-mails qui lui sont envoyés utiliseront ces pages, et non celles par défaut.
- Toutes les listes pour lesquelles vous n’avez pas personnalisé de pages de consentement utiliseront celles par défaut de votre compte. En outre, tous les e-mails qui ne sont PAS envoyés à une liste spécifique utiliseront également vos pages de consentement par défaut. Cela comprend les e-mails déclenchés par des indicateurs dans des flux, les campagnes envoyées à un segment ou les e-mails individuels.
Remplacer les pages de consentement par défaut par des pages hébergées
Si vous souhaitez remplacer une ou plusieurs pages de consentement par défaut de votre compte (par exemple, la page de préférences, d’abonnement ou de désabonnement pour les e-mails) par des pages codées sur mesure, procédez comme suit :
- Cliquez sur le nom de votre entreprise dans le coin inférieur gauche de Klaviyo.
- Sélectionnez Paramètres.
- Sélectionnez Autre dans la partie supérieure.
- Sur la page de consentement que vous souhaitez remplacer, cliquez sur les 3 points pour ouvrir le menu déroulant et sélectionnez Utiliser la page hébergée.
- Dans la boite de dialogue qui s’affiche, sélectionnez le fichier qui correspond à votre page personnalisée et cliquez sur Enregistrer.
Si vous souhaitez utiliser une page personnalisée au lieu d’une page de consentement par défaut pour les e-mails de flux ou les campagnes envoyées à un segment, vous devrez modifier les paramètres de votre compte en ce sens. Suivez la même procédure que ci-dessus pour remplacer vos pages de consentement par défaut par des pages codées sur mesure.
Utiliser des pages de consentement personnalisées pour une liste
Vous devrez configurer chaque liste pour laquelle vous souhaitez utiliser une page personnalisée au lieu des pages de consentement par défaut.
- Accédez à la liste que vous souhaitez connecter à une page personnalisée.
- Cliquez sur l’onglet Pages d’abonnement et de préférences pour afficher toutes les pages de consentement modifiables pour cette liste.
- Sous la page de consentement que vous souhaitez remplacer par une page personnalisée, cliquez sur les 3 points pour ouvrir le menu déroulant et sélectionnez Utiliser la page hébergée.
Notez que, si vous le souhaitez, vous pouvez choisir d’utiliser une page hébergée pour toutes les pages de consentement.
- Dans la boite de dialogue qui s’affiche, sélectionnez le fichier qui correspond à votre page personnalisée et cliquez sur Enregistrer.
Dans vos e-mails, vous devez continuer à utiliser les balises Klaviyo standard de désabonnement et de gestion des préférences (c’est-à-dire {% unsubscribe %} et {% manage_preferences %}). Ces balises s’afficheront sous forme de liens dans vos e-mails et redirigeront automatiquement les destinataires vers vos pages personnalisées.
FAQ sur les pages hébergées
Dois-je ajouter du JavaScript à ma page pour que ce formulaire fonctionne correctement ?
Étant donné que vos formulaires personnalisés sont contenus dans une page hébergée, vous n’avez pas besoin d’ajouter du JavaScript supplémentaire ou une URL d’action à l’élément <form> pour qu’il fonctionne correctement. Tant que l’utilisateur accède à la page hébergée à partir d’un e-mail envoyé via Klaviyo, le système peut faire l’association sans problème.
Cette page doit-elle être en HTML ?
Oui, cette page doit être en HTML. Vous pouvez lui ajouter des images, des feuilles de style, etc., soit en créant un lien vers ces ressources, soit en ajoutant un dossier de fichiers inclus.
Est-ce que Klaviyo peut m’aider à créer une page personnalisée ?
Actuellement, Klaviyo ne propose pas de service d’aide à la création de code personnalisé, ni d’assistance au dépannage de ce type de code. Les pages hébergées ont vocation à donner plus de liberté aux développeurs ou aux spécialistes du marketing qui savent coder.
Pour en savoir plus sur les possibilités de personnalisation des pages de consentement intégrées à Klaviyo, consultez notre article sur les bases des pages de consentement.