Hoe toestemmingspagina's aanpassen
Wat je leert
Leer hoe je Klaviyo's functies voor gehoste pagina's inschakelt en gebruikt, waarmee je je eigen voorkeurpagina's, aanmeldpagina's en afmeldpagina's kunt coderen.
Dit artikel is voor ontwikkelaars; Klaviyo biedt op dit moment geen diensten om te helpen bij het bouwen van aangepaste code, noch bieden we support voor het oplossen van problemen met aangepaste code. Als je meer wilt weten over onze ingebouwde toestemmingspagina's voor apps, ga dan naar ons artikel over Aan de slag met toestemmingspagina's.
Voordat je van start gaat
Schakel deze functies in voordat je een gehoste pagina configureert:
- Navigeer naar Instellingen > Overige.
- Kies Toestemmingspagina's uit de vervolgkeuzelijst.
- Schakel onder Aangepaste gehoste pagina's de schakelaar in naar Aangepast domein gebruiken voor gehoste pagina's.
Merk op dat alleen accounts met een betaald abonnement die geslaagd zijn voor account verificatie toegang hebben tot deze instelling.
Een aangepaste toestemmingspagina maken
- Ga naar Instellingen > Overige.
- Klik op Gehoste pagina's.
- Klik naast Pagina's op het + symbool om een nieuwe pagina toe te voegen.
- Geef deze pagina een naam (bijvoorbeeld afmelden.tmpl); Je kunt dit gebruiken voor al je toestemmingspagina's, maar je kunt meer dan 1 pagina maken als je dat wilt.
Namen van gehoste pagina's kunnen geen spaties bevatten, want dat leidt tot een fout. Vermijd spaties of gebruik underscores om titels op te breken.
- Ontwerp een HTML-pagina met de velden en functies van je keuze. Voorbeeldvelden die kunnen worden ingevoegd voor een aangepaste toestemmingspagina zijn onder andere:
- Keuzes voor e-mailfrequentie:
- Een optie om af te melden
- Een optie om alle e-mail te ontvangen
- Frequentie opties voor dagelijkse, wekelijkse, maandelijkse, etc. nieuwsbrief
- Informatie die kan worden gebruikt om te richten en segment:
- Een selectievakje om aan te geven of de gebruiker wel of geen verkoopmededelingen wil
- Een selectievakje om aan te geven of de gebruiker productaankondigingen wil of niet
- Een selectievakje om aan te geven of de gebruiker wel of geen blogupdate wil
- Andere lijsten waar de gebruiker lid van wil worden
- Keuzes voor e-mailfrequentie:
Voorbeeld van HTML-code voor een toestemmingspagina
Je kunt deze code gebruiken in je afmelden.tmpl om een volledig functionele toestemmingspagina te krijgen met e-mailtype en frequentievoorkeuren:
<! 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">
<!-- Laatst gecompileerde en geminified CSS -->
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<style type="text/css">
/* Inhoud een beetje uit elkaar plaatsen */
body {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* Aangepaste paginakop */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
.header h1 {
margin: 10px 0;
}
.verplicht-velden {
text-align: right;
}
.verplichte velden span {
color: #a94442;
font-weight: bold;
}
lijst-groep-item label {
font-weight: normal;
margin-top: 17px;
}
lijst-groep-item label invoer[type="selectievakje"] {
margin-right: 4px;
}
.form-groep 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-acties {
margin: 25px 0;
}
.formulier-control+.formulier-control {
margin-top: 6px;
}
.panel-groep .paneeltitel .closed-icon,
.panel-groep .paneeltitel .open-icoon {
margin-right: 0.5em;
top: 2px;
}
.panel-groep .paneeltitel a:hover,
.panel-groep .paneeltitel a:actief {
text-decoration: none;
}
.panel-groep .paneeltitel a:hover .text,
.panel-groep .paneeltitel a:actief .tekst {
text-decoration: underline;
}
.panel-groep .paneeltitel .gesloten-pictogram {
display: none;
}
.panel-groep.closed .panel-titel .open-icoon {
display: none;
}
.panel-groep.closed .panel-titel .gesloten-pictogram {
display: inline;
}
/* Aangepaste voettekst */ .footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Container aanpassen */ @media (min-width: 768px) { .container </style>
<!-- -->
<!-- -->
<!--[if lt IE 9]>
{
max-width: 730px;
}
}
/style !-- HTML5 shim en Respond.js voor IE8 ondersteuning van HTML5 elementen en media queries -- !-- WAARSCHUWING: Respond.js werkt niet als je de pagina bekijkt via file:// -- !--[if lt IE 9] script src= https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js /script
<>
<>
<>
<>
<""><></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
<[endif] < div class="container">
< div class="header">
< img src="http://via.placeholder.com/300x75"</head> />
<h1>Email Voorkeuren</h1>
</div>
< form action="" id="preferences_form" method="POST" role="form" class="form-horizontaal">
{% 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> Vereiste informatie
</p>-->
< div class="form-groep{% if form.errors|lookup:'$email' %} has-error{% endif %}" >
< label for="email" class="col-sm-3 control-label">Email Adres<span class="required> *</span></label>
< div class="col-sm-9">
< input type="email" class="form-{% endif %}control" id="email" name="$email" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$email' }}{% else %}{{ person.email|default:'' }}" />
{% if form.errors|lookup:'$email' %}
< p class="help-block">{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}< /p</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-groep">
< 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 %} /.>
Nieuwe 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 %} />
Nieuwste van de 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>
< div class="form-group">
< label for="interests" class="col-sm-3 control-label"> Hoe vaak wil je van ons horen?<></label>
< div class="col-sm-9">
< div class="radio"
label>
<label>
<!-- Standaardwaarde. -->
<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=<label>
EmailFrequency" id="email_frequency_1" value="Wekelijks" {% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} />
Eenmaal per week
</label>
</div>
< div class="radio">
<label>
< input type="radio" name="E-mailFrequentie" id="email_frequentie_2" value="Maandelijks" {% if person.EmailFrequency == 'Monthly' or request.POST.EmailFrequency == 'Monthly' %}checked=" aangevinkt"{% endif %} />
Eenmaal per maand
</label>
</div>
</div>
</div>
< div class="checkbox">
<label>
< input type="checkbox" name="$unsubscribe" value="true" />
< span class="text"> afmelden me van alle e -mail.</span>
</label>
</div>
< div class="clearfix form-actions">
< div class="pull-right">
< button type="submit" class="btn btn-default btn-primary"> voorkeuren bijwerken</button>
</div>
</div>
</form>
< footer class="footer">
<p>
p>
© 2017 bedrijf Naam - <a href="https://www.klaviyo.com" target="_blank"> privacybeleid</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery (nodig voor de JavaScript-plugins van Bootstrap) -->
< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- -->
< 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() {
$('#voorkeuren_formulier').validate({
regels: {
$email: {
required: true
}
},
berichten: {
$email: 'Please enter your email address.',
$first_name: 'Please enter your first name.',
$last_name: 'Please enter your last name.'
}
});
// schakelaarvalidatie op basis van selectie.
$('input[name="$unsubscribe"]').on('change', functie() {
$('form .form-actions button[type="submit"]').toggleClass('cancel', $(this).is(':checked'));
});
});
$('input[name="$unsubscribe"]').on('change', functie(){
$('input[type=checkbox]').not(this).prop('checked', false);
});
$('input[type=checkbox]').not('input[name="$unsubscribe"]').on('change', functie(){
$('input[name="$unsubscribe"]').prop('checked', false);
});
</script>
</body>
</html>De omleiding van een gehoste pagina instellen na indienen (optioneel)
Standaard wordt de gebruiker, nadat een gehoste pagina (bijvoorbeeld een gehoste voorkeurenpagina) succesvol is ingediend, doorgestuurd naar 1 van 2 plaatsen:
- Als ze hebben gevraagd om af te melden, worden ze naar de standaard afmeldbevestigingspagina van je account gestuurd.
- Als ze hun profiel hebben bijgewerkt (of iets anders hebben gedaan dan een afmeldverzoek), wordt de gebruiker naar de standaard voorkeurenbevestigingspagina (succes) van je account gestuurd.
Als je de voorbeeld-HTML hierboven hebt gebruikt, wordt dit weergegeven in de <body> als:
<!-- < <input type= hidden""
name="$unsubsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden"
name="$updated_profile_url" value="/p/preferences_updated" /> -->Om aan te passen waar iemand naartoe wordt geleid na het indienen van je gehoste pagina, pas je de regels value="..." aan naar de URL('s) van je voorkeur binnen de HTML.
Aangepaste middelen toevoegen aan gehoste pagina's (optioneel)Aangepaste middelen toevoegen aan gehoste pagina's (optioneel)
Als je je eigen CSS-bestand, JS-bestand of afbeeldingen wilt gebruiken op je gehoste pagina, upload deze dan door op het +-symbool naast Activa te klikken en verwijs ernaar in de broncode van de pagina.
Gebruik de volgende tag om te verwijzen naar een asset die je hebt geüpload naar je Klaviyo account: {% asset_url 'style.css' %}
De aangepaste toestemmingspagina's gebruiken
Je kunt de standaard toestemmingspagina's op account vervangen door aangepaste pagina's, zodat alle e-mails standaard deze aangepaste pagina's gebruiken. Je kunt ook slechts 1 bepaalde lijst configureren om aangepaste pagina's te gebruiken, zodat alleen e-mail die naar die lijst wordt gestuurd de aangepaste pagina's gebruikt.
- Als je aangepaste toestemmingspagina's hebt voor een specifieke lijst, zullen alle e-mails die naar die lijst worden gestuurd, gebruikmaken van die unieke toestemmingspagina's.
- Elke lijst waarvoor je geen unieke toestemmingspagina's hebt aangepast, gebruikt de standaard toestemmingspagina's van je account. Daarnaast zullen alle e-mails die NIET naar een specifieke lijst worden gestuurd, inclusief meetwaarde-getriggerde flow e-mailcampagnes die naar een segment worden gestuurd, of persoonlijke e-mails, ook je standaard toestemmingspagina's gebruiken.
Standaard toestemmingspagina's wijzigen in gehoste pagina's
Als je 1 of meer van de standaard toestemmingspagina's van je account(bijvoorbeeld voorkeurenpagina, aanmeldpagina of e-mail afmelden pagina) wilt vervangen door aangepaste pagina's, volg dan deze stappen:
- Klik op je bedrijfsnaam in de linkerbenedenhoek van Klaviyo.
- Selecteer Instellingen.
- Selecteer Overige bovenaan.
- Klik op het vervolgkeuzemenu met 3 puntjes op de toestemmingspagina die je wilt vervangen en selecteer Gebruik gehoste pagina.
- Selecteer in het dialoogvenster dat verschijnt je aangepaste paginabestand en klik op Opslaan.
Als je een aangepaste pagina wilt gebruiken voor flow e-mail of campagnes die naar een segment worden gestuurd, dan moet je de standaard toestemmingspagina's van account omschakelen om je aangepaste pagina's te gebruiken. Volg hetzelfde proces als hierboven om je standaard toestemmingspagina's te vervangen door aangepaste pagina's.
Aangepaste toestemmingspagina's gebruiken voor een lijst
Je moet elke afzonderlijke lijst configureren waarvoor je een aangepaste pagina wilt gebruiken in plaats van de standaard toestemmingspagina's.
- Navigeer naar de lijst die je wilt koppelen aan een aangepaste pagina.
- Klik op het tabblad Aanmelden & Voorkeurspagina's om alle bewerkbare toestemmingspagina's voor die lijst te zien.
- Klik onder de toestemmingspagina die je wilt vervangen door een aangepaste pagina op het vervolgkeuzemenu met de 3 puntjes en selecteer Gebruik gehoste pagina.
Je kunt ervoor kiezen om een gehoste pagina te gebruiken voor alle toestemmingspagina's als je dat wilt.
- Selecteer in het dialoogvenster dat verschijnt je aangepaste paginabestand en klik op Opslaan.
In je e-mail moet je nog steeds de standaard Klaviyo afmelden en voorkeuren beheren tag gebruiken (d.w.z. {% unsubscribe %} en {% manage_preferences %}). Deze tags verschijnen als links in je live e-mail en brengen ontvangers automatisch naar je aangepaste pagina's.
Gehoste pagina's FAQ
Moet ik JavaScript toevoegen aan mijn pagina zodat dit formulier goed wordt verzonden?
Omdat je aangepaste formulieren op een gehoste pagina staan, hoef je geen extra JavaScript of een actie-URL toe te voegen aan het <form> om het correct te verzenden. Zolang een gehoste pagina wordt bezocht vanuit een e-mail die is verzonden via Klaviyo, wordt deze automatisch terug gekoppeld aan de juiste contactpersoon.
Moet deze pagina in HTML zijn?
Deze pagina moet in HTML zijn. Je kunt extra afbeeldingen, stylesheets, etc. toevoegen door er een link naar te maken of door een map met meegeleverde bestanden toe te voegen.
Kan Klaviyo me helpen bij het bouwen van een aangepaste pagina?
Klaviyo biedt momenteel geen services om te helpen bij het bouwen van aangepaste code en we bieden ook geen support voor het oplossen van problemen met aangepaste code. De Hosted Pages functies zijn bedoeld om ontwikkelaars of marketeers met code een lege lei te bieden.
Leer meer over de aanpassingsmogelijkheden met de ingebouwde toestemmingspagina's van Klaviyo in Aan de slag met toestemmingspagina's.