Du wirst lernen
Lerne, wie du die gehosteten Seiten von Klaviyo aktivierst und nutzt. Damit kannst du deine eigenen Einstellungsseiten, Anmeldeseiten und Abmeldeseiten programmieren.
Dieser Artikel richtet sich an Entwickler. Klaviyo bietet derzeit keine Dienste an, die bei der Erstellung von benutzerdefiniertem Code helfen, und wir bieten auch keinen Support für die Fehlerbehebung bei benutzerdefiniertem Code. Wenn du mehr über unsere integrierten App-Einwilligungsseiten erfahren möchtest, schau dir unseren Artikel über die ersten Schritte mit den Einverständnisseiten an.
Bevor du beginnst
Bevor du eine gehostete Seite konfigurierst, aktiviere diese Funktion:
- Navigiere zu Einstellungen > Andere.
- Wähle aus dem Dropdown-Menü die Seite "Zustimmung" aus.
- Klicke unter Benutzerdefinierte gehostete Seiten auf Benutzerdefinierte Seiten aktivieren.
Beachte, dass nur Konten mit einem bezahlten Abonnement, die die Kontoüberprüfung bestanden haben, Zugriff auf diese Einstellung haben.
Eine benutzerdefinierte Einwilligungsseite erstellen
- Gehe zu Einstellungen > Andere.
- Klicke auf Gehostete Seiten.
- Neben Seiten klickst du auf das + Symbol, um eine neue Seite hinzuzufügen.
- Benenne diese Seite (z. B. unsubscribe.tmpl); du kannst sie für jede deiner Einwilligungsseiten verwenden, aber du kannst auch mehr als 1 Seite erstellen, wenn du möchtest.
Gehostete Seitennamen dürfen keine Leerzeichen enthalten, da dies zu einem Fehler führt. Vermeide Leerzeichen oder verwende Unterstriche, um Titel aufzulösen.
- Gestalte eine HTML-Seite, die die Felder und Funktionen deiner Wahl enthält. Beispiele für Felder, die für eine benutzerdefinierte Einwilligungsseite eingefügt werden können, sind:
- Auswahlmöglichkeiten für die E-Mail-Frequenz:
- Eine Option zum Abbestellen
- Eine Option zum Empfang aller E-Mails
- Frequenzoptionen für tägliche, wöchentliche, monatliche usw. Newsletter
- Informationen, die für Zielgruppen und Segmente verwendet werden können:
- Ein Kontrollkästchen, das angibt, ob der Nutzer Verkaufsankündigungen wünscht oder nicht
- Ein Kontrollkästchen, das angibt, ob der Nutzer Produktankündigungen wünscht oder nicht
- Ein Kontrollkästchen, das angibt, ob der Benutzer das Blog aktualisieren möchte oder nicht
- Andere Liste, der der Benutzer beitreten möchte
- Auswahlmöglichkeiten für die E-Mail-Frequenz:
Beispiel für HTML-Code für eine Einwilligungsseite
Du kannst diesen Code in deiner unsubscribe.tmpl verwenden, um eine voll funktionsfähige Einwilligungsseite mit E-Mail-Typ und Häufigkeit zu erhalten:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Aktuellstes kompiliertes und minifiziertes CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Inhalt ein wenig auflockern */
body {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* Benutzerdefinierter Seitenkopf */
.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;
}
Liste-group-item label {
font-weight: normal;
margin-top: 17px;
}
Liste-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 .geschlossen-Symbol {
display: none;
}
.panel-group.closed .panel-title .open-icon {
display: none;
}
.panel-group.closed .panel-title .geschlossen-Symbol {
display: inline;
}
/* Benutzerdefinierte Seitenfußzeile */
.footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Container anpassen */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
</style>
<!-- HTML5-Shim und Respond.js für IE8-Unterstützung von HTML5-Elementen und Media-Queries -->
<!-- WARNUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// -- aufrufst.>
-->
<!--[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]-->
<body>
<div class="container">
<div class="header">
<img src="http://via.placeholder.com/300x75"</head> />
<h1>E-Mail-Einstellungen</h1>
</div>
<form action="" id="preferences_form" method="POST" role="form" class="form-horizontal">
{% if form.non_field_errors %}
<div class="alert alert-gefahr">
{% 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>*</span> Erforderliche Informationen
</p>-->
<div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}">
<label for="email" class="col-sm-3 control-label"> E-Mail Adresse<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</div>
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=</div>
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="interessen" class="col-sm-3 control-label"> interessen</label>
<div class="col-sm-9">
<div class="checkbox">
<label>
<input type=checkbox" name="EmailInterests" value="Neuerscheinungen" {% 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 %} />
Neue Produktveröffentlichungen
</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 %} />
Werbeaktionen & Umsatz
</label
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInteressen" value="Blog" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Aktuelles aus dem Blog
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInteressen value="Events" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Ereignisse
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="interests" class="col-sm-3 control-label"> Wie oft möchten Sie von uns hören?</label>
<div class="col-sm-9">
<div class="radio">
<label>
<!-- Standardwert. -->
<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 %} />
Zweimal pro Woche
</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 %} />
Einmal pro Woche
</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 %} />
Einmal pro Monat
</label>
</div>
</div>
</div>
/div>
<div class="checkbox">
<label>
<input type="checkbox" name="$unsubscribe" value="true" />
<span class="text"> Melde mich von allen E-Mails ab.</span>
</label>
</div>
<div class="clearfix form-actions">
<div class="pull-right">
<button type="submit" class="btn btn-default btn-primary">Update Voreinstellungen</button>
</div>
</div>
</form>
<footer class="footer">
<p>
© 2017 Unternehmen Name - <a href="https://www.klaviyo.com" target="_blank"> Datenschutzrichtlinie</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery (notwendig für die JavaScript-Plugins von Bootstrap) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Aktuellstes kompiliertes und minifiziertes 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({
Regeln: {
$email: {
required: true
}
},
messages: {
$email: 'Please enter your email address.',
$first_name: 'Please enter your first name.',
$last_name: 'Please enter your last name.'
}
});
// Umschalter-Validierung basierend auf der Auswahl.
$('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>Lege die Weiterleitung einer gehosteten Seite nach der Übermittlung fest (Optional)
Wenn eine gehostete Seite (z. B. eine gehostete Einstellungsseite) erfolgreich übermittelt wurde, wird der Nutzer standardmäßig an eine von 2 Stellen weitergeleitet:
- Wenn sie sich abmelden möchten, werden sie auf die Standardbestätigungsseite deines Kontos für die Abmeldung weitergeleitet.
- Wenn sie ihr Profil aktualisiert haben (oder irgendetwas anderes getan haben, das keine Abmeldeanfrage ist), wird der/die Nutzer/in auf die Bestätigungsseite (Erfolg) für die Standardeinstellungen deines Kontos geschickt.
Wenn du das obige HTML-Beispiel verwendet hast, wird dies im <body> wiedergegeben:
<!-- <input type="hidden"
name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden"
name="$updated_profile_url" value="/p/preferences_updated" /> -->Um festzulegen, wohin jemand nach dem Absenden deiner gehosteten Seite weitergeleitet wird, passe die value="..." Zeilen auf deine bevorzugte(n) URL(s) innerhalb des HTML an.
Hinzufügen von benutzerdefinierten Assets zu gehosteten Seiten (optional)Hinzufügen von benutzerdefinierten Assets zu gehosteten Seiten (optional)
Wenn du deine eigene CSS-Datei, JS-Datei oder Bilder auf deiner gehosteten Seite verwenden möchtest, lade sie hoch, indem du auf das +-Symbol neben Assets klickst und sie im Quellcode der Seite referenzierst.
Verwende den folgenden Tag, um auf ein Asset zu verweisen, das du in dein Klaviyo-Konto hochgeladen hast: {% asset_url 'style.css' %}
Verwendung der benutzerdefinierten Einwilligungsseiten
Du kannst die Standard-Einwilligungsseiten deines Kontos durch benutzerdefinierte Seiten ersetzen, damit alle E-Mails standardmäßig diese benutzerdefinierten Seiten verwenden. Du kannst auch nur eine bestimmte Liste so konfigurieren, dass sie benutzerdefinierte Seiten verwendet, so dass nur E-Mails, die an diese Liste gesendet werden, die benutzerdefinierten Seiten verwenden.
- Wenn du benutzerdefinierte Seiten für eine bestimmte Liste erstellt hast, wird jede E-Mail, die an diese Liste gesendet wird, diese individuellen Seiten verwenden.
- Alle Listen, für die du keine eigenen Einverständniserklärungsseiten erstellt hast, verwenden die Standard-Einverständniserklärungsseiten deines Kontos. Darüber hinaus wird jede E-Mail, die NICHT an eine bestimmte Liste gesendet wird, einschließlich Metrik-gesteuerter Flow-E-Mails, Kampagnen, die an ein Segment gesendet werden, oder persönliche E-Mails, ebenfalls deine Standard-Einwilligungsseiten verwenden.
Ändere die Standard-Zustimmungsseiten in gehostete Seiten
Wenn du eine oder mehrere der Standard-Einwilligungsseiten deines Kontos (z. B. Einstellungsseite, Anmeldeseite oder E-Mail-Abmeldeseite) durch benutzerdefinierte Seiten ersetzen möchtest, befolge diese Schritte:
- Klicke auf deinen Unternehmensnamen in der unteren linken Ecke von Klaviyo.
- Wähle Einstellungen.
- Wähle oben Andere aus.
- Klicke auf das Dropdown-Menü der Einwilligungsseite, die du mit deinem Abonnement ersetzen möchtest, und wähle die Option Gehostete Seite verwenden.
- Wähle in dem nun erscheinenden Dialogfenster deine benutzerdefinierte Seitendatei aus und klicke auf Einstellungen speichern.
Wenn du eine benutzerdefinierte Seite für Flow-E-Mails oder Kampagnen, die an ein Segment gesendet werden, verwenden möchtest, musst du die Standard-Einwilligungsseiten deines Kontos ändern, um deine benutzerdefinierten Seiten zu verwenden. Befolge den gleichen Prozess wie oben, um deine Standard-Zustimmungsseiten durch individuell programmierte Seiten zu ersetzen.
Benutzerdefinierte Einwilligungsseiten für eine Liste verwenden
Du musst jede einzelne Liste konfigurieren, für die du eine benutzerdefinierte Seite anstelle der Standard-Zustimmungsseiten verwenden möchtest.
- Navigiere zu der Liste, die du mit einer benutzerdefinierten Seite verbinden möchtest.
- Klicke auf die Registerkarte Abonnieren & Einstellungsseiten, um alle bearbeitbaren Einstellungsseiten für diese Liste zu sehen.
- Klicke unter der Einwilligungsseite, die du durch eine benutzerdefinierte Seite ersetzen möchtest, auf den Dropdown-Pfeil und wähle Hosted Page verwenden.
Wenn du möchtest, kannst du eine gehostete Seite für alle Einwilligungsseiten verwenden.
- Wähle im erscheinenden Dialogfenster deine benutzerdefinierte Seitendatei aus und klicke auf Einstellungen speichern.
In deiner E-Mail solltest du weiterhin die Standard-Tags Klaviyo unsubscribe und manage preferences (d.h. {% unsubscribe %} und {% manage_preferences %}) verwenden . Diese Tags werden als Links in deiner Live-E-Mail angezeigt und führen die Empfänger automatisch zu deinen benutzerdefinierten Seiten.
Gehostete Seiten FAQ
Muss ich JavaScript zu meiner Seite hinzufügen, damit das Formular richtig übermittelt wird?
Da deine benutzerdefinierten Formulare in einer gehosteten Seite enthalten sind, musst du kein zusätzliches JavaScript oder eine Aktions-URL in das einfügen, damit <form> es richtig abgeschickt wird. Solange eine gehostete Seite von einer über Klaviyo gesendeten E-Mail aus besucht wird, wird sie automatisch mit dem richtigen Kontakt verbunden.
Muss diese Seite in HTML sein?
Diese Seite muss in HTML sein. Du kannst zusätzliche Bilder, Stylesheets usw. einbinden, indem du entweder auf sie verlinkst oder einen Ordner mit eingebundenen Dateien hinzufügst.
Kann Klaviyo mir helfen, eine benutzerdefinierte Seite zu erstellen?
Klaviyo bietet derzeit keine Dienste an, die bei der Erstellung von benutzerdefiniertem Code helfen, und wir bieten auch keinen Support für die Fehlerbehebung bei benutzerdefiniertem Code. Die Funktion " Hosted Pages" ist dazu gedacht, Entwicklern oder code-versierten Marketern ein unbeschriebenes Blatt zu bieten.
Erfahre mehr über die Anpassungsmöglichkeiten der in Klaviyo integrierten Einverständniserklärungsseiten unter Erste Schritte mit Einverständniserklärungsseiten.