So fügst du benutzerdefinierten Code zu Einwilligungsseiten hinzu

Geschätzt 5 Minuten Lesedauer

Aktualisiert 5. Aug. 2025, 00:00 EST

Übersicht

Erfahre, wie du Klaviyos Funktion für gehostete Seiten aktivierst und nutzt. Damit kannst du eigene Präferenzseiten, Abonnieren-Seiten und Abmelden-Seiten mit benutzerdefiniertem Code erstellen.

Dieser Artikel richtet sich an Entwickler*innen; Klaviyo bietet derzeit keine Services zum Erstellen von individuellem Code an und wir bieten auch keinen Support für die Fehlerbehebung bei individuellem Code. Wenn du mehr über unsere integrierten App-Einwilligungsseiten erfahren möchtest, lies unseren Artikel zu den Ersten Schritten mit Einwilligungsseiten.

Bevor du anfängst

Bevor du eine gehostete Seite konfigurierst, aktiviere diese Funktionen:

Gehe zu Einstellungen > Andere.
Wähle Einwilligungsseiten aus dem Drop-down aus.
Aktiviere unter Benutzerdefinierte gehostete Seiten den Schalter für Benutzerdefinierte dedizierte Domain für gehostete Seiten verwenden.

Beachte, dass nur Konten mit einem kostenpflichtigen Tarif, die die Kontoverifizierung bestanden haben, Zugriff auf diese Einstellung haben.

Erstelle eine benutzerdefinierte Einwilligungsseite

Gehe zu Einstellungen > Andere.
Klicke auf Gehostete Seiten.
Klicke neben Seiten auf das Symbol +, um eine neue Seite hinzuzufügen.
Benenne diese Seite (z. B. unsubscribe.tmpl); Du kannst dies 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.

Entwirf eine HTML-Seite, die die Felder und Funktionen deiner Wahl enthält. Beispielfelder, die für eine benutzerdefinierte Einwilligungsseite eingefügt werden können, sind:
- Optionen für die E-Mail-Häufigkeit:
  - Eine Option zum Abmelden
  - Eine Option, alle E-Mails zu erhalten
  - Häufigkeitsoptionen für tägliche, wöchentliche, monatliche usw. Newsletter
- Informationen, die zum Targeting und zur Segmentierung verwendet werden können:
  - Ein Kontrollkästchen dafür, ob die*der Nutzer*in Verkaufsankündigungen erhalten möchte oder nicht
  - Ein Kontrollkästchen dafür, ob die Person Produktankündigungen erhalten möchte oder nicht
  - Ein Kontrollkästchen dafür, ob die Nutzer*innen Blog-Updates erhalten möchten oder nicht
  - Weitere Listen, denen Nutzer*innen möglicherweise beitreten möchten

Beispiel für HTML-Code für eine Einwilligungsseite

Du kannst diesen Code in deiner abmelden.tmpl verwenden, um eine vollständig funktionsfähige Einwilligungsseite mit E-Mail-Typ- sowie Häufigkeitseinstellungen zu erhalten:

{% if form.non_field_errors %}

{% for error in form.non_field_errors %} {{ error }}{% if not forloop.last %}
{% endif %} {% endfor %}

{% endif %}

Email Address*

{% if form.errors|lookup:'$email' %}

{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}

{% endif %}

First Name

Last Name

Interests

New Product Releases

Promotions & Sales

Latest from the Blog

Events

How often would you like to hear from us?

Twice per Week

Once per Week

Once per Month

Unsubscribe me from all emails.

" data-astro-cid-mnja5ucx style="--bg: #2d2d30;--headerBg: #1e1e1e;--border: #3e3e3e;--filenameText: #cccccc;">

<!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>

Eine Weiterleitung nach dem Absenden für eine gehostete Seite festlegen (optional)

Standardmäßig wird die Person nach dem erfolgreichen Absenden einer gehosteten Seite (z. B. einer gehosteten Präferenzenseite) an 1 von 2 Stellen weitergeleitet:

Wenn sich jemand abmelden lassen möchte, wird er*sie zur standardmäßigen Abmeldebestätigungsseite deines Kontos weitergeleitet.
Wenn sie ihr Profil aktualisiert haben (oder etwas getan haben, das keine Abmeldeanfrage ist), wird der*die Nutzer*in zur standardmäßigen Bestätigungsseite für Einstellungen (Erfolg) deines Kontos weitergeleitet.

Wenn du das Beispiel-HTML oben verwendet hast, wird das im <body> wie folgt wiedergegeben:

<!-- <input type="hidden" name="$unsubscribed_url" value="/p/preferences_updated" /> --><!-- <input type="hidden" name="$updated_profile_url" value="/p/preferences_updated" /> -->

Um anzupassen, wohin jemand nach dem Absenden deiner gehosteten Seite weitergeleitet wird, passe die Zeilen value=„...“ an deine bevorzugte(n) URL(s) im HTML an.

