Jak tworzyć strony zgody za pomocą własnego kodu

Około 4 min czytania

Zaktualizowano 5 sie 2025, 00:00 EST

Czego się dowiesz?

Dowiedz się, jak włączyć i używać funkcji hostowanych stron Klaviyo, która umożliwia dodanie własnego kodu do własnych stron preferencji, stron subskrypcji i stron wycofania subskrypcji.

Ten artykuł jest przeznaczony dla deweloperów; Klaviyo obecnie nie oferuje usług pomagających w tworzeniu niestandardowego kodu ani nie zapewnia wsparcia w rozwiązywaniu problemów z niestandardowym kodem. Aby dowiedzieć się więcej o naszych wbudowanych stronach zgody aplikacji, przejdź do naszego artykułu Pierwsze kroki ze stronami zgody.

Kilka słów na początek

Przed skonfigurowaniem strony hostowanej włącz tę funkcję:

Przejdź do Ustawienia > Inne.
Wybierz Strony zgody z listy rozwijanej.
W obszarze Niestandardowe strony hostowane przełącz przełącznik, aby użyć niestandardowej domeny dedykowanej dla stron hostowanych.

Pamiętaj, że tylko konta z płatnym planem, które przeszły weryfikację konta, mają dostęp do tego ustawienia.

Utwórz niestandardową stronę zgody

Przejdź do Ustawienia > Inne.
Kliknij Hostowane strony.
Obok Strony kliknij symbol +, aby dodać nową stronę.
Nadaj tej stronie nazwę (np. unsubscribe.tmpl); będzie można tego użyć na dowolnej stronie zgody, ale jeśli chcesz, możesz utworzyć więcej niż 1 stronę.

Nazwy stron hostowanych nie mogą zawierać spacji, ponieważ spowoduje to błąd. Unikaj spacji lub używaj znaków podkreślenia, aby rozdzielić tytuły.

Zaprojektuj stronę HTML, która zawiera wybrane pola i funkcje. Przykładowe pola, które można wstawić na niestandardowej stronie zgody, obejmują:
- Opcje częstotliwości wysyłki e-maili:
  - Możliwość wypisania się z subskrypcji
  - Opcja otrzymywania wszystkich e-maili
  - Opcje częstotliwości dla newsletterów dziennych, tygodniowych, miesięcznych itp.
- Informacje, które można wykorzystać do targetowania i segmentowania:
  - Pole wyboru określające, czy użytkownik chce otrzymywać ogłoszenia o wyprzedażach
  - Pole wyboru określające, czy użytkownik chce otrzymywać ogłoszenia dotyczące produktów
  - Pole wyboru określające, czy użytkownik chce otrzymywać aktualizacje z bloga
  - Inne listy, do których użytkownik może chcieć dołączyć

Przykład kodu HTML strony zgody

Możesz użyć tego kodu w unsubscribe.tmpl, aby uzyskać w pełni funkcjonalne strony zgody z preferencjami typu e-maila i częstotliwości:

