У «Тинькофф Журнала» 13 регулярных рассылок, в которых читателям предлагают актуальные материалы и банковские продукты. Верстку перенесли в Letteros. Благодаря этому качественно изменилась работа над рассылками: теперь верстальщики работают не над исправлением ошибок в коде, а над созданием новых форматов.
«Тинькофф Журнал» перенес сборку писем в Letteros. Теперь на верстку рассылки уходит 25 минут вместо 4 часов
«Тинькофф Журнал» — издание про деньги и жизнь, принадлежащее «Тинькофф»
Масштаб бизнеса.
17 млн посетителей сайта в месяц 13 основных рассылок, у самой популярной 466 тысяч подписчиков
Задача
Ускорить верстку писем: из-за ошибок в коде верстка могла занимать от 1,5 до 4 часов
Ускорить обучение новых верстальщиков: оно занимало до 14 дней
Решение
Интегрировать редактор писем Letteros
ИТ.
Самописный сайт, Letteros, платформа для автоматизации маркетинга Mindbox
Результат
В 10 раз быстрее проходит верстка писем
В 14 раз быстрее проходит обучение нового верстальщика
В 14 раз быстрее проходит обучение нового верстальщика
Срок.
7 месяцев
10 апреля 2023
У «Тинькофф Журнала» 13 регулярных рассылок со сложной персонализацией: читателям предлагают только те статьи, которые они еще не читали и которые соответствуют их интересам. Это можно настроить только вручную, добавляя в письма код с большим количеством условий. Из-за этого верстка часто сопровождалась ошибками и вместо 25 минут могла занимать до 4 часов. Ошибки приходилось искать техлиду. Затягивался и процесс обучения новых сотрудников — на освоение верстки рассылок уходило две недели.
Верстку перенесли в Letteros. Благодаря этому качественно изменилась работа над рассылками: теперь верстальщики работают не над исправлением ошибок в коде, а над созданием новых форматов.
Техлид коммуникаций медиапроектов Екатерина Леснова рассказала, как преодолели проблемы с интеграцией сервисов, и показала, как собирают рассылки теперь.
Результаты
-
в 10раз ускорилась верстка одного письма благодаря снижению числа ошибок. Собственная оценка «Тинькофф Журнала» -
в 14раз ускорился срок обучения новых верстальщиков. Собственная оценка «Тинькофф Журнала»
Как раньше верстали рассылки «Тинькофф Журнала»
У нас 13 основных рассылок, например «Стакан воды» о финансовой стороне родительства, «Инвестник» о том, куда вкладывать деньги. Рассылки отправляем с разной частотой: какие-то раз в неделю, а какие-то — раз в месяц. В среднем в день отправляем две-три рассылки.
Рассылки собирают авторы из редакции: они отбирают материалы и пишут подводки. Иногда в рассылки добавляют нестандартные блоки, например опросы. В каждом письме есть блоки с рекомендациями и персональными предложениями. Рекомендации зависят от темы: если рассылка о путешествии, то и материалы в блоке «Читатели пишут» будут об этом.
Чтобы предлагать актуальные рекомендации, мы используем знания о клиенте, которые собираем на сайте. Например, не предлагаем материалы, которые читатель уже видел, а если он пользуется каким-то финансовым продуктом, то не будем его рекламировать. Рекомендации делаем с помощью «Шаблонизатора» Mindbox.
Изменять блоки в редакторе Mindbox сложно из-за его дизайна. Письма верстали в HTML-шаблоне — это окно с кодом, куда верстальщик добавлял разные элементы из библиотеки и предыдущих рассылок. Верстальщик мог случайно допустить ошибку в коде. Тогда «Шаблонизатор» переставал работать, а ошибку нужно было искать вручную.
Ошибка в том, что где-то в коде не закрыто условие. Сервис не показывает, где конкретно допущена ошибка, ее надо искать вручную в 2300 строках кода
Если забыть закрыть цикл или условие в коде, то редактор покажет ошибку в конце блока или письма. Искать ошибку трудно, а сделать ошибку и потом потерять ее — легко, если работаешь с длинным куском кода, а не отдельным компонентом.
Мы работаем с большим количеством рассылок, но ошибка в одном письме тормозила процесс и задерживала следующую рассылку. Я научилась быстро искать ошибки в коде, но, кроме меня, с этим мало кто мог разобраться — не все верстальщики знают, как работает шаблонизатор.
-
1,5–4
часа занимала верстка письма, если там появлялась ошибка
Среднее время, за которое делали стандартную рассылку, — 25 минут, нестандартную — 40 минут. Если появлялась ошибка, то мне приходилось подключаться к задаче. Тогда на создание рассылки могло уходить от 1,5 до 4 часов.
Если сроки подготовки одного письма затягивались, то сдвигались сроки по другим задачам, а верстальщики не только готовят регулярные рассылки, но и помогают собрать письма, которые мы отправляем от редакции разово, а еще триггерные сообщения для подписчиков и студентов курсов.
Рассылки «Тинькофф Журнала» очень персонализированы. Каждому читателю отправляют рекомендации, которые зависят от того, что уже прочитал и чем интересуется подписчик, какие статьи наиболее популярны. Такую сложную механику можно реализовать только с помощью сравнения большого количества статей: это происходит прямо в письме для конкретного получателя с помощью переменных Mindbox. Из-за этого в письмо добавляют большое количество кода с разнообразными условиями.
Для составления рекомендаций «Тинькофф Журнал» использовал шаблоны кода, которые для них разработал менеджер Mindbox. В зависимости от тематики письма и шаблона, в шаблонизаторе нужно было менять сегменты статей и продуктов, из которых делают подборку. На этом этапе и могла появиться ошибка.
У других клиентов Mindbox рекомендации не учитывают столько условий или работают на основании встроенных в платформу алгоритмов — тогда код изменять не нужно, а ошибки не возникают.
Как выбрали сервис для верстки писем
В конце 2021 года стали обсуждать, как ускорить верстку писем и какой сервис тут может помочь. Выбирали между Letteros и Stripo. От Stripo отказались из-за того, что он не адаптирует письма для мобильного телефона по нашим шаблонам — платформа не готова подстраиваться под кастомный дизайн, а у нас строгие требования. Шаблоны Letteros мы можем дорабатывать по своим пожеланиям.
Если в Mindbox код идет единым полотном, то в Letteros ты можешь выбрать шаблон одного блока рассылки и изучить его код: например, в отдельном окне править шаблон рекомендаций и в отдельном — шаблон опроса. Так его проще изменять и дорабатывать.
Работа с Letteros была для нас бесплатной до 2023 года — о таких условиях мы договорились с платформой, поскольку мы клиенты Mindbox, а Mindbox инвестировал в Letteros и планировал объединиться с сервисом.
Как интегрировали Letteros
Интеграция заняла у нас семь месяцев: начали в феврале 2022 года, а закончили к августу. В феврале мы познакомились с платформой и начали обсуждать условия. Если исключить отпуска и переговоры, то фактически переход занял около трех месяцев. Как правило, Letteros хватает на интеграцию одной-двух недель, но поскольку у нас сложный шаблон и высокие требования, срок растянулся.
Переезд проходил в три этапа:
1. Перенос дизайн-шаблонов
Выдали команде Letteros один из наших шаблонов. Они интегрировали его с помощью собственного визуального редактора, который позволяет с помощью ползунков, без исправления кода, редактировать каждый элемент рассылки: заголовок, абзацы, картинки.
Но у нас другой подход к верстке: мы верстаем блоками, готовыми форматами. Внутри блока уже заданы правила, как будет отображаться цвет фона, размер картинки, кегль заголовка. В рассылку мы перетягиваем блок целиком, а его содержание подтягиваем с помощью автоматики.
Формат «Карточка статьи» включает в себя заголовок, подводку, картинку-обложку и детали (закладку, комментарии). Детали подтягиваются автоматически, в третьем пункте расскажу, как настроили их
Letteros пришлось собрать для нас шаблоны из блоков, а не отдельных элементов. Этот процесс, включая обсуждение условий, занял четыре месяца и завершился к июлю.
2. Интеграция с шаблонизатором
С этим тоже возникла проблема: в Letteros встроен механизм, который заменяет кавычки и скобки в коде «Шаблонизатора» на другие. Из-за этого «Шаблонизатор» не работал, а рекомендации не подставлялись. На поиск решения потратили еще месяц — Letteros решил оборачивать код в тег <code> со специальным классом.
3. Доработка автоматики
При верстке письма в блоки можно добавлять статьи, указав ссылку на материал. Тогда в рассылке отобразится карточка материала с картинкой в нужном формате со всей дополнительной информацией: количеством комментариев и функцией добавления в закладки. У нас есть свои стандарты отображения полей, например если комментариев больше 1000, то они отображаются как 1К.
Чтобы все поля в рассылке выглядели по стандарту «Тинькофф Журнала», в HTML-код каждой статьи добавили теги с информацией, которую мы хотим передать Letteros: имя автора, заголовок, рубрика, формат отображения комментариев. Это заняло около двух недель, с задачей помогал наш разработчик.
Как переезд на новый сервис помог ускорить верстку писем
Чтобы создать рассылку по шаблону, теперь нужно около 25 минут. Если раньше верстка затягивалась из-за ошибок, то сейчас они не возникают вовсе.
Как проходила верстка с Mindbox
Как проходит верстка с Letteros
1. Создаем структуру письма: копируем элементы кода из библиотеки и вставляем их в HTML-редактор.
1. Создаем структуру письма: переносим визуальные блоки в письмо.
2. При необходимости правим код: для этого нужный блок находим в едином полотне кода.
2. При необходимости правим код: для этого выбираем шаблон конкретного блока и изменяем его код.
3. Добавляем контент в код.
3. Добавляем контент в блоки и сразу видим пример верстки.
4. Согласовываем верстку с редакцией. Для этого нужно создать аккаунты сотрудникам редакции и выдать им нужный тип доступа к системе. Иногда сотрудники забывали данные своих учетных записей — из-за этого согласование затягивалось.
4. Согласовываем верстку с редакцией. Отправляем ссылку на веб-версию письма, которую можно посмотреть без аккаунта с любого девайса.
5. Отправляем письмо по базе подписчиков с помощью Mindbox.
5. Экспортируем письмо в Mindbox.
Письма из Letteros нельзя напрямую передать в Mindbox, не хватает интеграции между сервисами. Мы экспортируем рассылки вручную.
6. Отправляем письмо по базе подписчиков с помощью Mindbox.
Сократился срок обучения новых верстальщиков: раньше на освоение верстки тратили около двух недель, а в декабре я обучила новичка за день. Теперь любой автор может зайти в библиотеку, перетащить нужные блоки и посмотреть, как будет выглядеть рассылка.
Качественно изменилась работа верстальщиков. Раньше все время уходило на создание самих рассылок и поиск ошибок, а сейчас — на создание новых форматов, поддержание и улучшение существующих шаблонов. Например, благодаря этому мы запустили «Личный дайджест», который формируется в зависимости от интересов пользователя.
Чтобы получать «Личный дайджест» пользователь выбирает интересные ему темы. Авторы указывают, каким темам соответствуют их статьи, — они могут выбрать сразу несколько тем для одного материала.
Подписчик раз в неделю получает дайджест с материалами за последние семь дней, которые соответствуют его интересам. Самая подходящая статья будет в письме первой. Это решение сделали с помощью шаблонизатора Mindbox.
«Личный дайджест» за один период для пользователей, указавших разные интересы
Мы разрабатываем новый конструктор рассылок в Mindbox. Это решение позволит быстро создавать письма, не редактируя код, а настраивая заготовленные визуальные блоки. Для тех, кто ценит в редакторе гибкость, оставим возможность самостоятельно изменять блоки.