Benutzerdefinierte Assets zu gehosteten Seiten hinzufügen (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 verweise im Quellcode der Seite darauf.

Verwende den folgenden Tag, um auf ein Asset zu verweisen, das du in dein Klaviyo-Konto hochgeladen hast: {% asset_url 'style.css' %}

Verwenden von benutzerdefinierten Einwilligungsseiten

Du kannst jede Standard-Consent-Seite deines Kontos durch benutzerdefinierte, programmierte Seiten ersetzen, sodass alle E-Mails diese benutzerdefinierten Seiten standardmäßig verwenden. Alternativ kannst du nur 1 bestimmte Liste so konfigurieren, dass sie benutzerdefinierte, programmierte Seiten verwendet, sodass nur E-Mails, die an diese Liste gesendet werden, die benutzerdefinierten Seiten verwenden.

Wenn du Einwilligungsseiten für eine bestimmte Liste angepasst hast, verwenden alle an diese Liste gesendeten E-Mails diese individuellen Einwilligungsseiten.
Alle Listen, für die keine eigenen Einwilligungsseiten angepasst wurden, verwenden die Standard-Einwilligungsseiten deines Kontos. Außerdem verwenden alle E-Mails, die NICHT an eine bestimmte Liste gesendet werden, einschließlich Metrik-ausgelöster Flow-E-Mails, Kampagnen, die an ein Segment gesendet werden, oder persönlicher E-Mails, ebenfalls die Standard-Einwilligungsseiten.

Standardmäßige Zustimmungsseiten in gehostete Seiten ändern

Wenn du eine oder mehrere Standard-Einwilligungsseiten deines Kontos (z. B. Präferenzseite, Abonnieren-Seite oder E-Mail-Abmeldeseite) durch benutzerdefinierte, per Code erstellte Seiten ersetzen möchtest, führe die folgenden Schritte aus:

Klicke unten links in Klaviyo auf den Namen deines Unternehmens.
Wähle Einstellungen.

Wähle oben Andere aus.
Klicke im Drop-down-Menü mit den 3 Punkten auf der Einwilligungsseite, die du ersetzen möchtest, und wähle Gehostete Seite verwenden.

Wähle im Dialogfenster, das angezeigt wird, deine benutzerdefinierte Seitendatei aus und klicke auf Speichern.

Wenn du eine benutzerdefinierte Seite für Flow-E-Mails oder Kampagnen verwenden möchtest, die an ein Segment gesendet werden, musst du die Standard-Einwilligungsseiten deines Kontos so umstellen, dass deine benutzerdefinierten Seiten verwendet werden. Befolge denselben Prozess wie oben, um deine Standard-Einwilligungsseiten durch benutzerdefiniert codierte 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 standardmäßigen Einwilligungsseiten verwenden möchtest.

Navigiere zur Liste, die du mit einer benutzerdefinierten Seite verbinden möchtest.
Klicke auf den Tab Abonnieren-&-Präferenzseiten, um alle bearbeitbaren Einwilligungsseiten für diese Liste zu sehen.
Klicke unter der Einwilligungsseite, die du durch eine benutzerdefinierte Seite ersetzen möchtest, auf das Dropdown-Menü mit den drei Punkten und wähle Gehostete Seite verwenden aus.

Beachte, dass bei Bedarf für alle Einwilligungsseiten eine gehostete Seite verwendet werden kann.

Wähle im Dialogfenster, das angezeigt wird, deine benutzerdefinierte Seitendatei aus und klicke auf Speichern.

In deinen E-Mails solltest du weiterhin die Standard-Klaviyo-Tags zum Abmelden und Verwalten von Präferenzen verwenden (d. h. {% unsubscribe %} und {% manage_preferences %}). Diese Tags werden in deinen Live-E-Mails als Links ausgefüllt und führen Empfänger*innen automatisch zu deinen benutzerdefinierten Seiten.

FAQ zu gehosteten Seiten

Muss ich JavaScript zu meiner Seite hinzufügen, damit dieses Formular richtig gesendet wird?
Da deine benutzerdefinierten Formulare in einer gehosteten Seite enthalten sein werden, musst du kein zusätzliches JavaScript oder eine Aktions-URL zum <form> hinzufügen, damit es richtig gesendet wird. Solange eine gehostete Seite über eine E-Mail besucht wird, die über Klaviyo gesendet wurde, wird sie automatisch dem richtigen Kontakt zugeordnet.

Muss diese Seite im HTML-Format vorliegen?
Diese Seite muss im HTML-Format vorliegen. Du kannst zusätzliche Bilder, Stylesheets usw. hinzufügen, indem du sie verlinkst oder einen Ordner mit einbezogenen Dateien hinzufügst.

Kann Klaviyo mir helfen, eine benutzerdefinierte Seite zu erstellen?
Klaviyo bietet derzeit keine Dienstleistungen an, um benutzerdefinierten Code zu erstellen, und wir bieten auch keinen Support für die Fehlerbehebung bei benutzerdefiniertem Code. Die Hosted Pages -Funktion ist dafür gedacht, eine leere Vorlage für Entwickler*innen oder codeaffine Marketer*innen bereitzustellen.

Erfahre mehr über die Anpassungsmöglichkeiten mit Klaviyos integrierten Consent-Seiten in Erste Schritte mit Consent-Seiten.

War dieser Artikel hilfreich?

Nutze dieses Formular nur für Feedback zu Artikeln. So kontaktierst du den Support.

Mehr von Klaviyo entdecken

Community

Vernetze dich mit Kolleg*innen, Partner*innen und Klaviyo-Expert*innen, um dich inspirieren zu lassen, Erkenntnisse auszutauschen und Antworten auf deine Fragen zu erhalten.

Community besuchen

Partner

Beauftragen Sie einen Klaviyo-zertifizierten Experten, der Ihnen bei einer bestimmten Aufgabe hilft oder für das laufende Marketing-Management zuständig ist.

Partner beauftragen

Support

Kontaktiere den Support über dein Konto.

Support per E-Mail (kostenlose Testversion und kostenpflichtige Konten) Verfügbar 24/7

Chat / virtuelle Unterstützung
Verfügbarkeit abhängig von Standort und Abonnementtyp

Anmelden