Веселые истории экран покажет ваш: как создать нарратив в Яндекс.Дзене
Дзен – это, вне всяких сомнений, один из самых крутых трендов в рунете сегодня. Детище Яндекса предоставляет собой рекомендательный сервис контента. На основе интересов и предпочтений людей он формирует персональную новостную ленту. В итоге выгода обоюдная. Пользователи получают интересные статьи, а владельцы сайтов – качественный трафик. Если вы давно ищете вдохновение и не знаете, как еще привлечь пользователей на свой ресурс, Яндекс.Дзен – то, что доктор прописал.
Как же начать писать в Дзен? И что туда публиковать? Сегодня расскажем об уникальном виде контента, который используется только в этом сервисе. Речь, конечно, о нарративах. Вот что о них пишет сам Яндекс:
«Нарратив – это формат публикаций, разработанный для показа в мобильной ленте Дзена. Он представляет собой последовательность экранов, которые пользователь листает один за другим. На каждом из экранов могут размещаться изображение, видеоролик или короткий текст».
Давайте разберемся, как нарративы делаются и как отследить их эффективность. Но имейте в виду, что для их создания вам понадобится работающий канал или подключенная RSS-лента. О том, как это осуществить, мы уже рассказывали вот здесь.
Особенности нарративов в Яндекс.Дзене
Прежде чем выдать вам подробную инструкцию по созданию данного формата, мы обязаны провести небольшой ликбез и рассказать, что же сам Яндекс требует соблюдать при работе с нарративами.
Сначала два слова о ранжировании. Нарративы просматриваются пользователями в общей ленте рекомендаций, как и весь основной контент. Показываются они так же на основе индивидуальных предпочтений. Если пользователям нравится ваш нарратив, это положительно сказывается на всем контенте ленты или канала в плане выдачи и количества просмотров. Проще говоря, нарративы в Яндекс.Дзене продвигаются на тех же условиях, что и обычные публикации. Выглядят они, как и остальной контент, но с одним маленьким отличием: пометка «нарратив» в левом верхнем углу.
Есть специальные рекомендации от Яндекса, которые помогут вам создать качественный нарратив:
Все изучили? Запомнили? Тогда можно приступать к главной работе.
Как создать нарратив в Яндекс Дзене?
Заходим в редактор Дзена, нажимаем на зеленую кнопку с плюсом в левом верхнем углу экрана и выбираем из появившегося меню вариант «Нарратив».
Вам откроется специальный раздел, в котором происходит вся работа. У него, кстати, есть рекомендации, которыми можно пользоваться, если интерфейс вызывает затруднения.
Все начинается с разработки первого экрана, который выполняет функцию обложки. Именно он отображается в общей ленте новостей, поэтому над ним стоит работать особенно внимательно. У него, кстати, ограниченные возможности. Размещаете фоновое изображение, gif или видео, а также вписываете заголовок материала, у которого нельзя поменять шрифт или размер, только цвет. Вот как это выглядит в редакторе:
Минус работы с обложкой нарратива в том, что тут нельзя изменить расположение текста. Поэтому возможны проблемы, с которыми мы столкнулись, когда текст терялся на фоне картинки. Впрочем, в ленте обложка слегка обрезается, а нижняя ее часть размывается, благодаря чему заголовок видно гораздо лучше. Так что выбор за вами: можно не заморачиваться по этому поводу, а можно подыскать более удачную во всех отношениях картинку.
Как только обложка готова, можно делать основные карточки. Их максимальное количество – 11 (двенадцатая приходится на обложку). Яндекс рекомендует делать нарративы объемом в 5-10 слайдов за раз. Здесь вы будете оперировать непосредственно текстом, а также изображениями (JPEG, PNG или GIF), видеороликами и ссылками. Пройдемся по всему перечисленному.
Работа с текстом
Чтобы добавить текст на карточку, нажмите справа на кнопку с плюсом и выберите вариант «Текст». Обратите внимание на розовую область, размеченную точками. Необходимо уместить весь контент (текст, ссылки и визуальные элементы) в ее пределах. В противном случае при отображении на мобильных какая-то часть информации может обрезаться.
В нарративах текст можно менять по размеру, цвету, размещению и начертанию. Если хотите, отформатируйте его по центру или по краю карточки. Кроме того, доступно добавление цветной подложки. В общем, полная свобода для фантазии. Правда, не очень удобно настраивать размер. Приходится делать все на глаз, так как нет никакой шкалы.
Разрешено добавлять максимум три блока текста по 296 символов, для каждого можно сделать свои визуальные настройки.
Работа с изображениями
Небольшое отступление: если для нарратива нужны хорошие, но бесплатные материалы (картинки/видео), ищите их в статье 80 ресурсов для дизайнера.
И возвращаемся к теме. Яндекс рекомендует использовать формат JPEG для статичных картинок, но и PNG отлично поддерживается. Чтобы добавить картинку, кликайте все на тот же плюс, только выбирайте соответствующий пункт в появившемся меню. Максимальное число картинок в одной карточке – 3.
Картинки можно редактировать по размеру и даже растягивать на все пространство карточки. Есть функционал по изменению яркости (при клике на картинку справа откроется шкала в процентах, двигая ее бегунок, вы меняете яркость).
Работа с видео и gif
Сначала про техническую часть. Поддерживает gif-формат и MP4. Для видеоролика важно соблюсти правило по длительности (не более 10 сек.) и по размеру (не более 30 МБ). По поводу добавления вдаваться в детали не будем – принцип тот же, что и с другими блоками. Максимум по количеству: один файл на карточку. Доступно изменение размера окна и свободное размещение на пространстве экрана. Одной кнопкой можно растянуть гифку или видео на все пространство.
Работа со ссылками
Ссылки рекомендуем размещать на последнем слайде, об этом уже говорили выше. Для ее добавления выберите в меню нужный пункт. На карточке откроется окно для сопроводительного текста, а в редакторе – пространство для самой ссылки.
Заполняйте оба поля и не забудьте отформатировать сопроводительный текст, чтобы было понятно: ссылка кликабельна. Рекомендуем использовать синий цвет и подчеркивание, так как такой вид всегда ассоциируется с кликами.
Анализ нарративов в Яндекс.Дзен
Итак, полработы сделано – нарратив создан. Однако вряд ли вы будете «штамповать» материалы только ради милых гифок с котиками и картинок с любимыми голливудскими звездами – наверняка захочется отследить выхлоп с публикации.
Поверхностные показатели по вашему каналу вы сможете просмотреть, не прибегая к Яндекс.Метрике. Для этого вам нужно открыть платформу для издателей, кликнуть значок «Войти» в правом верхнем углу, ввести свои данные и найти интересующую карточку – например, нарратив. Под публикацией отразится количество показов, просмотров и дочитываний.
Побудем капитаном Очевидностью и сакцентируем внимание на каждом из показателей.
Показ в ленте – скольким людям Дзен «порекомендовал» вашу публикацию. Наш материал мог бы попасться на глаза 2320 пользователям.
Просмотр – сколько людей перешли на ваш пост из ленты Дзена. Наш нарратив заинтересовал 97 человек.
Дочитывание – соответственно, сколько пользователей пролистали материал до конца. Нашу публикацию удостоили своим вниманием 55 человек.
Еще есть значки 
/ 
, и представьте себе, к лайкам и дизлайкам они не имеют никакого отношения. В Яндекс.Дзен эти иконки называются «больше такого» и «меньше такого». Например, кликая на «больше такого» пользователь не дает оценку качества вашей публикации, а сигнализирует Дзену, что подобные нарративы ему интересны, и он бы хотел видеть похожие материалы в своей ленте.
Но, как вы понимаете, подобными поверхностными показателями сыт не будешь. И если уж анализировать, то по-крупному. Поэтому обращаемся к палочке-выручалочке – Яндекс.Метрике.
Привязка счетчика Метрики к Яндекс.Дзен
Чтобы привязать счетчик Метрики к вашему каналу в Дзене, необходимо создать и настроить новый(!) счетчик. Затем в поле «Адрес сайта» указать адрес канала в формате zen.yandex.ru/название_канала.
Последний шаг – подключаем счетчик Метрики, чтобы отслеживать поведение читателей. Подробный мануал, как это сделать, предлагает сам Дзен.
Номер вашего счетчика вы сможете просмотреть в редакторе Дзена.
С этой страницы можно сразу перейти на Яндекс.Метрику, чтобы отследить результат.
Источники переходов в нарратив Яндекс.Дзен
Если вы хотите продвигать свой канал на Яндекс.Дзене, то важно узнать, как пользователи попадают на него. Для этого в Метрике выбираем: Отчеты → Стандартные отчеты → Источники → Источники, сводки. В пункте «Визиты, в которых» выбираем вкладку «Страница входа» и указываем адрес нашего нарратива. Пара секунд, и готовая таблица перед глазами.
Из скрина видим, что больше всего было прямых переходов, то есть наша публикация мелькала у пользователей в ленте. Также есть переходы из соцсетей что неудивительно – ссылку на нарратив мы давали в нашей группе ВКонтакте.
Еще один вид переходов – с почтовых рассылок. Дзен завлекает пользователей всеми возможными способами: под вашими письмами в Яндекс.Почте вы увидите список публикаций, которые могут вас заинтересовать. Видимо, кого-то из пользователей наш нарратив зацепил =).
Если ссылка на ваш материал была размещена на сторонних ресурсах, то возможны переходы по ссылкам на сайтах и внутренним переходам.
Переходы на сайт: результаты от нарративов Яндекс.Дзен
Владельцам сайта наверняка интересно узнать, какой трафик можно получить благодаря Дзену. Чтобы просмотреть, сколько переходов было из вашего канала на сайт, достаточно кликнуть: Отчеты → Стандартные отчеты → Источники → Сайты. Вуаля – таблица готова.
Из 6797 переходов за месяц 1 349 пришлось на Яндекс.Дзен. Но пойдем от общего к частному и посмотрим, сколько переходов нам принес рассматриваемый нарратив.
Для этого мы настроили UTM-метку на единственную ссылку в нашей публикации
О том, как настраивать UTM-метки, мы ранее уже писали в одной из статей. Вновь возвращаемся в Яндекс.Метрику и проходим алгоритм: Отчеты → Стандартные отчеты → Источники → UTM-метки и настраиваем атрибуцию «Последний значимый период». В итоге видим следующую картину:
Глядя на результаты, мы можем сделать вывод, что из 55 дочитавших до конца пользователей 30 человек решили пойти дальше. Чтобы узнать, как сформировать хорошую репутацию в Сети, они перешли на сайт и прочли статью в нашем блоге.
Яндекс.Дзен – непаханное поле, информации по нему совсем мало. Даже заглянув в Яндекс.Помощь, вы найдете лишь общие сведения. Однако, на наш взгляд, у каналов большое будущее – обо всех новых и необычных возможностях мы обязательно будем писать в наших статьях. А пока подписывайтесь на наш канал – уверены, вы найдете для себя много полезного и интересного. =)
Как мы делали «нарратив» – новый формат публикаций в Яндекс.Дзене
Два года Яндекс.Дзен учился решать задачу персональных рекомендаций контента. Теперь Дзен — не только агрегатор статей и видео со сторонних ресурсов интернета, но и контент-площадка. Летом 2017 года была запущена платформа издателей, на которой каждый может создавать публикации, а при достижении 7000 досмотров — зарабатывать на этом деньги. Про систему монетизации и другие особенности платформы вы можете прочитать в журнале Дзена.
Статьи и видео — традиционные виды контента. Чтобы привлечь авторов на платформу и дать им новые инструменты увеличения аудитории, Дзен решил выйти за рамки привычных форматов. Одним из новых форматов стал нарратив. Это набор карточек, объединенных общей тематикой. Пользователи интернета все меньше читают, но все так же хотят получать интересные истории (поэтому они, например, смотрят сериалы, короткие видео и живые трансляции). Мы создали формат, который помогает авторам рассказывать последовательные короткие истории и развлекать читателей.
Нарративы издателей и авторов
Карточка может содержать текст, ссылки, картинки, видео и GIF-анимацию. Нарративом можно рассказать историю, дать пошаговую инструкцию или рецепт, опубликовать список полезных книг, описать преимущества и недостатки подходов к ведению бюджета. Это формат для авторов, которые создают интересный контент, но не пишут длинные тексты.
В основном формат ориентирован на мобильные телефоны, так как зачастую люди потребляют информационный и развлекательный контент именно с мобильных устройств. Мы добавили ограничения: формат должен должен быть емким, но кратким, поэтому количество карточек нарратива не бесконечно. Каждая карточка содержит максимум одно видео и одну ссылку, это позволяет вести повествование последовательно, не перегружая внимание читателя. Заинтересованный человек может перейти из нарратива на сайт автора, прочитать расширенную версию материала, однако содержания нарратива должно быть достаточно, чтобы разобраться в теме.
Пример: нарратив о нарративе
Самый близкий аналог нарративов, stories в Instagram, ограничены по времени и показываются только 24 часа. Это влияет на содержание: материалы могут быть не связаны общей темой, малоинформативны, ориентированы на социальное взаимодействие и получение реакции от знакомых людей. Несмотря на то, что нам нравятся stories, такой формат не подходит Дзену. У нас публикации показываются намного дольше и рекомендуются аудитории, часто не принадлежащей к одной социальной или географической группе. Мы строили формат, который объединяет в себе легкость микроформата с вовлеченностью и сюжетностью лонгридов.
Чтобы дать пользователям возможность создавать разнообразные и уникальные нарративы, нам нужно было предоставить им специальный редактор с инструментами компоновки и оформления контента — вроде программ для создания презентаций. Редактор должен был подсказывать авторам, как сделать изложение визуально привлекательным, сообщать об ограничениях формата, быть простым в использовании. Поэтому мы добавили режим просмотра, где нарратив представлен таким, каким его увидят читатели. Мы не стали ограничивать авторов шаблонами расположения элементов: все элементы на карточке нарратива могут быть расположены произвольно. Кроме того, мы разработали систему слоев, которая позволяет управлять наложением элементов друг на друга.
Редактор нарративов
В процессе создания редактора мы столкнулись с рядом интересных технических задач. Эта статья — о том, как мы их решали.
Используемый стек
Технологическая база состояла из React (для редактора), preact (для показа), Redux, Draft.js (для текстовых блоков) и flowtype. Состояние хранится в нормализованном виде (см. normalizr), что позволило быстро производить самую частую операцию — обновление свойств элементов на карточке. Для других действий (таких как перестановка карточек, добавление и удаление блоков и пр.) нормализованное состояние также показывает более высокую производительность, чем обычное хранение данных в виде дерева объектов.
Делаем карточку и блоки на карточке адаптивными
Первой задачей было создание адаптивной карточки, которая сохраняет композицию при любом размере. На мобильных платформах карточка стремится занять максимальную площадь с учетом соотношения сторон, поэтому ее размеры могут сильно варьироваться от устройства к устройству.
Как сохранить соотношение сторон карточки?
Сначала захотелось воспользоваться чистым CSS. И действительно, в сети описывается несколько способов, которые позволяют это сделать:
Ощутимого минуса в скорости отрисовки оно не дает, есть потенциал к ускорению. Например, можно вынести выполнение выравнивания из основного бандла JS и выполнять его сразу после HTML-кода карточек. Тогда карточки будут сразу отображаться в правильных размерах.
Пропорции карточки сохраняются на любом экране
Как сохранить относительные размеры текстовых элементов?
Для пропорционального изменения размера текстовых элементов внутри слайда мы сделали следующее:
Тем самым задание размера шрифта в em приводит к автоматическому перерасчету размера шрифта элементов.
Как заставить объекты на карточке сохранять расположение и относительные размеры?
Для сохранения композиции лучше всего подходит введение относительной системы координат. Благодаря веб-платформе такая система уже есть — это задание размеров и расположения блоков в процентах! Действительно, каким бы ни был размер карточки в пикселях, размеры и расположение объектов, заданные в процентах, позволяют им пропорционально меняться.
Получается, мы ввели новую систему координат («карточную») в рамках каждой карточки с видимой областью от 0 до 100% по каждой из осей. Теперь надо научиться пересчитывать все пиксельные размеры в процентные. Это понадобится, когда мы будем:
Инициализация объектов с неизвестными размерами
Теперь, имея «карточную» систему координат, можно размещать блоки на карточке, не переживая, что их взаимное расположение исказится при изменении размера карточки.
Каждый блок имеет свойство geometry, которое описывает размеры и расположение блока:
Если добавить блок с фиксированным соотношением сторон (например, картинку или видео), возникает проблема перерасчета размеров из пиксельной системы координат в «карточную».
Например, при добавлении картинки на слайд по умолчанию задана 90-процентная ширина элемента в «карточной» системе координат. Зная оригинальные размеры картинки (Image.naturalWidth и Image.naturalHeight), размеры «карточного пикселя» и ширину картинки в новых координатах, необходимо посчитать высоту (тоже в новых координатах). Прибегнув к знаниям высшей арифметики, мы вывели функцию вычисления в «карточной» системе координат. Например, можно вычислить высоту картинки:
Тут natural — размеры картинки в px, container — размеры слайда в px, relativeWidth — размеры картинки на слайде в процентах.
Передвижение объектов
Когда мы освоили переводы в «карточную» систему координат, реализовать передвижение объекта стало несложно. Код, который за это отвечает, примерно такой:
Изменение размеров по 4 точкам
В любом порядочном визуальном редакторе можно менять размеры объекта, перетаскивая «квадратики», расположенные по углам его границ. У нас такую возможность тоже нужно было реализовать.
Написать компактный и понятный код, обрабатывающий изменение размеров объекта в зависимости от угла, за который тянет пользователь, оказалось не так уж просто. Прежде чем «велосипедить» свое решение, мы провели обзор того, как это делается в популярных библиотеках. Например, так выглядит код в jQuery UI:
Код выглядит компактным, но разобраться в нем непросто: функции не являются «чистыми», используется большое количество внутренних методов класса и его свойств, имеет значение контекст выполнения функции (см. apply).
В нашем проекте примерно такой же код написан следующим образом. Тут дополнительно учитывается минимальный размер объекта и опциональное ограничение на сохранение соотношения сторон (preserveAspectRatio) — это важно при изменении размеров видео или картинки.
Наш код нельзя назвать компактным, но функция получилась «чистой», а структура самого решения — прямолинейной.
Было бы здорово, если бы вы, уважаемые читатели, предложили вариант кода, решающий эту задачу. Допускаю, что существует некая закономерность, после понимания которой код становится суперкоротким и понятным.
Проблема неконсистентного рендеринга текста на разных платформах
После того, как началось более-менее масштабное тестирование показа нарратива, мы с удивлением обнаружили: в некоторых случаях один и тот же текст при одном и том же шрифте, размере и прочих атрибутах имеет разное число строк на разных платформах!
Например, в Safari при создании нарратива какой-то текстовый блок имел 4 строки, однако при просмотре его в Chrome на Android показывались 3 строки. Мы так и не выяснили точную причину такого поведения и списали его на особенности движков рендеринга текста на различных платформах.
Проблему мы решили разбиением текстовых блоков на строки перед публикацией. И тут тоже нашлось место интересному. Первый подход к определению строк состоял в оборачивании каждого символа в и определении его положения с помощью getBoundingClientRect. Это работало быстро, и мы довольно долго не замечали проблему, которую породил такой подход. Догадаетесь, о какой проблеме идет речь?
Оказалось, многие шрифты, в том числе и Yandex Sans Text, содержат оптимизации отображения межсимвольного расстояния для некоторых сочетаний символов (кернинг).
В правом столбце выставлено CSS-свойство font-kerning: none
Быстро решить эту проблему можно древним CSS-свойством font-kerning: none, которое попросту отключает эти оптимизации. Скорее всего, большинство людей, просматривающих нарратив, ничего не заметят.
Но ведь должен же быть способ сделать всё красиво! И мы нашли решение в использовании такого же древнего, но весьма полезного Range API, который может для заданного диапазона выделения текста предоставлять информацию, аналогичную getBoundingClientRect(). Сейчас мы работаем над этим решением, и, надеемся, в ближайшее время оно поедет в продакшен.
Непростая подложка под текстовыми элементами
Многие авторы использовали полупрозрачные картинки для увеличения контрастности шрифта, размещенного поверх фотографии. Другие писали нам с просьбами добавить соответствующую функцию в сам редактор.
Наш дизайнер, Аня, удивила разработку выбором самого непростого варианта геометрии подложки. Помимо объединения строк похожей длины в один прямоугольник, появилась идея использовать середину строчной буквы без выносных элементов (например, «a» или «o») как ось симметрии. Такая реализация создает усиленный эффект «мультяшности» получившихся фигур — они напоминают speech bubbles в комиксах.
Алгоритм и реализация подложки
Рисовать фигуры пришлось вручную, используя габариты строк, рассчитанные на прошлом этапе. Они реализованы как замкнутые svg-пути, состоящие из дуг окружностей одного и того же радиуса и прямых линий.
Поскольку ни одна из известных технологий не подходила для решения задачи, мы написали свой алгоритм отрисовки svg-кривой, которая используется для обложки.
Заключение
Нарратив — новый формат, и его нужно развивать. Для лучшего вовлечения в историю мы увеличим площадь карточки нарратива, добавим графических элементов и анимаций, поддержим использование жестов и возможность «бесшовного» продолжения просмотра похожих нарративов.
Читатели ценят качество публикаций. Чтобы сделать публикации лучше, мы будем подсказывать авторам, что нравится аудитории. Некоторые авторы уже поделились своими наблюдениями и способами создания хороших нарративов.
С технической точки зрения, остались нерешенные проблемы и простор для оптимизации. Например, в некоторых встроенных браузерах на Android (обычно — в браузерах от самого вендора) при увеличении системного шрифта форсируется выставление размера шрифта на веб-странице не ниже определенного порога. В случае нарратива это, конечно, ломает композицию.
Планируется нативная реализация просмотрщика нарратива на iOS и Android, поэтому мы изучаем возможность упростить создание таких просмотрщиков. Как нам кажется, один из интересных путей — «скриншоты» отдельных элементов на слайде. Они позволили бы не думать о правильном размере шрифта: картинки, в отличие от текста, очень естественно изменяются в размерах за счет процентной «карточной» системы координат. Кроме того, нам вообще не надо будет загружать шрифт Яндекса, не надо будет тянуть довольно заковыристый алгоритм отрисовки подложки текста и т. д.
Наконец, планируем переводить видео с потоков (изначально для потокового видео была хорошая инфраструктура) на обычные файлы MP4/WebM: с короткими видео такой подход показывает лучшую совместимость и скорость работы.
Статья подготовлена сотрудниками Яндекс.Дзена: Дмитрий Душкин и Василий Горбунов написали про фронтенд, Ульяна Сало — про дизайн.
