Шпаргалка для email разработчика

https://github.com/dudeonthehorse/kilogram — template engine and sweet tools for a fast and clean email development

http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries—cms-23919 — библия адаптивной верстки писем

http://templates.mailchimp.com/development/css/client-specific-styles/ — ряд обязательных костылей для любого письма

https://backgrounds.cm — когда надо быстро сварганить фон для аутлука

https://buttons.cm — конструктор кнопок. Тем не менее, он мне очень не нравится, и у меня в планах написать свой.

http://inliner.cm — быстрый инлайнер, который всегда под рукой. Я ссылку на него всегда даю тем клиентам, которым на руки отдаю незаинлайненный код. Чтобы им было проще работать с кодом.

http://code.jmweb.net/hamburger-in-email/ — пример письма с гамбургерным мобильным меню на тот случай, если мы все же верстаем письма на медиазапросах.

http://stackoverflow.com/questions/30481979/adding-subscribers-to-a-list-using-mailchimps-api-v3 — добавление подписчика в список в мейлчимпе через API 3.0

http://milligram.github.io — документация по Milligram фреймворку. Там можно подчерпнуть уйму полезных приемов при создании собственных шаблонов.

https://mozilla.github.io/nunjucks/templating.html — документация по nunjucks шалонизатору.

https://medium.freecodecamp.com/designing-a-styleguide-elements-that-go-into-functional-and-beautiful-products-ff1621e00a0e#.8y2n06sgm — руководство по созданию гайдлайнов. Дизайнерам рекомендуется.

Структурированные данные в письмах

Вы наверняка замечали что некоторые письма о забронированных билетах на самолет или гостинице Gmail и другие почтовые клиенты, сами распознают, добавляя событие в календарь и всячески напоминая о забронированных услугах. Почтовым клиентам можно сообщать о содержимом письма, для лучше интеграции с другими приложениями и тем самым повышая положительные впечатления клиента. Итак, пару слов о структурированных данных в письмах.

В сервисе Google Search Console, есть инструмент Email Markup Tester (Инструмент проверки разметки в письмах). Так-же есть Мастер разметки структурированных данных.

Как разметить шаблон сообщения электронной почты

На момент написания статьи, Gmail  умеет распознавать письма, которые размечены в соответствии с schema.org и содержат данные следующих типов:

  • Заказ билетов на мероприятия
  • Заказ авиабилетов
  • Заказ мест в ресторанах
  • Заказ гостиничных номеров
  • Резервирование проката автомобилей

Больше информации про испольование структурированных данных schema.org в разметке электронных писем можно прочесть в Email Markup Gmail

Так-же можно форматировать письма с отменой брони или изменением в брони. Подробнее в документации Google Schemas

Пример разметки письма с бронированием отеля (Hotel Reservations)

<div itemscope itemtype="http://schema.org/LodgingReservation">
  <meta itemprop="reservationNumber" content="abc456"/>
  <link itemprop="reservationStatus" href="http://schema.org/Confirmed"/>
  <div itemprop="underName" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="John Smith"/>
  </div>
  <div itemprop="reservationFor" itemscope itemtype="http://schema.org/LodgingBusiness">
    <meta itemprop="name" content="Hilton San Francisco Union Square"/>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <meta itemprop="streetAddress" content="333 O'Farrell St"/>
      <meta itemprop="addressLocality" content="San Francisco"/>
      <meta itemprop="addressRegion" content="CA"/>
      <meta itemprop="postalCode" content="94102"/>
      <meta itemprop="addressCountry" content="US"/>
    </div>
    <meta itemprop="telephone" content="415-771-1400"/>
  </div>
  <meta itemprop="checkinDate" content="2027-04-11T16:00:00-08:00"/>
  <meta itemprop="checkoutDate" content="2027-04-13T11:00:00-08:00"/>
</div>

Gmail — язык поиска и групповых операций

В почте иногда требуется удалить или найти письма по определенным параметрам. Существует достаточно понятный язык для подобного поиска. Для примера, чтоб удалить большое количество писем — можно выполнить поиск с критерием. Появится список подходящих цепочек. Нажать флажок выделения всех писем на странице. Появится ниже надпись «Все … цепочки на этой странице выбраны». Рядом будет ссылка «Выберите все цепочки, удовлетворяющие этому критерию поиска». Нажать и удалить.

Итак, не полный список примеров которые можно ввести в поисковую строку:

  • before:2010/01/01 — покажет все письма, которые были получены до 01.01.2010
  • larger:5m — найдёт файлы, которые больше, чем 5 Мбайт
  • older_than:2y — позволяет найти все письма, которые старше двух лет
  • filename:mp3 или filename:mov — сможете увидеть все письма, в которых присутствуют такие файлы (музыка и видео)

Подробнее про Поисковые операторы в Gmail

«Ранее вы смотрели»

Технология вывода списка туров, ранее просмотренных покупателем.

Зачем:Повышение лояльности к ресурсу, повышение воронки конверсии на уровне перехода от просмотра к добавлению в корзину.

Возможности:

  • использование кода для вставки в шаблон;
  • изменение количества отображаемых туров;
  • редактирование шаблона товаров;
  • работает на основе сессий;
  • работа с куками
  • новые просмотренные товары добавляются в начало списка.

Технология:

  1. Установка куки с идентификатором покупателя
  2. Сохранение целевых страниц в БД с привязкой к идентификатору в куки
  3. Группировка данных с целевых страниц (нужно заранее определить что группировать, например только направления Москва-Турция, или с точностью до даты или до отеля) оптимальным считаю хранить название отеля, даты тура, срок пребывания, кол-во туристов.
  4. Показ в виде сниппетов на нужных страницах