Jak niestandardowo kodować strony zgody
Czego się dowiesz
Dowiedz się, jak włączać i korzystać z funkcji stron hostowanych Klaviyo, które umożliwiają niestandardowe kodowanie własnych stron preferencji, stron subskrybowanych i wycofać strony subskrypcji.
Ten artykuł jest przeznaczony dla programistów; Klaviyo nie oferuje obecnie usług pomagających w tworzeniu niestandardowego kodu, ani nie zapewnia pomocy 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.
Zanim zaczniesz
Przed skonfigurowaniem hostowanej strony włącz tę funkcję:
- Przejdź do Ustawień > Inne.
- Wybierz strony zgody z listy rozwijanej.
- W sekcji Niestandardowe strony hostowane przełącz przełącznik na Użyj niestandardowej dedykowanej domeny dla stron hostowanych.
Pamiętaj, że dostęp do tego ustawienia ma tylko konto z płatnym adresem plan, które przeszło weryfikację konta.
Utwórz niestandardową stronę zgody
- Przejdź do Ustawień > Inne.
- Kliknij opcję Hostowane strony.
- Obok pozycji Strony kliknij symbol +, aby dodać nową stronę.
- Nazwij tę stronę (np. wycofać subskrypcję.tmpl); Będziesz mógł użyć tego dla dowolnej ze swoich stron zgody, ale możesz utworzyć więcej niż jedną stronę, jeśli chcesz.
Nazwy hostowanych stron nie mogą zawierać spacji, ponieważ spowoduje to błąd. Unikaj spacji lub używaj podkreśleń, aby rozdzielić tytuły.
- Zaprojektuj stronę HTML zawierającą wybrane pola i funkcje. Przykładowe pola, które można wstawić na niestandardową stronę zgody, obejmują:
- Wybierz częstotliwość wysyłania wiadomości e-mail:
- Opcja wycofać subskrypcję
- Opcja otrzymywania wszystkich wiadomości e-mail
- Opcje częstotliwości dla biuletynu dziennego, tygodniowego, miesięcznego itp.
- Informacje, które można wykorzystać do targetowania i segment:
- Pole wyboru określające, czy użytkownik chce otrzymywać ogłoszenia o sprzedaży.
- Pole wyboru określające, czy użytkownik chce otrzymywać ogłoszenia o produktach.
- Pole wyboru określające, czy użytkownik chce aktualizacji bloga.
- Inna lista, do której użytkownik może chcieć dołączyć
- Wybierz częstotliwość wysyłania wiadomości e-mail:
Przykład kodu HTML dla strony zgody
Możesz użyć tego kodu w pliku wycofać subskrypcję.tmpl, aby uzyskać w pełni funkcjonalne strony zgody z preferencjami dotyczącymi typu i częstotliwości wiadomości e-mail:
<! DOCTYPE html>
< html lang="pl">
<head>
< meta charset="utf-8">
< meta http-equiv="X-UA-Compatible" content="IE=edge">
< meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Najnowszy skompilowany i zminimalizowany CSS -->
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<style type="text/css">
/* Rozmieść nieco treść */
body {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* Niestandardowy nagłówek strony */
.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;
}
lista-group-item etykieta {
font-weight: normal;
margin-top: 17px;
}
lista-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:aktywni {
text-decoration: none;
}
.panel-group .panel-title a:hover .text,
.panel-group .panel-title a:aktywni .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;
}
/* Niestandardowa stopka strony */ .footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Dostosuj kontener */ @media (min-width: 768px) { .container </style>
<!-- -->
<!-- -->
<!--[if lt IE 9]>
{
max-width: 730px;
}
}
/style !-- HTML5 shim i Respond.js dla IE8 obsługują elementy HTML5 i zapytania o media -- !-- OSTRZEŻENIE: Respond.js nie działa, jeśli przeglądasz stronę przez 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]-->
</head>
<body>
< div class="container">
< div class="header">
< img src="http://via.placeholder.com/300x75" />
<h1>e-mail 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>
/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"> e-mail 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' %}
{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}xml-ph-0031@d>
{% endif %}
</p>
</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="Promocje" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Promocje & Sprzedaż
</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 %} />
Najnowsze z bloga
</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"> Jak często chciałbyś otrzymywać od nas wiadomości?</label>
< div class="col-sm-9">
< div class="radio">
<label>
<!-- Wartość domyślna. -->
<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 %} />
Raz w miesiącu
</label>
</div>
</div>
</div>
< div <class="checkbox">
<label>
< input type="checkbox" name="$unsubscribe" value="true" />
span class="text"> wycofać subskrypcję me od wszystkich wiadomości e-mail.</span>
</label>
</div>
< div class="clearfix form-actions">
< div class="pull-right">
< button type="submit" class="btn btn-default btn-primary"> aktualizacja preferencji</button>
</div>
</div>
</form>
< footer class="footer">
<p>
© 2017 nazwa firmy - <a href="https://www.klaviyo.com" target="_blank"> polityka prywatności</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery (niezbędne dla wtyczek JavaScript Bootstrapa) -->
< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Najnowszy skompilowany i zminimalizowany 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.'
}
});
// przełączenie walidacji na podstawie wyboru.
$('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 hostowanej strony po przesłaniu (opcjonalnie)
Domyślnie po pomyślnym przesłaniu hostowanej strony (np. hostowanej strony preferencji) użytkownik zostanie przekierowany do jednego z dwóch miejsc:
- Jeśli poprosili o wycofanie subskrypcji, zostaną wysłani na domyślną stronę potwierdzenia wycofania subskrypcji Twojego konta.
- Jeśli użytkownik zaktualizował swój profil (lub zrobił cokolwiek, co nie jest żądaniem wycofania subskrypcji), zostanie wysłany na stronę potwierdzenia (powodzenia) domyślnych preferencji Twojego konta.
Jeśli użyłeś przykładowego HTML powyżej, jest to odzwierciedlone w treści <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ć, gdzie ktoś zostanie przekierowany po przesłaniu hostowanej strony, dostosuj linie value="..." do preferowanych adresów URL w kodzie HTML.
Dodaj niestandardowe zasoby do hostowanych stron (opcjonalnie)Dodaj niestandardowe zasoby do hostowanych stron (opcjonalnie)
Jeśli chcesz użyć własnego pliku CSS, pliku JS lub obrazów na hostowanej stronie, prześlij je, klikając symbol + obok opcji Zasoby i odwołując się do nich w kodzie źródłowym strony.
Użyj poniższego 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 niestandardowymi, tak aby wszystkie wiadomości e-mail domyślnie korzystały z tych niestandardowych stron. Alternatywnie możesz skonfigurować tylko 1 konkretną listę do korzystania z niestandardowych stron, tak aby tylko wiadomości e-mail wysyłane do tej listy korzystały z niestandardowych stron.
- Jeśli dostosowałeś strony zgody dla określonej listy, wszelkie wiadomości e-mail wysyłane do tej listy będą korzystać z tych unikalnych stron zgody.
- Każda lista, dla której nie dostosowałeś unikalnych stron zgody, będzie korzystać z domyślnych stron zgody Twojego konta. Ponadto wszelkie wiadomości e-mail, które NIE są wysyłane na określoną listę, w tym wyzwalane metryką sekwencje kampanie e-mailowe wysyłane na adres segment lub osobiste wiadomości e-mail, będą również 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 konta (np. stronę preferencji, stronę subskrybować lub stronę wycofać subskrypcję e-mail) stronami niestandardowymi, wykonaj następujące kroki:
- Kliknij nazwę swojej firmy w lewym dolnym rogu strony Klaviyo.
- Wybierz Ustawienia.
- Wybierz opcję Inne u góry.
- Kliknij menu rozwijane z trzema kropkami na stronie zgody, którą chcesz zastąpić plan i wybierz opcję Użyj strony hostowanej.
- W wyświetlonym oknie dialogowym wybierz plik strony niestandardowej i kliknij przycisk Zapisz.
Jeśli chcesz użyć niestandardowej strony dla sekwencji e-mail lub kampanie wysyłane do segment, będziesz musiał przełączyć domyślne strony zgody na koncie, aby korzystać z niestandardowych stron. Postępuj zgodnie z tym samym procesem, co powyżej, aby zastąpić domyślne strony zgody stronami niestandardowymi.
Użyj niestandardowych stron zgody dla listy
Będziesz musiał skonfigurować każdą indywidualną listę, dla której chcesz użyć niestandardowej strony zamiast domyślnych stron zgody.
- Przejdź do listy, którą chcesz połączyć ze stroną niestandardową.
- Kliknij kartę subskrybować & Strony preferencji, aby wyświetlić wszystkie edytowalne strony zgody dla tej listy.
- Pod stroną zgody, którą chcesz zastąpić stroną niestandardową, kliknij menu rozwijane z trzema kropkami i wybierz opcję Użyj strony hostowanej.
Pamiętaj, że jeśli chcesz, możesz użyć hostowanej strony dla wszystkich stron zgody.
- W wyświetlonym oknie dialogowym wybierz plik strony niestandardowej i kliknij przycisk Zapisz.
W wiadomości e-mail nadal powinieneś używać standardowego Klaviyo wycofać subskrypcję i zarządzać preferencjami znacznika (tj. {% unsubscribe %} i {% manage_preferences %}). Znaczniki te pojawią się jako linki w Twojej wiadomości e-mail na żywo i automatycznie przeniosą odbiorców na Twoje niestandardowe strony.
Najczęściej zadawane pytania dotyczące hostowanych stron
Czy muszę dodać jakiś JavaScript do mojej strony, aby formularz został przesłany poprawnie?
Ponieważ twoje niestandardowe formularze będą znajdować się wewnątrz hostowanej strony, nie musisz dodawać żadnych dodatkowych skryptów JavaScript ani adresu URL akcji do formularza <> ,<form> aby poprawnie go przesłać. Tak długo, jak hostowana strona jest odwiedzana z wiadomości e-mail wysłanej przez Klaviyo, automatycznie powiąże powrót do właściwego kontaktu.
Czy ta strona musi być w HTML?
Ta strona musi być w formacie HTML. Możesz dołączyć dodatkowe obrazy, arkusze stylów itp., łącząc się z nimi lub dodając folder z dołączonymi plikami.
Czy Klaviyo może mi pomóc w stworzeniu niestandardowej strony?
Klaviyo nie oferuje obecnie usług pomagających w tworzeniu niestandardowego kodu, ani nie zapewnia pomocy w rozwiązywaniu problemów z niestandardowym kodem. Funkcja Hosted Pages jest przeznaczona dla programistów lub marketingowców znających się na kodzie.
Dowiedz się więcej o możliwościach dostosowywania za pomocą wbudowanych stron zgody Klaviyo w artykule Pierwsze kroki ze stronami zgody.