Вторник, 19 марта, 2024

Отладка Турбо-страниц: пошаговая инструкция по настройке и верстке

Софт и игры
Вячеслав Питель
Вячеслав Питель
Редактор сайта, опыт работы 10 лет, пишу на тему гаджетов, новостей в мире технологий, игр и софта admin@uspei.com, VK, OK, сот. 89132476241

Здравствуйте, уважаемые читатели сайта Uspei.com. Представляю вашему вниманию подробную инструкцию от Халиуллина Андрея – руководителя разработкой сервиса Яндекс.Вебмастер по настройке и отладке турбо-страниц.

“Сегодня хочется рассказать про то, что же такое турбо сегодня, про то, что у нас есть и рассказывать я буду про то, какие инструменты для отладки турбо-страниц у нас появились на сервисе Яндекс.Вебмастер.

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

Я расскажу про то, как отображать сложные данные: гистограммы, таблицы, про способы отображения медиа-контента. Немножко расскажу про структурирование вашего контента, чтобы все-таки это не смотрелось какой-то страшной простыней.

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

Ну и разумеется не обойду стороной рекламу и аналитику, потому что это тоже очень важная часть процесса создания турбо-страниц.

Инструмент «Отладка»: как работать с песочницей

И начать все это хочется с инструментов отладки. То, что мы запустили в Яндекс.Вебмастере инструмент, который мы называем «песочница».

Это новый инструмент, который позволяет вам быстро написать какой-то xml, который описывает вашу турбо-страницу, нажать кнопочку «отладка» и получить справа картинку, которая покажет, как именно такое представление турбо-страниц будет выглядеть на поиске.

Важно, что, во-первых, этот инструмент использует все хостовые настройки, которые у вас уже есть в интерфейсе Яндекс.Вебмастера. Если у вас уже есть турбо, вы можете перейти в раздел отладки и видеть, как турбо-странички будут отображаться именно для вашего сайта.

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

Чтобы попасть в инструмент отладки турбо страниц нужно для начала зайти на интересующий вас сайт в сервисе Яндекс.Вебмастер и в меню слева пройти в “Турбо-страницы” – подменю “Отладка”.

Здесь мы сразу же видим какой-то небольшой сниппет кода. Это непосредственно кусок rss, который нужно передавать для отображения турбо-страниц. Справа видно, как этот кусок кода превращается в конечную страничку, вот в таком мобильничке, как его будет видеть пользователь.

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

А кто не хочет читать – в конце поста смотрите видео-обзор.

Хочется сразу обратить ваше внимание, что здесь по умолчанию подставлен первый item, то есть это не весь rss. Инструмент позволяет отображать только одну страничку, но на самом деле никто вам не мешает засунуть в форму ваш rss целиком. Показываться будет только первая страничка, но ничего страшного.

Скопируем готовый rss и можно уже отправлять в турбо-страницы – они будут работать. Ставим его сюда и вот турбо-страничка, которая первая (1) в указанном rss. Здесь ничего нового не происходит – есть заголовок, картинки, текст, ссылки форматирования, блок.

В принципе, все форматирование элементарное, типа цитаты, выделение текста, все это поддержано в турбо – это ни для кого не новость. О правильном и красивом форматировании статей читайте тут.

Сейчас я покажу, что-то более интересное. Давайте для начала удалим второй item, чтобы он не мешался, он и так не рисуется.

И хочется буквально немножко пройтись по тому, что же здесь происходит в этом коде, обратить внимание на какие-то распространенные проблемы.

– Распространенные проблемы при отладке

Во-первых, описание конкретно нашей странички начинается с элемента item. И здесь есть важный момент, про который некоторые забывают: у элемента item должен быть атрибут turbo, который установлен со значением true. Что такое вообще “атрибуты и теги” – тем, кто не знает, вам сюда.

В принципе, если вы используете плагин для вашей cms и турбо-страницы вы готовите не сами, а вам помогает ваше специальное решение, вам об этом, наверно, заботиться не нужно.

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

И второй важный момент, который сразу же всплывает: непосредственно контент турбо-страницы нужно передавать в элементе turbo:content. Про это написано в документации, а еще там написано, что контент сам по себе должен быть завёрнут еще в тег <! CDATA [***]>.

Если вы это не сделаете, вы можете получить довольно неприятные последствия. Страничка нарисуется, но перестанет рисоваться в какой-то определенный момент времени, и вы не будете знать, что происходит.

Чтобы все работало надежно – надо использовать этот тег и все будет прекрасно. По распространенным проблемам и ошибкам коротко это все.

Таблицы, графики и гистограммы в турбо-страницах

