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

В статье на примере интернет-магазина покажем, как создать и настроить Турбо-сайт.

Что такое Турбо-сайты и чем они полезны

Преимущества Турбо-сайтов

Для каких задач полезны Турбо-сайты

Есть и ограничения

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

Задаем базовые настройки Турбо-сайта

Создаем страницу в конструкторе

Создаем карточки товаров

Добавляем контакты и карту

Настраиваем корзину

Футер

Проверяем страницу в предпросмотре и публикуем

Рекомендации по оформлению интернет-магазина в Турбо-сайтах

Что такое Турбо-сайты и чем они полезны

Турбо-сайт можно создать с помощью конструктора в интерфейсе Яндекс.Директа и использовать для разных целей: для отдельных рекламных кампаний или как основной.

Преимущества Турбо-сайтов

Быстрая загрузка

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

Индексация поисковиками

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

Больше конверсий

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

За создание сайта не нужно платить

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

Не нужно платить за домен, хостинг, поддержку сайта.

Легко создать

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

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

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

Готовые шаблоны

При создании сайта доступны готовые шаблоны, адаптированные под разные тематики (например, сайт магазина мебели или фитнес-центра).

Аналитика

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

Есть функционал для интернет-магазинов

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

Заявки клиентов поступают на почту, а данные о заказах хранятся у вас и всегда доступны, например, для анализа и запуска рекламы.

Для каких задач полезны Турбо-сайты

У Турбо-сайтов есть несколько вариантов применения.

  • Альтернатива обычному сайту. Например, вы ведете бизнес только в соцсетях (в том же Инстаграме или ВКонтакте). Перед тем как выделять бюджет на создание сайта, вы можете бесплатно и быстро создать Турбо-сайт, добавить в него основной ассортимент товаров, запустить рекламу и замерить эффективность.
  • Мобильная версия (в дополнение к основному сайту). Будет полезен, если основной сайт не адаптирован под мобильные устройства или имеет низкую скорость загрузки.
  • Промо-страница. Например, чтобы продвигать отдельно определенный ассортимент товаров (например, самые популярные товары или сезонный ассортимент). Также Турбо-сайты можно использовать для продвижения акций и специальных предложений.

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

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

Есть и ограничения

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

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

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

  • карточки товаров;
  • корзина;
  • форма заказа с выбором способов доставки и оплаты.

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

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

Для создания турбо-сайта перейдите в конструктор Турбо-страниц в Директе (раздел «Инструменты» / «Конструктор Турбо-страниц»).

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

Здесь можно:

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

Мы будем создавать Турбо-сайт для интернет-магазина, поэтому выбираем соответствующий шаблон и жмем «Создать».

Задаем базовые настройки Турбо-сайта

Перейти в них можно из панели инструментов (кликнув по кнопке с шестеренкой).

Как создать Турбо-сайт в Яндекс.Директе

Настройки сайта

Здесь необходимо задать адрес сайта. Сайт будет размещаться на домене turbo.site, но название сайта можно задать любое (не короче 4 символов). Также адрес сайта можно в любой момент изменить.

Можно указать главную страницу (если вы создали несколько страниц), а также добавить фавиконку.

Счетчик Яндекс.Метрики

По умолчанию при создании Турбо-сайта Яндекс автоматически создает новый счетчик Яндекс.Метрики и привязывает его.

Как создать Турбо-сайт в Яндекс.Директе

Вот так выглядит автоматически созданный счетчик в Метрике:

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

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

Настройки страницы

Эти настройки применяются к странице, которую вы сейчас редактируете.

Указываем адрес страницы:

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

Ссылки для просмотра

В этом разделе отображаются две ссылки:

  • на опубликованную версию страницы;
  • ссылка предпросмотра.

Моя организация

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

Как создать Турбо-сайт в Яндекс.Директе

Создаем страницу в конструкторе

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

Как создать Турбо-сайт в Яндекс.Директе

Ниже — панель инструментов:

Как создать Турбо-сайт в Яндекс.Директе

Здесь можно:

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

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

Чтобы добавить новый блок на страницу, нажмите «Добавить секцию». Откроется меню, в котором собраны все доступные типы секций. Для каждого типа (например, шапки) доступны несколько вариантов с разным расположением контента.

Как создать Турбо-сайт в Яндекс.Директе

Для начала добавим шапку. Выбираем вариант «С логотипом, меню, кнопкой и минимальной контактной информацией».

Как создать Турбо-сайт в Яндекс.Директе

Теперь отредактируем шапку:

  • загружаем лого и указываем название магазина;
  • ставим ссылки в шапку и убираем ненужные;
  • указываем номер телефона и график работы. Телефон в шапке будет скрыт под кнопку «Показать телефон» (для отслеживания кликов по номеру телефона);

Как создать Турбо-сайт в Яндекс.Директе

  • вместо кнопки «Оставить заявку» нам нужно отображать в шапке корзину. Пока не трогаем эту кнопку, при добавлении секции «Товары» кнопка корзины автоматически будет добавлена в шапку.

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

Как создать Турбо-сайт в Яндекс.Директе

