CSS Agile — бюджетная agile-технология

Антон Чирков

технический консультант EMAILMATRIX, основатель Ampier

О персонализации в письмах сказано уже немало: о том, как важно строить диалог с пользователем и отправлять контент, интересный именно ему. Сравнительно недавно появилась технология Agile, которая позволяет динамически менять изображения в письмах, исходя из заголовка запроса и передаваемых данных в GET-запросе — CSS Agile.

Классическое применение — это отображение креатива/изображения исходя из того, с какого устройства зашёл пользователь. То есть вместо двух кнопок — AppStore и Google Play — отображать только одну, соответствующую устройству пользователя. Или же генерирование счётчика обратного отсчёта исходя из реального времени («До начала акции осталось 5 дней 12 часов и 32 минуты») и т. д.

Также, анализируя заголовок запроса, можно примерно оценить местоположение пользователя, что тоже даёт простор для фантазии: отобразить прогноз погоды на завтра и вывести подборку товаров исходя из него; отобразить ближайшие кафе, магазины и другие точки.

Но у технологии есть несколько существенных недостатков: классическое использование agile — весьма дорогое удовольствие, и в рамках готовых сервисов есть возможность использовать только наиболее типовые решения. К тому же данная технология позволяет динамически формировать только изображения.

Предлагаю рассмотреть более простой и дешёвый вариант — CSS Agile. Основной принцип здесь тот же: делаем запрос на удалённый сервер, он возвращает необходимые данные, которые уже выводятся в письме в нужном нам виде.

Главным недостатком метода является то, что поддерживается он ограниченным числом почтовых клиентов и веб-интерфейсов. Главным образом это:

• Mail iOS (стандартный почтовый клиент),
• Mail Android (стандартный почтовый клиент),
• Mozilla Thunderbird,
• Apple Mail.

Если же пользователь открыл письмо через другой почтовый клиент, то он увидит некоторый контент по умолчанию.

Реализация Agile технологии

Первоначально разрабатываем самое обычное письмо, например, добавив туда последний пост из официального сообщества VK, вёрстка будет иметь примерно следующий вид:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr><td align="center" bgcolor="#dee5eb">
		<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
		<table width="93%" border="0" cellspacing="0" cellpadding="0">
			<tr><td align="left" valign="middle" width="60">
				<img src="img/vk.png" width="44" height="25" alt="" border="0" style="display: block;" />
			</td><td valign="middle" align="left">
				<div style="line-height:14px;">
				<strong style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#6383a8;" id="agile_css_author">
					Лаборатория емейл-маркетинга
				</strong>
				</div>
			</td></tr>
		</table>
		<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
	</td></tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr><td align="center" style="border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#dee5eb;border-left-width:2px;border-left-style:solid;border-left-color:#dee5eb;border-right-width:2px;border-right-style:solid;border-right-color:#dee5eb;">
		<!-- padding --><div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
		<table width="93%" border="0" cellspacing="0" cellpadding="0">
			<tr><td valign="middle" align="left">
				<div style="line-height:14px;">
				<span id="agile_css_mess" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000;">
					Учитесь у TripAdvisor! Емейл-кампании продуманные до мелочей.
					Преимущества емейл-кампаний от TripAdvisor							</span>
				</div>
			</td></tr>
		</table>
		<!-- padding --><div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
	</td></tr>
</table>

Для блоков, где необходимо обновлять контент, укажем уникальные id, в данном примере это #agile_css_author и #agile_css_mess.
И реализуем запрос динамически формируемого CSS-файла:

<link rel="stylesheet" href="http://site/agile/styles.php" type="text/css" />

Для подстановки желаемого контента добавим следующие стилевые свойства:

#agile_css_mess, #agile_css_author{
	font-size: 0px !important;
	line-height: 0px !important;
}
#agile_css_author:before{
	content: 'Emailmatrix';
	font-size: 13px;
	line-height: 16px;
}
#agile_css_mess:before{
	content: 'рост мобильных продаж. Кейс "Эльдорадо" о том, как важно делать mobile friendly интерфейс сайта.';
	font-size: 12px;
	line-height: 16px;
}

Для формирования желаемого контента в письме можно парсить данные и вставлять их в соответствующие стилевые свойства селекторов. Если почтовый клиент пользователя поддерживает работу с псевдоэлементами и корректно интерпретирует подключение внешнего CSS, то он сможет увидеть актуальный или персонализированный контент, который вы сформируете в момент запроса, в противном случае он увидит обычное письмо с контентом, который был добавлен на этапе вёрстки.

Данный приём имеет смысл использовать, если как минимум треть ваших подписчиков открывают письма с мобильных устройств. И тогда пользователи стандартных приложений в момент открытия письма будут запрашивать стилевой файл, в котором содержится актуальный контент — это могут быть как записи из ваших корпоративных аккаунтов в соцсетях (Тwitter, VK, Facebook, Instagram, Pinterest), так и любые другие данные, которые могут потребовать актуализации, — курсы валют, стоимость товаров или услуг и т. д.