Теперь давайте перейдем к тому, что же интересное можно добавить в нашу страницу, чтобы она была поживее и представляла более-менее интересный контент.

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

Те из вас, кто знает, что такое html, а я подозреваю, что вас подавляющее большинство, видят, что это ровно та самая таблица, которая в обычном html тоже представляет таблицу.

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

Это основная прелесть турбо для тех, кто хочет передавать туда свой контент. В турбо в большинстве блоков вы передаете только именно контент, то, что вы хотите сказать, какие-то значения.

Тем, как это будет выглядеть, и как это будет там работать занимается Яндекс. По оформлению таблиц, в принципе, ничего нового.

И если у вас есть таблицы, то следующее, что вам может быть интересно и у нас это есть – это гистограмма. Это уже более сложный, на самом деле, способ представления данных. Если таблица она и есть таблица, то гистограмму, как правило, сложно отрисовать, без какого-то специального css или js или того и другого.

В общем, гистограмма – это более-менее сложный элемент и при этом в технологии турбо-страницы гистограмма выполнена более простым способом.

То есть этот способ представления гистограммы в коде не отступает от нашего основного правила – вы передаете данные, а мы занимаемся представлением. 

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

Если мы нажмём отладить, то получится 3 столбика с погодой, те значения, которые я писал и иконки, которые я туда загрузил.

Мне для этого не пришлось придумывать, как бы мне эти столбики выровнять по высоте. Чтобы это работало, я заполнил те значения, которые отображаются, и вот они перед нами. Абсолютно ничего лишнего.

Но если вы все таки хотите изменить стили css у турбо-страниц, у нас есть и такая возможность.

Как вставить изображение в турбо-страницу

Более распространенный вид контента – это медийный контент. Мы уже видели, что в турбо можно представить картинки. В предыдущих видео я показывал, а также в документации вы могли видеть, что помимо картинок можно встраивать еще и видео. Но об этом чуть позже.

Что же касается нововведений и крутых фич в картинках – я сейчас расскажу. Допустим, я хочу у себя на сайте разместить изменения логотипа Яндекса со временем. Вот у меня есть 4 каких-то logo начиная с 1996 года. Если это все отрисовать, будет очень информативно, но безумно некрасиво, лично мне не нравится.

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

В турбо-страницах галерея тоже существует и реализована она тоже удобным образом. Если вы хотите завернуть картинки в галерею, все что вам нужно – это взять и завернуть их.

Вы заводите вокруг картинок div с атрибутом data-block и нажимаем отладить. Совершенно бесплатно мы вместо вертикальной простыни из картинок получаем те же самые картинки, но с горизонтальным скроллом, то есть, как принято это делать на мобильных устройствах.

Галерея картинок – абсолютно элементарное действие. Кстати, не забывайте оптимизировать изображения перед загрузкой.

Варианты добавления видео для турбо

Видео у нас вставляется тоже довольно простым образом. Сейчас я скопирую заготовленный код. Таким образом, вы можете вставить видео со своего сайта.

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

Это способ вставить в основном видео, которое размещено на вашем же сайте. Возможно, более популярный кейс – если вы хотите вставить, например, видео с YouTube.

Для этого я нажимаю «поделиться» и нажимаю кнопочку «встроить», получаю готовый код для вставки на сайт. Наверное, такие возможности youtube ни для кого не сюрприз.

А сюрпризом, как мне хочется верить, для вас будет то, что мы в турбо поддерживаем этот способ вставки. То есть, вы просто копируете то, что вам предлагают вставить, нажимаете отладить, и она просто работает, видео проигрывается со всеми нужными элементами.

На самом деле, за этим простым телодвижением, которое я совершил, кроется гораздо более интересная штука.

Иные встраиваемые элементы в турбо-страницы

Мы не просто поддерживаем вот такие разные способы вставки видео, турбо-страницы поддерживают встраиваемые элементы, например, поддерживаются твитты.

Давайте пойдем в твиттер и выберем какой-нибудь твит, например, про Алису. В навигаторе twitter тоже можно понажимать какие-то кнопочки и найти «разместить твит».

Twitter предлагает мне код для вставки, я благодарно его беру, вставляю в код турбо-странички, и происходит магия.

Она просто встраивается со всеми элементами управления, с лайками, даже то же самое видео, которое находится внутри этого твита, тоже работает.

А если вы у себя на сайте уже используете вот такие встраиваемые элементы, то вы можете использовать их ровно тем же образом в контенте для турбо-страниц. Они будут работать также в стиле турбо-страниц, аккуратно оптимизируясь под мобильные устройства.

Кнопки «поделиться» в соцсетях

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

