Как мы автоматизировали верстку статей на vc.ru, или почему в маркетинге нужны роботы
Раньше верстка статьи занимала от одного до двух часов. Если нужно было опубликовать лонгрид, а времени мало, то пиши пропало. Верстку статей на vc.ru нужно было автоматизировать, как когда-то мы это сделали с Хабром. Вместе с командой PIX Robotics, которая специализируется на программных роботах, нам удалось найти решение.
Привет! Меня зовут Влад, я технический писатель в Selectel. Не так давно я выпустил статью, где рассказал, как мы с коллегами разработали верстальщик статей из Google-документов на Хабр.
Но мы работаем не только с Хабром, но и на vc.ru. Редактор статей там сильно отличается: нельзя верстать в html, есть другие типы элементов. Поэтому создать аналогичный верстальщик для этой площадки сложнее. В этой статье расскажу, как мы с PIX Robotics решили проблему. Но для начала немного истории.
Ретроспектива
Когда-то давно
Когда я пришел в Selectel в 2022 году, мой тогда еще бадди и нынешний руководитель Ульяна попросила собрать статистику по нашей активности на Хабре и нескольким интересующим нас блогам. В корпоративных Google Analytics и Qlik эти данные не собрать, поэтому я решил завести отдельный дашборд. И вместо того, чтобы автоматизировать этот процесс, решил все сделать вручную, отслеживая изменения на площадке с заданной периодичностью.
Естественно, таким образом много данных не собрать: это скучно, а еще максимально неточно. Поэтому пришлось все-таки автоматизировать этот процесс. И спустя пару недель мы уже собирали данные с помощью самописной программы SeleStat. По сути, это обычный парсер для формирования статистики по выбранным хабраблогам.
Не так давно
Спустя время появилась потребность унифицировать верстку статей по стилю, а также хотелось сократить время на рутинные задачи при подготовке материалов к публикации. Подробнее об этом рассказали в отдельной статье.
В общем, чтобы больше сфокусироваться на серьезных задачах и точнее планировать публикации, мы разработали простую программу для конвертации статей из Google-документов на Хабр. По сути, это простой обработчик текста, сильно упрощающий жизнь авторам нашего блога.
Кроме того, мы автоматизировали постановку задач на смежные отделы в Jira, чтобы не забывать, например, заказывать у дизайнеров обложки и схемы для текстов. Но это тема для отдельной статьи, скорее о налаживании процессов в редакции.
Сегодня: зачем конвертер статей на vc.ru
Каждую неделю мы выпускаем по два-три поста на vc.ru — это около одной трети публикаций на внешних площадках. Ручная верстка занимает, в среднем, до 1,5 часов: текст нужно правильно отформировать, добавить специальные элементы и UTM-метки. И если посмотреть в разрезе квартала, верстка может отнимать более 50 часов рабочего времени.
По этой причине мы решили создать версию верстальщика статей для vc.ru. Но была проблема: редактор этой площадки сильно отличался от редактора статей на Хабре. То есть мы не могли просто взять существующую программу и использовать ее. Нужно было погрузиться в специфику vc.ru и разработать что-то новое.
Специфика редактора публикаций на vc.ru
Как бы это странно ни звучало, для нас лучше, когда редактор статей менее интерактивен и адаптивен. Потому что подобные интерфейсы, наполненные меню, разными блоками и другими элементами, — это всегда сложный JavaScript. Значит, нельзя написать программу, которая будет «бездумно» копипастить текст в заданные текстовые поля.
Нужно имитировать действия человека — от создания публикации и простейшего ввода текста до работы со сложными элементами. Последнего на vc.ru достаточно: есть врезки, персонализированные цитаты, списки, вставки с кодом, различные блоки для элементов медиа и другое.
Если вы можете написать программу для верстки статей на vc.ru, используя библиотеки вроде Selenium, — смело отправляйте нам свое резюме. У нас же не было ресурсов на создание подобного решения с нуля. Поэтому мы обратились в PIX Robotics — и вместе мы написали робота на базе платформы PIX RPA.
PIX RPA — это интерактивный инструмент разработки программных роботов для решения разных рутинных задач. Создание роботов происходит в студии разработки PIX Studio, которая ориентирована как на разработчиков, так и для бизнес-пользователей: программировать роботов можно в построчном формате или с помощью удобных блок-схем.
Список готовых активностей включает задачи по работе с офисными программами, сайтами, бизнес-приложения и мессенджерами. Также можно использовать сервисы распознавания и чат-боты.
интерфейс Студии PIX.
Конвертация Google-документа в верстку
Интерпретатор и язык разметки
У нас уже был достаточно хороший конвертер статей из Google-документов в html, который позволял получить код верстки для Хабра — набор из строк с гипертекстовым описанием разных элементов. Мы хотели его переиспользовать с минимальными изменениями для vc.ru, чтобы робот верстал статьи на основании этого кода. В противном случае пришлось бы писать новый интерпретатор.
По сути, наш интерпретатор просто декодирует теги span внутри выгруженного Google-документа, переводит их в простые теги форматирования — i, b и s — и добавляет специальные элементы.
Для специальных элементов вроде врезок и кодовых вставок предусмотрен специальный язык разметки — STML, Selectel Text Markup Language. Его мы используем при написании статей в Google-документах.
В результате интерпретатор возвращает специально размеченный html-код. Например, для всех ссылок на продуктовые страницы в коде описаны UTM-метки.
Код верстки текста в html-формате.
Ретрансляторы тегов
Результат работы интерпретатора почти всегда предсказуем. Мы знаем, что если в Google-документе элемент помечен как Заголовок 1, на выходе получится строка вида <font color="#EB4247 "><h2>Заголовок</h2></font>. Робот это тоже понимает и решает обратную задачу: транскрибирует html-код, который сгенерировал интерпретатор, в элементы верстки на vc.ru.
Правила декодирования html-кода для робота-верстальщика.
Все правила описаны в отдельных файлах проекта в Студии PIX — от нажатия комбинаций клавиш до сложных действий вроде вызова элементов. Ориентироваться в интерактивном интерфейсе vc.ru ему позволяет не только XPath, но и встроенный модуль машинного зрения. Он помогает роботу искать нужные элементы на веб-странице и взаимодействовать с ними при необходимости.
Архитектура сервиса
Ранее все сервисы, которые мы разрабатывали с коллегами для автоматизации рабочих задач, были в формате десктопных приложений. Это неудобно: после каждого патча нужно рассылать обновления, следить за совместимостью версий и другими нюансами. Поэтому мы переносим все сервисы — в том числе и робота для верстки статей на vc.ru — в облако.
Рассмотрим, как это работает с точки зрения архитектуры:
1. Интерфейс Marketing Cloud. Сотрудник получает сервисный аккаунт, авторизуется в облаке, которое мы строим на базе виртуальных серверов Selectel, и открывает верстальщик статей. Далее — настраивает параметры верстки, загружает zip-архив с изображениями и самой статьей.
2. Конвертер и объектное хранилище. Программа на стороне сервера распаковывает zip-архив и генерирует html-код статьи. Но что она делает с медиафайлами?
Ранее мы загружали все изображения для публикаций в облако habrastorage, однако сейчас стараемся от этого уйти. Поэтому все медиа подгружаются через API в наше объектное хранилище.
3. Робот на базе PIX RPA. После того, как код статьи сгенерирован, он отправляется на другой виртуальный сервер по SMTP/IMAP. На нем запущен робот, который принимает файл, запускает Chrome, переходит на vc.ru, создает публикацию и начинает верстать.
Последнее занимает около 20-30 минут времени: робот имитирует все действия человека. До завершения верстки можно отойти попить чай или заняться другими задачами, а после — опубликовать статью.
При этом робот запущен в фоновом режиме на удаленной машине с Windows Server. То есть обычный пользователь не видит самого процесса, а по завершении верстки получает простое уведомление. Но у нас есть возможность приоткрыть занавесу — вот, как это работает:
Результаты и планы на будущее
Сегодня мы уже используем робота для верстки текстов на vc.ru и тестируем его возможности. Он позволяет нам тратить минимум времени на этот процесс и не забывать о нюансах — например, проставлять utm-метки.
Также мы активно дорабатываем интерфейс Marketing Cloud для более удобной работы. Мы планируем и дальше развивать собственное облако и сервисы. Среди них — инструменты для аналитики рассылок, работы с SEO, генерации внутренних электронных документов и другое. Будем держать в курсе — следите за обновлениями в нашем блоге!
Читайте также:
Крутая идея. А как поступили с подписями к изображениям? В гуглдоках, кажется, нет особого форматирование, которое однозначно укажет на подпись
Здравствуйте! А вот, это одна из фич, над которой мы еще работаем.
Робот уже умеет проставлять подписи, для этого он должен транскрибировать строку такого формата:
<img alert="картинка" src="<ссылка на изображение в объектном хранилище Selectel>" align="center"/>
Но на стороне конвертера и языка разметки STML это пока не реализовано. Полагаю, сделаем что-то в таком духе:
*картинка*
[подпись: текст подписи]
отличная идея ,в результате удобно ,практично и занимает меньше времени
Спасибо!
Как говорил мой преподаватель по сопромату, автоматизировать нужно любую задачу, которую ты решаешь больше одного раза.
Тогда все рано или поздно станет практично и удобно.
Здравствуйте! Есть данные, на сколько % экономится общее время создания статьи от постановки задачи до появления в паблике?
Добрый день!
Выборка пока не слишком велика, чтобы посчитать среднее сокращение по времени относительно всех текстов. Поскольку статьи бывают разных форматов и с разной продолжительностью производства.
Например, эту статью я написал за один рабочий день, потому что вся информация была под рукой, в голове, и нужно было просто ее перенести на холст. Но есть и тексты, которые можно писать неделю-две. Как правило, это какие-то исследования или лонгриды. На их фоне и ручная верстка отнимает секунды.
Цель была в том, чтобы эти «секунды» не отнимали время человека. Теперь от него требуется только проверить финальный результат — то, что сделал робот — и выбрать рубрику. Это обычно 5-10 минут — опять же, зависит от объема статьи.
мне ничего непонятно, но выглядит очень умно))
Ничего непонятно, но очень интересно
Для Хабра может ещё и был смысл, так как там 2 версии редактора, а для VC это уже всё лишние усложнения.
Почему? 🧐
А как вы объюзаете фишки редактора VC - вставки и так далее? Текст через ctrl+v вставляется за полсекунды, а картинки всё равно нужно с компа выбирать по очереди.
Так, картинки можно добавлять по ссылкам) Сначала изображения загружаются в наше объектное хранилище, потом робот берет на них ссылки и добавляет во время верстки. Вот и все)