Все знают, как сделать рассылку. Многие умеют создавать триггерные цепочки. Кто-то умеет настроить рассылку из RSS-ленты блога. Нам пришлось закопаться глубже, потому что мы хотели, чтобы наша рассылка была не простой, а красивой и детальной. Ведь она делается из интересного блога, на который мы тоже потратили немало сил.

За каждую детальку в простом на вид письме пришлось побороться с этой симпатичной обезьянкой. Все получилось. Рассказываем — как.

MailСhimp — англоязычный и иногда нелогичный в интерфейсе сервис. Но он столько всего умеет и настолько популярен, что для него написали дотошные инструкции о доставке контента до читателей всеми возможными способами.

Мы для рассылок блога компании PromoPult также выбрали MailСhimp. Одна из фич MailСhimp — автокампании. Можно запланировать регулярные рассылки, отдельные письма, настроить приветственные письма и много всего.

Эта история — про настройку авторассылки постов из блога. Дайджест свежих материалов в почту подписчика один раз в неделю.

Стандартный вариант для авторассылки и почему он нам не подошел

У самого MailСhimp есть прекрасная документация по любым функциям, и конкретно об этом тоже есть: Share Your Blog Posts with Mailchimp. Переводы на русский язык тоже найдутся, разной степени адекватности.

Кратко, что нужно, чтобы сделать авторассылку:

1. Создать отдельную RSS-ленту для MailChimp (или даже не создавать, а использовать стандартную ленту).
2. Создать кампанию, указать источник, настроить условия отправки.
3. Создать и выбрать шаблон.
4. Готово. Вы — восхитительны!

Что не устроило нас — какие-то собственные вещи добавить просто невозможно.

Есть базовые данные из RSS-ленты, которые прекрасно понимает MailСhimp:

• Базовая информация о ленте (название, ссылка, описание, дата формирования или обновления ленты) — *|RSSFEED|*.
• Ссылка на отдельный пост — тег *|RSSFEED:URL|*, смотрит на <link> внутри <item> (здесь и далее).
• Заголовок отдельного поста — тег *|RSSITEM:TITLE|*, смотрит на <title>.
• Дата публикации отдельного поста — тег *|RSSITEM:DATE|*, смотрите на <pubDate>.
• Текстовый анонс отдельного поста — тег *|RSSITEM:CONTENT|*, смотрите на <description>, если этого тега внутри <item> нет — MailChimp смотрит на <content:encoded>. Внутри можно использовать HTML-теги.
  
• Полное содержание отдельного поста — тег *|RSSITEM:CONTENT_FULL|*, смотрит на <content:encoded>.
• Изображение поста, часто — превью (миниатюра — в терминах WordPress) — тег *|RSSITEM:IMAGE|*, смотрит на <media:content> и не забудьте про дополнительные теги и атрибуты для медиа-вложений: возрастные маркировки, информация о самом файле и проч.

А у нас есть дополнительные штуки у отдельного поста:

• Счётчик комментариев;
• Счётчик просмотров;
• Счётчик лайков;
• Дату публикации поста хочется показывать в человеческом формате: во-первых, на русском языке, со склонениями и если пост опубликован в текущем году — не показывать год публикации (сейчас в блоге так всё и работает, в письмах хочется такого же внимания к деталям);
• Отдельная кастомная обложка поста, до которой нужно как-то достучаться;
• Категория с ссылкой на все посты из категории.

И в обычную RSS-ленту такое не засунуть — нет соответствующих тегов. Кастомные же теги MailСhimp не понимает и не стоит его винить в этом. Нужно искать решение, которое устроит всех и не сломается.

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

Карточка поста блога PromoPult в еженедельном дайджесте

Как мы решили задачу

Создание RSS-ленты

Первым делом важно создать отдельную RSS-ленту для MailChimp. В блоге PromoPult уже есть несколько подобных лент: для Яндекс.Дзена и для Турбо-страниц.

Создать новую ленту можно через add_feed(). Вот такой код в файле функций темы:

functions.php:

/* start Добавляем ленту для рассылки постов через MailChimp */
  add_action( 'init', 'customRSSforMC' );
  function customRSSforMC() {
    add_feed( 'mchimp', 'customRSSforMCFunc' );
  }
  function customRSSforMCFunc() {
    get_template_part( 'rss', 'mchimp' );
  }
/* end Добавляем ленту для рассылки постов через MailChimp */

В строке №7 get_template_part( 'rss', 'mchimp' ); — указывает на то, что шаблон для ленты лежит в корне папки темы и называется rss-zen.php.

После создания файла и добавления функции нужно зайти в админку WordPress, настройки ЧПУ: «Консоль > Настройки > Постоянные ссылки» и нажать кнопку «Сохранить изменения», чтобы WordPress обновил настройки урлов и по заданному /feed/URL в первом параметре строки №4 открывалась новая RSS-лента.