Для этого у нас тоже в турбо-страницах есть поддержка специального блока и, как не сложно догадаться, он тоже минималистичен, в смысле того, сколько кода вам для этого нужно написать.

То есть, чтобы разместить у себя кнопки «поделиться» в твиттере или фэйсбуке вам нужно написать:

<div data-block=”share” data-network=”twitter, facebook”> </div>

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

И вот таким не замысловатым образом мы добавляем своей страничке целый блок с разными кнопками, которые прекрасно работают.

Блоки на основе карточек

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

Я не дизайнер, но хочется с этим что-то сделать. Для того чтобы с этим можно было что-то сделать у нас тоже есть специальный блок, который называется “карточки”. Карточки представляют из себя просто коллекцию карточек.

То есть, для того чтобы сказать, что сейчас будут карточки, мы заводим блок, который называется data-block=”cards”. Внутри этого блока каждый элемент контента, группа каких-то тегов, которые вы хотите оформить в одну карточку, нужно завернуть в блок cards.

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

Если посмотреть уже на такую страничку, то можно увидеть некоторые отличия. Весь контент отделился пустотой от заголовка и находится на своем отдельном островке – это одна карточка.

Если домотаем до старого контента, начиная с картинки и текста, увидим еще одно разделение. Так можно поделить всю вашу страничку на отдельные островки какого-то объединенного по смыслу контента.

Это уже позволит пользователю, если грамотно использовать этот блок, не потеряться на вашей странице.

Два варианта добавления меню на турбо-страницы

Но, что еще больше помогает не теряться на странице – это меню. В турбо-страницах оно тоже поддержано.

Как принято в мобильных версиях сайтов, меню спрятано за такой бутербродик, узнаваемый пользователями. Если на него нажать – откроется меню. Сейчас я покажу, как я этого добился.

В настройках моей турбо-страницы есть раздел “меню турбо-страниц”, где есть пункты  меню. Этот способ подходит, если вы хотите иметь одинаковое меню на абсолютно всех страницах вашего сайта, тогда вы можете добавить его здесь.

Что хорошего в этом способе? Он позволяет вам управлять централизовано этим самым меню.

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

Это удобно, если это то, что вам нужно, но, возможно, это не то, что вам нужно. Тогда я покажу другой способ. Я убрал меню из настроек и вот бутерброд пропал.

Второй способ размещения меню – это размещение соответствующего блока прямо в коде вашего rss. Этот способ подойдет вам больше, если вы хотите иметь на каждой странице уникальный набор пунктов меню.

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

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

Внутри кода мы размещаем меню и дальше ссылки – абсолютно тоже без сюрпризов – и нажимаем отладить. Бутерброд торжественно вернулся и уже с тем контентом, который я разместил.

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

Встраиваем поиск по сайту

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

Надеюсь, вы уже все знаете, если не знаете, сейчас я вам расскажу, что турбо-страницы, разумеется, поддерживают формы. Обычные html-формочки, где написано action метод get, все как в обычном html.

Но чтобы пользователю было еще более понятно, что это именно поиск, мы поддерживаем вот такую возможность поменять у types текст на search.

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

Это то, что касается структурирования вашего контента и облегчения возможности навигации по вашему сайту.

Формы обратной связи и кнопки

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

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

Если вам нужна обратная связь, у нас есть для этого блоки. И самый простой блок, который можно использовать много для чего, но в первую очередь он красиво смотрится именно для организации обратной связи – это обычный блок с кнопкой.

Кнопка это и есть кнопка, она может работать, как просто ссылка, либо может работать, как ссылка на телефон. В форме вы указываете куда вы хотите привести пользователя, либо на телефон, либо адрес странички куда вы хотите, чтобы пользователь перешел, например, на страничку оформления заказа.

Оформление этой кнопки управляется тоже простыми атрибутами: цвет самой кнопки, цвет текста на этой кнопке и непосредственно текст кнопки.

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

Там очень много атрибутов, про некоторые я сейчас немножко расскажу. Внутри блока вы указываете отдельные элементы, способы связи с вами, номер телефона чат или telegram, если вы поддерживаете адрес вашего телеграмм-канала, или чат вконтакте, если у вас есть группа вконтакте.

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

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

Если вы не хотите сильно смущать пользователя таким своим присутствием, вы можете поменять расположение кнопки, можно написать data-stick=”right” и кнопочка уйдет направо.

А можно написать data-stick=”false” и тогда такой же блок кнопок без потери функциональности просто прилипнет к тому месту в коде, где вы его разместили, что тоже хорошо, если вы не хотите беспокоить пользователя лишний раз.

