Инструкция
Как создать страницу подтверждения отписки на нескольких языках
Готовый код и инструкция по настройке
Что такое страница подтверждения отписки
Страница отписки — эта веб-страница, которую подписчик видит после нажатия на ссылку «отписаться» в письме.
Важно! Когда пользователь кликает на кнопку «отписаться» в письме, то он автоматически уже отписывается от получения следующих рассылок.
Отписывать в один клик всегда лучше, чем переспрашивать или заставлять пользователя логиниться — всё это снижает негатив. Если клиент не сможет быстро отписаться, то он может отправить письмо в спам, что приведёт к снижении репутации домена.
На странице подтверждения отписки пользователю предлагается выбрать варианты почему именно он отписался.
Совет: если клиент отписался случайно, то лучше на этой же странице дать ему возможность снова подписаться на рассылку.
Вот как выглядит стандартная страница отписки в Mailganer:
Важно! Когда пользователь кликает на кнопку «отписаться» в письме, то он автоматически уже отписывается от получения следующих рассылок.
Отписывать в один клик всегда лучше, чем переспрашивать или заставлять пользователя логиниться — всё это снижает негатив. Если клиент не сможет быстро отписаться, то он может отправить письмо в спам, что приведёт к снижении репутации домена.
На странице подтверждения отписки пользователю предлагается выбрать варианты почему именно он отписался.
Совет: если клиент отписался случайно, то лучше на этой же странице дать ему возможность снова подписаться на рассылку.
Вот как выглядит стандартная страница отписки в Mailganer:
Задизайньте свою собственную страницу
И зачем нужно дать возможность подписаться снова
В блочном и визуальном редакторе Mailganer
Как добавить дополнительный язык на страницу отписки
Шаг 1. В разделе редактирования списка, перейдите на вкладку «Страницы отписки/подписки».
Шаг 2. В редакторе справа нажмите на кнопку «Источник».
Шаг 2. В редакторе справа нажмите на кнопку «Источник».
Шаг 3. В открывшемся окне замените весь код на тот, что ниже:
<html>
<head>
<title></title>
<style type="text/css">@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&subset=latin,cyrillic);
html {
background-color: #fcfcfc;
}
form {
max-width: 550px;
margin: 0 auto;
}
.h1, p, label, .button-link {
color: #333333;
font-family: 'Roboto', Arial, sans-serif;
text-align: left;
}
.h1 {
font-size: 28px;
font-weight: 700;
line-height: 34px;
margin-bottom: 10px;
}
p {
margin: 10px 0 0 0;
}
p, label {
font-size: 18px;
line-height: 28px;
}
.label-wrapper {
display: block;
margin-top: 4px;
}
.button-link {
background-color: #333333;
border: 0;
border-bottom: 2px solid rgba(0, 0, 0, .2);
border-radius: 4px;
color: #fff !important;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 600;
line-height: 17px;
padding: 12px 25px 10px;
text-decoration: none;
text-shadow: none;
letter-spacing: 0.4px;
margin-top: 15px;
}
.button-wrapper {
margin-bottom: 25px;
}
.button-link:hover {
background-color: #000000;
}
.button-link:focus {
outline: none;
}
a.button-link {
background-color: #0783d9;
}
a.button-link:hover {
background-color: #0564a8;
}
label {
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
border-radius: 100%;
position: absolute;
left: 0;
bottom: 1px;
background-color: #d8d8d8;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #333333;
font-size: 41px;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<form method="post">
<div class="h1" id="h1">Вы отписались от рассылки</div>
<p id="text">{{ email }} отписан от рассылки. Пожалуйста, укажите, причину отписки (не обязательно):</p>
<div class="label-wrapper"><input id="type-1" name="type_unsubscribe" type="radio" value="1" /><label for="type-1" id="not-interested">Не интересно</label></div>
<div class="label-wrapper"><input id="type-2" name="type_unsubscribe" type="radio" value="2" /><label for="type-2" id="not-subscribed">Не подписывался</label></div>
<div class="label-wrapper"><input id="type-3" name="type_unsubscribe" type="radio" value="3" /><label for="type-3" id="too-often">Письма приходят часто</label></div>
<div class="label-wrapper"><input id="type-4" name="type_unsubscribe" type="radio" value="4" /><label for="type-4" id="not-relevant">Более не актуально</label></div>
<div class="label-wrapper"><input id="type-5" name="type_unsubscribe" type="radio" value="5" /><label for="type-5" id="spam">Это спам</label></div>
<div class="button-wrapper"><button class="button-link" id="button" style="">Сохранить</button>
<p id="thank-you">{% if save %}Спасибо, мы учли ваш ответ{% endif %}</p>
</div>
<p id="unsubscribe-mistake">Отписались случайно? Всегда можете восстановить подписку.</p>
<a class="button-link" href="{{ confirmUrl }}" id="restore">Восстановить подписку</a></form>
<script>
const button = document.getElementById('button');
const h1 = document.getElementById('h1');
const text = document.getElementById('text');
const type_1 = document.getElementById('not-interested');
const type_2 = document.getElementById('not-subscribed');
const type_3 = document.getElementById('too-often');
const type_4 = document.getElementById('not-relevant');
const type_5 = document.getElementById('spam');
const thank_you = document.getElementById('thank-you');
const unsubscribe_mistake = document.getElementById('unsubscribe-mistake');
const restore = document.getElementById('restore');
const params = new URLSearchParams(location.search);
const lang = params.get('lang')
if (lang === 'eng') {
button.innerText = 'Submit'
h1.innerText = 'You have successfully unsubscribed'
text.innerText = '{{ email }} was unsubscribed. Please select the unsubscribe reason (optional):'
type_1.innerText = 'Not interested'
type_2.innerText = 'Have not subscribed'
type_3.innerText = 'Receive emails to often'
type_4.innerText = 'No longer relevant'
type_5.innerText = 'This is spam'
thank_you.innerText = '{% if save %}Thank you, we have saved your answer{% endif %}'
unsubscribe_mistake.innerText = 'If you unsubscribed by mistake you can always restore your subscription'
restore.innerText = 'Restore subscription'
restore.href = '{{ confirmUrl }}?lang=eng'
}
</script></body>
</html>
Код для страницы повторной подписки:
<html>
<head>
<title></title>
<style type="text/css">@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&subset=latin,cyrillic);
html {
background-color: #fcfcfc;
}
form {
max-width: 550px;
margin: 0 auto;
}
.h1, p, label, .button-link {
color: #333333;
font-family: 'Roboto', Arial, sans-serif;
text-align: left;
}
.h1 {
font-size: 28px;
font-weight: 700;
line-height: 34px;
margin-bottom: 10px;
}
p {
margin: 10px 0 0 0;
}
p, label {
font-size: 18px;
line-height: 28px;
}
.label-wrapper {
display: block;
margin-top: 4px;
}
.button-link {
background-color: #333333;
border: 0;
border-bottom: 2px solid rgba(0, 0, 0, .2);
border-radius: 4px;
color: #fff !important;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 600;
line-height: 17px;
padding: 12px 25px 10px;
text-decoration: none;
text-shadow: none;
letter-spacing: 0.4px;
margin-top: 15px;
}
.button-wrapper {
margin-bottom: 25px;
}
.button-link:hover {
background-color: #000000;
}
.button-link:focus {
outline: none;
}
a.button-link {
background-color: #0783d9;
}
a.button-link:hover {
background-color: #0564a8;
}
label {
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
border-radius: 100%;
position: absolute;
left: 0;
bottom: 1px;
background-color: #d8d8d8;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #333333;
font-size: 41px;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<form method="post">
<div class="h1" id="h1">Подписка подтверждена</div>
<p id="text">{{ email }} подписан на рассылку от Зуйков и партнеры</p>
<a class="button-link" href="https://zuykov.com" id="button">Перейти на сайт</a></form>
<script>
const button = document.getElementById('button');
const h1 = document.getElementById('h1');
const text = document.getElementById('text');
const params = new URLSearchParams(location.search);
const lang = params.get('lang')
if (lang === 'eng') {
button.innerText = 'Go to site'
h1.innerText = 'Subscription confirmed'
text.innerText = '{{ email }} was subscribed'
}
</script></body>
</html>
Шаг 4. Задайте собственные переводы для каждого текст в самом низу вставленного кода внутри тэга <script>.
Как подписчику показать ссылку отписки на английском языке
Теперь, чтобы подписчики видели ссылку подписки на нужном языке, вам нужно к конструкции {{unsubscribeUrl}} добавить параметр ?lang=eng, чтобы получилось так:
{{unsubscribeUrl}}?lang=eng
Именно так нужно вставлять макрос ссылки отписки в письмо для тех подписчиков, которым нужно отобразить страницу на английском.
{{unsubscribeUrl}}?lang=eng
Именно так нужно вставлять макрос ссылки отписки в письмо для тех подписчиков, которым нужно отобразить страницу на английском.
Страница отписки на английском языке готова!