Сделать это нужно один раз при создании ленты.

Смотрите наш пример: https://blog.promopult.ru/feed/mchimp

Что внутри ленты

Внутри самой ленты — обычный цикл постов WordPress: query_posts(). Это позволяет выбирать и фильтровать посты очень гибко: как если бы вы настраивали отдельные категории, страницы с выборками, архивами и всем, что нужно для подборок материалов в WordPress.

Но перед тем как прийти к идеальному решению задачи — было несколько попыток запихнуть важные для письма данные внутрь стандартных конструкций RSS-лент и использовать их в MailChimp.

Например, был такой вариант для счётчика комментов:

<item>
    [...]
  <title><?php the_title_rss(); ?></title>
  <link><?php the_permalink_rss(); ?>?utm_source=newsletter</link>
    
    // если комментариев больше или равно 1, то показать количество
    <?php if (get_comments_number() >= 1) { ?>
      <commentsCounter><?php comments_number('0', '1', '%'); ?></commentsCounter>
    <?php } ?>
  
    [...]
</item>

Такой вариант, конечно, срабатывает в плане данных: всё, что нужно, получается и корректно выводится. Но MailChimp не понимает тега <commentsCounter>, как и любых других нестандартных тегов.

Так же, например, с датами. У MailChimp есть свой тег: *|RSSITEM:DATE:d/m/y|*, и ему можно передавать опции форматирования даты. Но, к сожалению, в письме это выглядит совсем не человечно. Про перевод даты вообще можно не говорить.

Ещё проблема — картинки. Вы страдали и сверстали своё прекрасное письмо. Вам нужно вывести картинку. В шаблоне письма вы делаете так:

<img 
  src="*|RSSITEM:IMAGE|*"
  alt="*|RSSITEM:TITLE|*"
/>

Но парсер MailChimp может приходить и ломать вёрстку, добавляя свои свойства, классы и другой код в тег картинки <img ... />.

Совет. Если вы используете стандартную ленту и теги, то не забудьте включить галочку «Изменение размера изображений RSS-канала в соответствии с шаблоном» в настройках кампании:

Промежуточные выводы: что-то идёт не так, стандартных вариантов не хватает, письмо страшное и не человечное. Нестандартных данные не вывести.

Делаем финт ушами: все размечаем сами

Если стандартного ничего нельзя сделать в RSS ленте, чтобы парсер сервиса MailChimp это правильно понял, то можно передать готовый размеченный и свёрстанный кусок кода для карточки поста просто в теге <description> отдельного элемента <item> в ленте.

Есть только отдельный минус: все стили для письма должны быть заинлайнены, то есть всё, что описано через .class превращается в стили в атрибуте style=”...”.

<!-- до инлайна так: -->
<style>
  .post-meta {
    Margin: 8px 0;
  }

  .post-category {
    border-radius: 3px;
    border: #adb2b2 1px solid;
    color: #adb2b2 !important;
    border-bottom: #adb2b2 1px solid !important;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 13px;
    Margin: 0 8px 0 0;
  }
</style>

<div class="post-meta">
  <a 
     href="https://blog.promopult.ru/category/seo" 
     target="_blank"
     class="post-category">SEO: поиск и внутренняя оптимизация</a>
</div>

<!-- после инлайна так: -->

<div style="Margin: 8px 0;">
  <a 
     href="https://blog.promopult.ru/category/seo?utm_source=newsletter" 
     target="_blank"
     style="Margin: 0 8px 0 0; border: #adb2b2 1px solid; border-bottom: #adb2b2 1px solid !important; border-radius: 3px; color: #adb2b2 !important; font-size: 13px; line-height: 13px; padding: 2px 6px; text-decoration: none;">SEO: поиск и внутренняя оптимизация</a>
</div>

Для вёрстки писем блога использовался «Печкин» — gulp-сборщик шаблонов писем, который собирает письмо из блоков и сам инлайнит стили. Также можно пользоваться онлайн-инлайнерами стилей, например, Premailer.io.

В шаблоне RSS-ленты доступен цикл постов. Поэтому можно вытащить и сформировать всё как хочется и нужно.

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

От этого варианта также пришлось отказаться из-за сломавшейся вёрстки и отсутствия контроля над разметкой и стилями картинки. И позже перенести всю разметку блока карточки поста в тег <description>.