Организация комментариев на турбо-странице

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

У вас на сайте могут быть комментарии и для вас может быть важно, что эти комментарии не должны потеряться на турбо-версии страниц.

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

Комментарии – это важная часть этого контента и, соответственно, для отображения комментариев мы тоже поддержали специальные блоки. Сейчас я покажу, как это работает.

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

Возможно у вас это уже есть в вашем плагине, а если нет, то, возможно, вам стоит надавить на разработчиков этого плагина – он все сделает.

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

Дальше вы размещаете сами комментарии.

<div data-block="comments">***</div>

Кусок кода, который я оставил, адресовался вот в такое дерево комментариев. Если бы я был дизайнером, я бы здесь, конечно, добавил разбивку.

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

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

В общем идея ровно та же – вы передаете ровно тот контент, который хотите передать, а мы отвечаем за отображение этого контента.

Таким образом, если у вас есть комментарии и вы думали, что из-за них вы не пойдете в турбо, вы ошибаетесь, вы можете принести комментарии в турбо-версии ваших страниц.

Бесконечная лента и статьи по теме

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

Первое – это блок с полезными ссылками, с тем, что по вашему мнению может быть также интересно пользователю.

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

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

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

<yandex:related><link url="https://uspei.com/"></yandex:related>

Обратите внимание, этот элемент – это уже не часть контента вашей статьи, это своеобразная мета информация. Он размещается вне тега <turbo:content>.

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

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

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

Наша аналитика показывает, что использование бесконечной ленты на вашем сайте увеличивает глубину просмотра в полтора раза. И для того, чтобы вот такой блок про следующую статью превратить в бесконечную ленту, достаточно всего лишь дописать type=infinite.

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

Разные варианты размещения рекламных блоков

Теперь поговорим про то, ради чего, возможно, многие открыли этот контент – это реклама и аналитика. На протяжении всего этого видео вы могли видеть, что рекламные блоки тут и там вставлялись на мою страницу. Как это работает?

Турбо-страница поддерживает блоки РСЯ и Adfox. Для того, чтобы завести блок, вам нужно пройти в РСЯ и там понажимать кнопочки, которые они вам предложат.

У меня уже есть готовый блок специально для турбо-страниц и вот я его добавил. Я могу добавить еще один блок, например, такой же от РСЯ, но назову его по-другому.

Все это время пока я показывал вам, как использовать разные блоки, реклама вставлялась в автоматическом режиме.

Это если вам не хочется думать, как именно разместить блоки, у вас просто есть рекламные блоки Яндекса и вам нужно, чтобы они оказались в турбо-страницах просто укажите id блоков и больше ничего не делайте.

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

Более подробное описание того, как это размещение работает, находится в документации. Мы стараемся принести счастье пользователю и при этом не ущемить вас в монетизации.

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

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

Таким образом, сами идентификаторы блоков вы можете менять независимо от их способов размещения.

Для того, чтобы разместить рекламный блок, нужно найти место. Я сослался на конкретный рекламный идентификатор рекламного блока, который указал ранее в настройках. Нажимаем “отладить” и вот рекламный блок приехал туда, куда, собственно, я его вставил.

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

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

Статистика и подключение счетчиков аналитики

И теперь пара слов о том, что интересного у нас есть по поводу поддержки систем аналитики. Первое, о чем хочется упомянуть – это нововведение для Яндекс.Метрики.

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

Нельзя терять аналитику по вашим пользователям – это очень важно. Важно не забывать размещать настройки систем аналитики. Если у вас уже подключена метрика, вероятно это выглядит как-то так:

<yandex:analytics id="55555555" type="Yandex">

Это означает, что мы подключили Яндекс.Метрику с таким-то идентификатором блоков.

Что интересного? У нас теперь поддерживается возможность передавать параметры визитов. То есть Метрика поддерживает возможность передать ваши параметры, которые вы как-то сами придумали в формате ключ=значение, для того чтобы как-то идентифицировать пользователя для любых ваших нужд.

И такая же возможность есть теперь в турбо-страницах. Для этого достаточно указать атрибут params и в него передать непосредственно те параметры, которые вы хотите отдать в систему аналитики в формате имя и значения.

<yandex:analytics id="55555555" type="Yandex" params="{'name': 'value'}">

Следующая интересная возможность, которая больше нужна будет пользователям других систем аналитики, отличных от Яндекс.Метрики.

Яндекс метрика знает про то, что ваша страницы бывают турбированными и, соответственно, в Метрике есть инструменты для анализа: для сравнения турбо/не турбо визитов.

В общем для Яндекс.Метрики все, что вам достаточно сделать – это указать тег аналитики для метрики.

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

