Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку

06.07.21 ИТ / Разное 5977

На сайте зачастую размещают форму с кнопкой подписаться на новости сайта. Это помогает создавать базу подписчиков и иметь последующие контакты с собранной аудиторией, например, на сайте вышла новая статья – подписчикам высылается уведомление, и они могут перейти по ссылке для прочтения статьи на сайте. Все собранные адреса хранятся в специальной базе подписчиков.

Как сделать кнопку подписаться на сайте? Для этого достаточно сверстать простую форму и разместить ее в любом блоке сайта. Форма может содержать поле для ввода контактных данных пользователя, кнопку подтверждения подписки и защиту от роботов. Пример:

<form>
	<input name="email" type="email" placeholder="Ваш email" required>
	<input name="save" type="checkbox" class="hidden">
	<input type="submit" value="ОК">
</form>

После нажатия на кнопку, все данные отправляются при помощи AJAX на сервер:

$(document).ready(function() {
	$('.subscriber form').submit(function (e) {
		e.preventDefault();		
		var parent = $(this).parent();
		
		$.post('/api/subscribe-email', $(this).serialize(), function(data) {
			var color = data.length >= 10 ? '#0b0' : '#b00';
			$(parent).css('color', color);
			$(parent).html(data);
		});
	});
});

Из кода видно, что пользователю будет показано, успешна ли подписка или нет – будет выведено сообщение красным или зеленым цветом. Данные отправляются на сервер по указанному адресу, где происходит внесение указанного Email в базу данных. Код элементарный, можно использовать временное хранилище в виде сериализованного массива.

Важно также предусмотреть возможность отписки от рассылки. Для этого у пользователя должен быть секретный ключ (строка случайных символов), который должен быть сгенерирован и сохранен вместе с Email в момент подписки. При переходе по ссылке отписаться, данные передаются в параметрах GET-запроса – сервер проверяет совпадение ключа и удаляет Email из базы, если все правильно. Пример ссылки:

<a href="https://example.com/unsubscribe/email?email=example@example.com&token=12345">Отписаться</a>

Когда база собрана, можно приступать к рассылке. Автоматическая рассылка может быть реализована при возникновении какого-либо события на сайте. Например, на сайте добавлена новая статья, значит в коде, отвечающем за добавление статьи можно вызывать код, отвечающий за рассылку по всей базе – происходит загрузка всех адресов и отправка им подготовленного письма с ссылкой на материал.