Читаем без скачивания E-mail маркетинг для интернет‑магазина. Инструкция по внедрению - Алексей Ефимов

2.2. Эскиз

• Размер: по ширине примерно 450 px, по высоте произвольно.

• Граница: нет, просто контраст с затемненным фоном страницы, скругленные углы (можно попробовать тень).

• Иконка в левом верхнем углу: подарок.

• Заголовок: Дарим 300 рублей!

• Поле: Ваш E-mail (тонко серым шрифтом).

• Кнопка: Получить! (оранжевая, шрифт белый – либо свой вариант).

• Текст маркированным списком.

–

Получите подарочный купон по электронной почте

–

Воспользуйтесь скидкой при заказе от 2000 рублей

– Узнавайте о наших акциях и новинках первыми!

2.3. Thank you page

Сообщение, которое демонстрируется пользователю после того, как он ввел e-mail и нажал Получить.

• Эскиз:

• Размер: такой же.

• Граница: такая же.

• Вся верхняя часть та же.

• Вместо поля для подписки, кнопки и списка крупный текст:

Мы отправили подарок на Вашу электронную почту. Проверяйте:-)

2.4. Форма с ошибками

2.4.1. То же, что и в форме для «подвала» сайта (1.4.1, 1.4.2)

2.4.2. Если ввел адрес, который уже есть в базе

• Текст:

Этот адрес уже подписан на нашу рассылку:-).

• Расположение, вид – решить самостоятельно.

2.5. В результате предоставить исходники в psd

2.5.1. Форма подписки

2.5.2. Thank you page

2.5.3. Формы с ошибками (2.4.1, 2.4.2)

2.5.4. Произвольная страница сайта – общий вид с формой подписки по центру и затемненным фоном (в png)

3. Форма подписки на отдельной странице

3.1. Расположение

Форма будет размещена на отдельной странице сайта – в обрамлении типовых элементов навигации («шапка», горизонтальное меню, футер) вместе с кратким описанием рассылки:

3.2. Эскиз

• Предложение: Раз или два в неделю Вы будете получать от нас эксклюзивные предложения, информацию об актуальных акциях, новинках и популярных товарах.

• Поле для ввода данных: Введите Ваш e-mail.

• Кнопка: Подписаться.

3.3. Thank you page

Сообщение, которое демонстрируется пользователю после того, как он ввел e-mail и нажал Подписаться.

• Предложение остается.

• Поле для ввода e-mail и кнопка «Подписаться» исчезают.

• На их месте текст: Спасибо! Будем на связи:-).

• Возможно, только поменять стиль и цвет текста (чтобы был заметнее, но не слишком яркий).

3.4. Форма с ошибками

3.4.1. То же, что и в форме для «подвала» сайта (1.4.1, 1.4.2)

3.5. В результате предоставить исходники в psd:

3.5.1. Страницу подписки

3.5.2. Thank you page

3.5.3. Формы с ошибками (3.4.1)

3.5.4. Общий вид страницы в обрамлении элементов навигации сайта (в png)

Б: ТЗ на внедрение форм подписки

Задача

Сделать формы подписки для «подвала» сайта, всплывающего окна и на отдельной странице.

1. Форма подписки для «подвала» сайта

[В качестве иллюстрации – макет из задачи А: 1.5.1]

1.1. Расположение формы на сайте: в нижнем правом углу

[В качестве иллюстрации – макет из задачи А: 1.5.4]

1.2. Исходники дизайна для верстки в psd: ссылка на скачивание макетов

1.3. Взаимодействие с пользователем

1.3.1. Пользователь вводит значение в поле E-mail

1.3.2. Нажимает Подписаться

1.3.3. Видит Thank you page на том же самом месте:

[В качестве иллюстрации – макет из задачи А: 1.5.2]

1.3.4. Если поле E-mail при нажатии кнопки было пустым – форма выдает сообщение об ошибке:

Пожалуйста, введите Ваш e-mail

1.3.5. Если в поле E-mail при нажатии кнопки не было «@» или «.» – форма выдает сообщение об ошибке:

Пожалуйста, введите корректный e-mail

[В качестве иллюстрации – макеты из задачи А: 1.5.3]

1.3.6. Если в поле E-mail был введен e-mail, который уже есть в базе данных, пользователю все равно демонстрируется Thank you page

1.3.7. Все события могут происходить многократно

1.4. Взаимодействие с рассылочным сервисом:

Порядок взаимодействия с рассылочным сервисом описан в отдельной задаче:

ссылка на ТЗ на синхронизацию.

2. Всплывающая (pop-up) форма подписки

[В качестве иллюстрации – макет из задачи А: 2.5.1]

Пример готовой формы: ссылка на сайт, где действует pop-up-форма.

2.1. Расположение формы: по центру экрана

[В качестве иллюстрации – макет из задачи А: 2.5.4]

2.2. Исходники дизайна для верстки в psd: ссылка на скачивание макетов

2.3. Взаимодействие с пользователем

2.3.1. Пользователь вводит E-mail в соответствующее поле

2.3.2. Нажимает кнопку Получить

2.3.3. Видит Thank you page на том же самом месте:

[В качестве иллюстрации – макет из задачи А: 2.5.2]

2.3.4. Для подписавшегося пользователя генерируется специальный промокод:

• уникальный для каждого e-mail;

• произвольный набор латинских букв и/или цифр (например, 000–000–000);

• размер скидки: 300 рублей;

• условия предоставления: min чек 2000 рублей;

• скидка может быть использована 1 раз;

• срок действия: 1 месяц с момента генерации.

2.3.5. На e-mail подписавшегося пользователя через админку сайта сразу высылается письмо с обещанным бонусом

• E-mail отправителя: newsletter @ shop-example. ru

• Имя отправителя: Shop-example

• Тема (Subject line): Ваш подарочный купон доставлен!

• Тело письма: ссылка на скачивание письма в html

(Вместо {XXХ-XXX–XXX} в теле письма подставлять сгенерированный промокод.)

2.3.6. Если поле при нажатии кнопки было пустым – форма выдает сообщение об ошибке:

Пожалуйста, введите Ваш e-mail

2.3.7. Если в поле при нажатии кнопки не было «@» или «.» – форма выдает сообщение:

Пожалуйста, введите корректный e-mail

2.3.8. Если в поле введен адрес, который есть в базе данных, форма выдает сообщение:

Этот адрес уже подписан на нашу рассылку:-)

[В качестве иллюстрации – макеты из задачи А: 2.5.3]

2.3.9. События могут происходить многократно

2.3.10. Если подписчик НЕ воспользовался промокодом, то за 3 дня до окончания срока действия бонуса на его e-mail через админку сайта высылается напоминание

• Время отправки: 8.00 утра по Мск