При добавлении/редактировании пункта меню в шапке необходимо указать, куда нужно переходить при клике на ссылку. Доступно два варианта:

  • на любую секцию текущей страницы (например, на блок с товарами или описанием преимуществ компании);
  • на другую страницу (переход по URL). Здесь можно указать URL страницы Турбо-сайта (если вы создали их несколько) или поставить ссылку на внешний сайт — например, на ваш основной сайт.

Как создать Турбо-сайт в Яндекс.Директе

Пункты меню можно легко менять местами с помощью перетаскивания:

Как создать Турбо-сайт в Яндекс.Директе

В блоке «Контакты» можно добавить несколько контактов. Здесь доступно 4 типа контактов:

  • телефон;
  • адрес (физический адрес магазина или офиса);
  • электронная почта;
  • часы работы.

Как создать Турбо-сайт в Яндекс.Директе

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

Добавляем обложку

Добавляем новую секцию — «Обложка».

Как создать Турбо-сайт в Яндекс.Директе

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

Фон обложки можно залить цветом или поставить фоновое изображение.

Как создать Турбо-сайт в Яндекс.Директе

Добавим преимущества — чтобы рассказать клиентам больше о нашем магазине

Как создать Турбо-сайт в Яндекс.Директе

Как создать Турбо-сайт в Яндекс.Директе

Можно настроить:

  • формат контента (с изображением или без);
  • количество колонок;
  • ширину изображения и формат.

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

Следующая секция — товары

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

Как создать Турбо-сайт в Яндекс.Директе

Секция пока что выглядит так:

Как создать Турбо-сайт в Яндекс.Директе

Теперь нужно будет добавить информацию о товарах и фотографии.

Обратите внимание! После добавления секции с товарами в шапку автоматически добавилась кнопка корзины.

Как создать Турбо-сайт в Яндекс.Директе

Также внизу страницы появился предпросмотр формы оформления заказа (ее мы рассмотрим детальнее ниже).

Как создать Турбо-сайт в Яндекс.Директе

Создаем карточки товаров

Для добавления товаров переходим в правом меню в секцию товары и раскрываем ее настройки.

Как создать Турбо-сайт в Яндекс.Директе

Перед тем как приступать к добавлению товаров, активируйте переключатель «Дополнительные настройки» (если до этого он был выключен). Так при работе с секцией будут доступно несколько полезных дополнительных опций.

Здесь можно настроить:

  • Количество колонок при отображении товаров. Обратите внимание, это влияет только на отображение Турбо-страницы при просмотре с десктопов. На планшетах и мобильных товары будут складываться в одну колонку (это же касается и других секций, где используются несколько колонок).
  • Формат фото. По умолчанию фото в товарах — квадратные (соотношение сторон 1:1). Соотношение можно изменить и выбрать нужное — например, 16:9. Эта опция будет недоступна, если отключены дополнительные настройки.

Как создать Турбо-сайт в Яндекс.Директе

Выберите тот формат, в котором у вас подготовлены фото товаров. Если в настройках секции товаров выбран формат 1:1, а вы попытаетесь загрузить фото с соотношением сторон 16:9, изображение нужно будет обрезать и часть содержимого не будет показана.

Как создать Турбо-сайт в Яндекс.Директе

Список товаров в секции отображается так:

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать карточку товара

Для этого нажмите на иконку карандаша у нужного товара (появляется при наведении). Откроется всплывающее окно редактирования.

Как создать Турбо-сайт в Яндекс.Директе

Пройдемся по основным полям:

  • Изображение. Можно загрузить одно или несколько изображений — напрямую с компьютера, выбрать из библиотеки стандартных изображений Яндекса или добавить картинку из ранее использованных при создании Турбо-сайтов.

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

Можно добавить несколько фото товаров. В этом случае при клике (или тапе) на фото будет открываться слайдер, в котором можно перелистывать все доступные изображения.

Как создать Турбо-сайт в Яндекс.Директе

  • Название и описание товара. Для названия есть ограничение по длине текста: максимум — 50 символов.

Как создать Турбо-сайт в Яндекс.Директе

Текст можно минимально отформатировать: выделить отдельные фрагменты жирным, курсивом или подчеркиванием; изменить цвет текста и заливку.

  • Цена товара. Здесь есть два поля: «Текущая цена» и «Старая цена».

Как создать Турбо-сайт в Яндекс.Директе

Если товар продается без скидки, заполняйте только поле «Текущая цена». Если же на отдельные позиции вы хотите добавить скидку, укажите в поле «Старая цена» исходную цену, а в поле «Текущая» — цену с учетом скидки.

Товары со скидками будут отображаться так:

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

Всей секции с товарами можно добавить фон — цвет или изображение.

Как создать Турбо-сайт в Яндекс.Директе

Любая секция копируется и перемещается в нужное место страницы.

Как создать Турбо-сайт в Яндекс.Директе

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

Добавляем контакты и карту

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

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

Контакты отображаются в ряд (на десктопе) или в столбец (на планшетах и мобильных). Можно выбрать стиль отображения:

  • с темными иконками;