Для того, чтобы помочь вам это сделать, мы поддержали парочку новых элементов – это turbo:source и turbo:topic.

Это тоже элементы, которые размещаются не внутри контента – это мета информация о вашей странице, соответственно, ее нужно размещать там же – внутри item рядом с contents.

Элементы turbo:source и turbo:topic делают следующее: в turbo:sourcee вы можете указать адрес страницы, который уйдет в систему аналитики в качестве адреса страницы, на который пришел пользователь.

То есть это никак не повлияет ни на то, как видит пользователь страницу, ни на что-либо другое, кроме того, что улетит в систему аналитики. Вот, я здесь указал какой-то другой url – вот такую страницу увидит ваша система аналитики.

Соответственно, turbo:topic – это ровно то же самое, но про заголовок вашей страницы. Вы можете ну, например, ко всем заголовкам прописывать в начале “turbo”. Тогда визиты на турбо-страницы улетят в систему аналитики, как турбо и далее заголовок вашей страницы.

<turbo:source>https://uspei.com/otladka-turbo-stranits/</turbo:source>
<turbo:topic>Турбо заголовок страницы</turbo:topic>

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

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

Я почти уверен, что все из вас найдут свою систему аналитики в списке и тогда вам просто следует следовать тому, что написано в документации и вставить соответствующий код.

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

Выглядит это следующим образом. Вы размещаете элемент turbo:analytics, как вы это обычно делаете и в type указываете custom – так вы нам сообщаете про то, что у вас своя крутая, навороченная система.

<turbo:analytics 
   type="custom" 
   url="http://custom.analytics.com/{screenWidth}*{clientId}/{random}/{originalURL}&title={pageTitle}">
</turbo:analytics>

И в атрибуте url вы передаете адрес того самого пикселя, из которой ваша система поддерживает встраивание, а внутри url как-то замешиваете, как нужно вашей системе, параметры визита.

Полный список поддерживаемых параметров визита тоже находится в документации. Мы постарались покрыть все, что вам только может понадобиться. Соответственно, в вашу систему улетит обращение по адресу, в котором все эти элементы в фигурных скобочках будут заменены на характеристики визита.

Итоги

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

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

Таким образом, турбо-страница – это крутой инструмент для показа, в том числе сложных каких-то страничек пользователям.

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

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

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

Планы Яндекса по доработке турбо-страниц до конца лета

Добавятся новые форматы контента:

  • галерея медиаконтента со слайдером;
  • быстрый просмотр картинки большего размера по клику;
  • блок рейтинга;
  • поддержка встраиваемого контента из Яндекс.Карт и Яндекс.Музыки;
  • карточки товаров для интернет-магазинов.

Улучшат навигацию по Турбо-страницам:

  • добавят блок содержания и якорные ссылки;
  • сайдбар — новый блок меню;
  • форма поиска — по своему сайту или с передачей запроса в поисковики;
  • дополнительные типы оформления для блока «Вам может быть интересно»;
  • показы новых страниц в формате Турбо при переходе по ссылкам с Турбо-страниц.

Все примеры кодов есть в документации Яндекса – перейти.

По вопросам турбо-страниц обращаться в службу поддержки Турбо-страниц Яндекса.

А вот и подробное оглавление:

00:00 Введение
02:06 Инструмент «Отладка»: как работать с песочницей
05:19 Таблицы, графики и гистограммы 
08:32 Картинки
10:26 Видео
12:08 Иные встраиваемые элементы
13:21 Кнопки «Поделиться» в социальных сетях
14:10 Блоки на основе карточек
15:53 Меню
18:11 Поиск по сайту
19:33 Формы обратной связи и кнопки
22:27 Комментарии
25:13 Бесконечная лента и статьи по теме
27:39 Реклама
31:37 Аналитика
36:20 Итоги

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

4 Комментарии

  1. Молодец!!! Всё написал, а как попасть (просмотреть) турбостаницу в браузере не написал. На кой это всё нужно, если нельзя на неё взглянуть своими глазами.

    • Евгений, привет. Посмотреть свою турбостраницу можно либо в вебмастере во вкладке настройка, либо во вкладке источники, но лучше всего в самом поиске Яндекса с мобильного устройства либо на декстопе в режиме разработчика (F12 и перейти в режим смартфона)

Оставьте комментарий

Пожалуйста, введите Ваш комментарий
Пожалуйста, введите Ваше имя здесь

Гаджеты

Как выбрать Pod-систему

Если вы решили перейти с сигарет на вейпинг и выбираете свою первую Pod-систему, есть несколько важных аспектов, на которые...

Также на эту тему