<?php while (have_posts()): the_post(); ?>
  <item>
    <description><![CDATA[
      <div class="post-card">
      <?php if ( get_post_meta($post->ID, 'imga', true) ) { ?>
        <div class="post-card__img">
          <a href="<?php the_permalink(); ?>?utm_source=newsletter" target="_blank">
            <img 
              src="<?php echo $postImg[0]; ?>" 
              alt="<?php the_title(); ?>">
          </a>
        </div>
      <?php } ?>
        <div class="post-card__info">
          <h2>
            <a href="<?php the_permalink(); ?>?utm_source=newsletter"><?php the_title(); ?></a>
          </h2>
          <p>
            <a href="<?php the_permalink(); ?>?utm_source=newsletter">
              <?php if ( !empty( get_post_meta($post->ID, 'intro', true) ) ) {
                echo get_post_meta($post->ID, 'intro', true);
              } else {
                $content = get_the_content(); $trimmed_content = wp_trim_words( $content, 12, '...' ); echo $trimmed_content;
              } ?>
            </a>
          </p>
          <div>
            <p>
              <?php if (get_the_date('Y') == date('Y')) { the_time('j F'); } else { the_time('j F Y'); } ?>,
              <?php
              $categories = get_the_category();
              if( $categories[0] ) {
                echo '<a href="' . get_category_link($categories[0]->term_id ) . '?utm_source=newsletter">'. $categories[0]->name . '</a>';
              }
              ?>
            <?php if(function_exists('the_views')) { ?>
              <span>
                <span>
                  <img 
                    src="icon-views.png" 
                    alt="Просмотры поста">
                </span>
                <span class="item__text"><?php the_views(); ?></span>
              </span>
            <?php } ?>
            <?php if (function_exists('get_simple_likes_counter')) { if (get_simple_likes_counter( get_the_ID() ) >= 1) { ?>
              <span>
                <span class="item__icon">
                  <img 
                    src="icon-like.png"
                    alt="Лайки поста">
                </span>
                <span><?php echo get_simple_likes_counter( get_the_ID() ); ?></span>
              </span>
            <?php } } ?>
            <?php if (get_comments_number() >= 1) { ?>
              <span>
                <span>
                  <img 
                    src="icon-comments.png"
                    alt="Комментарии поста">
                </span>
                <span><?php comments_number('0', '1', '%'); ?></span>
              </span>
            <?php } ?>
            </p>
          </div>
        </div>
      </div>
    ]]></description>
  </item>
<?php endwhile; wp_reset_query(); ?>

В примере кода нет инлайн-стилей, чтобы всё выглядело аккуратно. Боевой же вариант ленты отдаётся с полной разметкой и стилями.

Все адреса для графики в примере также упрощены. В боевом варианте все нужные картинки, иконки, фотографии и всё, что важно для письма, — залиты в админку MailChimp через Content Studio, а уже в шаблонах использованы адреса полного вида для src-атрибутов тегов <img />.

В строках №№20—24 мы выбираем вариант текста-анонса (интро) статьи. Если заполнен кастомный в свойствах поста в произвольных полях записи — get_post_meta(), то показываем его, если его нет, то показываем то, что лежит в get_the_content().

Также выбираем картинку-обложку поста. У нас есть две картинки, связанные со статьей: небольшое превью (отображается в карточке поста на главной странице) и обложка из шапки поста. Берем большую обложку.

Пример шапки с фоном в посте блога PromoPult

Поскольку всё это происходит в стандартном цикле WordPress, то доступны все способы сортировок. Например, показать самое просматриваемое и залайканные за последние 12 дней, отсортировав от большего к меньшему количеству лайков.

Вывод контента из ленты в шаблоне письма

Поскольку все данные для отдельной карточки поста находятся внутри тега <description>, вложенного в отдельный элемент <item>, то достаточно только его и показать в шаблоне письма:

<h1>Свежие материалы недели в блоге PromoPult</h1>
<p>*|RSSFEED:DESCRIPTION|*</p>
<!-- 
  *|RSSFEED:DESCRIPTION|* покажет: «21 августа — 28 августа», 
  из тега <description> общей ленты 
-->

*|RSSITEMS:|*
  *|RSSITEM:CONTENT|*
*|END:RSSITEMS|*

Данные корректно отображаются, HTML-код вставляется в цикле и автокампания работает.

Отдельной строкой про RSSFEED и FEEDBLOCK

Чем отличается *|RSSFEED|* и *|FEEDBLOCK|*?

В различиях разобраться просто:

• *|FEEDBLOCK|* можно использовать внутри любых шаблонов писем и кампаний. Например, хотите в периодическом выпуске рассылке рассказать про последние посты — используйте его. Указать можно ссылку на любой RSS-источник.
• *|RSSFEED|* работает только в автокампаниях и в качестве источника видит то, что указано в настройках кампании.

ИТОГО: Если у вас все стандартно и несложно, юзайте стандартные средства MailChimp и не парьтесь

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

Как — мы рассказали.

Ссылки на тему RSS-лент в MailChimp:

• Feedblock RSS Merge Tags — документация про использование тегов *|FEEDBLOCK|* в шаблонах писем
• RSS Merge Tags — документация про тег *|RSSFEED|* в шаблонах писем
• Email Design Reference > RSS Merge Tags — начало работы с MailChimp и использование блоков RSS-лент в шаблонах писем