Как создать Турбо-сайт в Яндекс.Директе

  • со светлыми иконками;

Как создать Турбо-сайт в Яндекс.Директе

  • без иконок.

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

Можно настроить высоту карты (с помощью кнопок размеров XS-XL), а также изменить компоновку секции (разместить карту справа от списка контактов).

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

А затем указать ссылку на группу или страницу:

Как создать Турбо-сайт в Яндекс.Директе

Настраиваем корзину

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

Как создать Турбо-сайт в Яндекс.Директе

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

Что нужно заполнить в настройках:

  • Адрес электронной почты для заявок. Заказы, оформленные клиентами, будут приходить на указанную почту. Можно указать несколько email, например, чтобы заказы приходили вам и менеджеру.
  • Юридическую информацию. Если вы работаете как юридическое лицо, необходимо указать название компании и ИНН.

Как создать Турбо-сайт в Яндекс.Директе

Для физлиц необходимо указать ФИО и адрес.

Как создать Турбо-сайт в Яндекс.Директе

В блоке настроек «Данные клиента» можно настроить поля, которые пользователь должен заполнить при оформлении заказа. По умолчанию здесь три поля:

  • «Ваше имя»;
  • «Телефон»;
  • «Электронная почта».

Как создать Турбо-сайт в Яндекс.Директе

Поля для ввода телефона и почты — обязательные. Изменить или удалить их нельзя. Поле «Ваше имя» можно редактировать: изменить название поля, отредактировать поясняющий текст (плейсхолдер), а также активировать или снять галочку «Обязательное поле». Если галочка установлена, для оформления заказа клиенту обязательно нужно указать свое имя.

Как создать Турбо-сайт в Яндекс.Директе

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

Следующий блок настроек — варианты получения заказа (доставка).

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

Для создания способа доставки нужно:

  • Кликнуть по кнопке «Добавить поле».
  • Нажать на пиктограмму карандаша в добавленном варианте доставки и выбрать способ получения товара — доставка или самовывоз.
  • Указать название способа — так, чтобы пользователю было понятно, как он сможет получить товар (например, «Доставка Почтой России»). Если добавляете вариант самовывоза, необходимо также указать адрес, по которому можно забрать товар самостоятельно.
  • Указать стоимость доставки (обязательное поле).

Следующий блок настроек — способы оплаты.

Как создать Турбо-сайт в Яндекс.Директе

Их всего два, и отредактировать можно только название:

  • наличными при получении;
  • картой при получении.

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

Футер

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

Как создать Турбо-сайт в Яндекс.Директе

В футер можно добавить:

  • краткое описание компании;
  • название компании и год основания;
  • логотип;
  • меню (ссылки на основные разделы или страницы);
  • контакты;
  • иконки социальных сетей.

Также можно изменить тему оформления футера: выбрать светлую или темную.

Как создать Турбо-сайт в Яндекс.Директе

Проверяем страницу в предпросмотре и публикуем

Перед публикацией проверьте страницу в режиме предпросмотра.

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

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

Как создать Турбо-сайт в Яндекс.Директе

После того как все настройки проделаны и страница оформлена, ее можно опубликовать.

Как создать Турбо-сайт в Яндекс.Директе

Сайт готов, теперь на него можно запускать трафик из Директа или других источников. Заявки будут приходить на почту, а в Метрике сможем отслеживать поведение пользователей и взаимодействие с контентом.

Рекомендации по оформлению интернет-магазина в Турбо-сайтах

Подборка советов по оформлению Турбо-страниц, которые помогут сделать их более эффективными:

  • Используйте горизонтальные логотипы в шапке. В таком виде они смотрятся лучше, чем квадратные или вертикальные.
  • Если накладываете текст на изображение или цветной фон, убедитесь, что текст достаточно контрастный и не сливается с фоном. Иначе информация может плохо считываться. Также принцип контраста нужно соблюдать и при оформлении кнопок. Если кнопка будет сливаться с фоном, часть пользователей могут ее не заметить, и конверсия будет ниже.
  • Используйте качественные изображения (без сжатия, водяных знаков и т. д.).
  • Добавляйте отступы между блоками, чтобы контент соседних секций не слипался. Это можно сделать с помощью секций-разделителей или добавив внутренние отступы внутри каждой секции. Так страница визуально будет более приятной и простой для восприятия.

Как создать Турбо-сайт в Яндекс.Директе

  • Старайтесь не использовать много разных цветов на странице. Оптимально — 1-2 цвета для выделения важной информации. Больше — ухудшает восприятие.
  • Указывайте только ту информацию, которая важна пользователю для принятия решения о покупке или звонке.
  • Проверяйте, как выглядит ваш сайт на разных устройствах. Даже если вы ориентируетесь только на мобильные устройства, на всякий случай проверьте, как отображается страница в десктопной версии.

Повышайте доход от ведения контекстной и таргетированной рекламы! Подключите рекламные аккаунты ваших клиентов к Click.ru — получайте вознаграждение до 18% от их расходов на рекламу. Деньги выводите на электронные кошельки когда вам удобно или вкладывайте обратно в рекламу.

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