{% 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>

Ustaw przekierowanie strony hostowanej po przesłaniu (opcjonalne)

Domyślnie po pomyślnym przesłaniu strony hostowanej (np. hostowanej strony preferencji) użytkownik zostanie przekierowany do 1 z 2 miejsc:

Jeśli poprosili o wycofanie subskrypcji, zostaną przekierowani na domyślną stronę potwierdzenia wycofania subskrypcji na Twoim koncie.
Jeśli użytkownik zaktualizował swój profil (lub zrobił cokolwiek, co nie jest prośbą o wycofanie subskrypcji), zostanie przekierowany na domyślną stronę potwierdzenia preferencji (sukces) dla konta.

Jeśli użyto przykładowego kodu HTML powyżej, jest to odzwierciedlone w elemencie <body> jako:

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

Aby dostosować miejsce, do którego nastąpi przekierowanie po przesłaniu strony hostowanej, zmień w HTML wiersze value="..." na preferowane adresy URL.

Dodaj niestandardowe zasoby do hostowanych stron (opcjonalnie)

Jeśli chcesz używać własnego pliku CSS, pliku JS lub obrazów na stronie hostowanej, prześlij je, klikając symbol + obok Zasoby, i dodaj odwołania do nich w kodzie źródłowym strony.

Użyj następującego znacznika, aby odwołać się do zasobu przesłanego na konto Klaviyo: {% asset_url 'style.css' %}

Korzystanie z niestandardowych stron zgody

Możesz zastąpić każdą z domyślnych stron zgody na koncie stronami z niestandardowym kodem, aby wszystkie e-maile domyślnie używały tych niestandardowych stron. Alternatywnie możesz skonfigurować tylko 1 konkretną listę tak, aby używała stron z niestandardowym kodem, dzięki czemu tylko e-maile wysyłane na tę listę będą używać niestandardowych stron.

Jeśli masz dostosowane strony zgody dla konkretnej listy, wszystkie e-maile wysyłane do tej listy będą korzystać z tych unikalnych stron zgody.
Wszelkie listy, dla których nie dostosowano unikalnych stron zgody, będą korzystać z domyślnych stron zgody na Twoim koncie. Dodatkowo każdy e-mail, który NIE jest wysyłany do konkretnej listy, w tym e-maile w sekwencji wyzwalanej metryką, kampanie wysyłane do segmentu lub e-maile osobiste, również będzie korzystać z domyślnych stron zgody.

Zmień domyślne strony zgody na strony hostowane

Jeśli chcesz zastąpić 1 lub więcej domyślnych stron zgody na Twoim koncie (np. stronę preferencji, stronę subskrybowania lub stronę wycofania subskrypcji e-maili) stronami zakodowanymi na zamówienie, wykonaj te kroki:

W lewym dolnym rogu Klaviyo kliknij nazwę swojej firmy.
Wybierz Ustawienia.

U góry wybierz Inne.
Kliknij menu rozwijane z trzema kropkami na stronie zgody, którą planujesz zastąpić, i wybierz Użyj strony hostowanej.

W wyświetlonym oknie dialogowym wybierz niestandardowy plik strony i kliknij Zapisz.

Jeśli chcesz używać niestandardowej strony dla e-maili w sekwencjach lub kampanii wysyłanych do segmentu, musisz przełączyć domyślne strony zgody na koncie tak, aby używały niestandardowych stron. Postępuj zgodnie z tym samym procesem co powyżej, aby zastąpić domyślne strony zgody stronami napisanymi w niestandardowym kodzie.

Używaj niestandardowych stron zgody dla listy

Musisz skonfigurować każdą listę, dla której chcesz użyć strony niestandardowej zamiast domyślnych stron zgody.

Przejdź do listy, którą chcesz połączyć ze stroną niestandardową.
Kliknij kartę Strony subskrypcji i preferencji, aby zobaczyć wszystkie edytowalne strony zgody dla tej listy.
Na stronie zgody, którą chcesz zastąpić stroną niestandardową, kliknij menu rozwijane z 3 kropkami i wybierz Użyj strony hostowanej.

Pamiętaj, że jeśli chcesz, możesz wybrać stronę hostowaną dla wszystkich stron zgody.

W wyświetlonym oknie dialogowym wybierz niestandardowy plik strony i kliknij Zapisz.

W e-mailach nadal należy używać standardowych znaczniki Klaviyo do wycofać subskrypcję i zarządzania preferencjami (tj. {% unsubscribe %} i {% manage_preferences %}). Te znaczniki zostaną wypełnione jako linki w wysyłanych e-mailach i automatycznie przeniosą odbiorców do Twoich niestandardowych stron.

FAQ dotyczące hostowanych stron

Czy muszę dodać JavaScript do strony, aby ten formularz przesyłał się prawidłowo?
Ponieważ Twoje formularze niestandardowe będą umieszczone na stronie hostowanej, nie musisz dodawać żadnego dodatkowego JavaScript ani adresu URL akcji do znacznika <form>, aby formularz przesyłał się prawidłowo. Jeśli strona hostowana zostanie odwiedzona z wiadomości e-mail wysłanej za pośrednictwem Klaviyo, zostanie automatycznie powiązana z właściwym kontaktem.

Czy ta strona musi być w HTML?
Ta strona musi być w HTML. Możesz dołączyć dodatkowe obrazy, arkusze stylów itp. — albo linkując do nich, albo dodając folder z dołączonymi plikami.

Czy Klaviyo może pomóc mi zbudować niestandardową stronę?
Klaviyo obecnie nie oferuje usług pomagających w tworzeniu niestandardowego kodu ani nie zapewnia wsparcia w rozwiązywaniu problemów z niestandardowym kodem. Funkcja Hosted Pages ma zapewnić puste płótno dla deweloperów lub marketerów, którzy dobrze znają się na kodzie.

Dowiedz się więcej o możliwościach dostosowywania dzięki wbudowanym stronom zgody Klaviyo w artykule Pierwsze kroki ze stronami zgody.

Czy ten artykuł był pomocny?

Ten formularz służy tylko do przesyłania opinii na temat artykułów. Dowiedz się, jak skontaktować się z zespołem ds. pomocy.

Dowiedz się od Klaviyo więcej

Społeczność

Nawiązuj kontakty z osobami na podobnych stanowiskach, partnerami oraz ekspertami i ekspertkami Klaviyo – inspirujcie się nawzajem, wymieniajcie spostrzeżeniami i pomagajcie szukać odpowiedzi na nurtujące Was pytania.

Odwiedź stronę społeczności

Partnerzy

Zatrudnij certyfikowanego eksperta Klaviyo, który pomoże Ci w konkretnym zadaniu lub w ciągłym zarządzaniu marketingiem.

Zatrudnij partnera

Pomoc

Uzyskaj wsparcie za pośrednictwem konta.

E-mail do zespołu ds. pomocy (konta w bezpłatnym okresie próbnym oraz konta płatne) Całodobowa dostępność

Czat/wirtualna pomoc
Dostępność różni się w–zależności od lokalizacji i typu planu.

Zaloguj się