Как сделать страничку в яндексе
Как создать Турбо-сайт в Яндекс.Директе [пошаговый гайд]
На примере интернет-магазина проходим все этапы и настройки
Яндекс давно использует технологию Турбо-страниц — для создания «легких» страниц, которые загружаются в разы быстрее обычных. В Директе на основе этой технологии можно создавать Турбо-сайты и запускать рекламу на них.
В статье на примере интернет-магазина покажем, как создать и настроить Турбо-сайт.
Что такое Турбо-сайты и чем они полезны
Турбо-сайт можно создать с помощью конструктора в интерфейсе Яндекс.Директа и использовать для разных целей: для отдельных рекламных кампаний или как основной.
Преимущества Турбо-сайтов
Быстрая загрузка
Технология Турбо-страниц разработана для того, чтобы увеличить скорость загрузки контента с мобильных устройств. Такие страницы максимально облегченные: нет лишних эффектов, скриптов и тяжелой графики. Страницы загружаются в 15 раз быстрее страниц обычных сайтов. Это позволяет не терять пользователей, у которых на момент загрузки плохой интернет.
Индексация поисковиками
Турбо-сайты хорошо индексируются поисковиками и могут приводить органический трафик, если контент сайта отвечает на запрос пользователя.
Больше конверсий
Быстрая загрузка при просмотре с мобильных устройств критически важна для конверсии сайта. Турбо-сайты загружаются быстро даже при нестабильном качестве связи, снижают показатель отказов на мобильных до 30%. В результате: больше пользователей дожидаются загрузки контента, остаются на сайте, и увеличивается доля тех, кто доходит до оформления заказа.
За создание сайта не нужно платить
Турбо-сайты бесплатные, количество сайтов не ограничено. Это значит, что в одном аккаунте Директа вы можете создавать несколько сайтов (например, для адаптации к разным кампаниям, тестирования нескольких гипотез или разделения ассортимента).
Не нужно платить за домен, хостинг, поддержку сайта.
Легко создать
Турбо-сайты создаются по принципу конструктора: есть набор готовых секций с разным видом контента и вариантами расположения. Секции можно адаптировать под себя, располагать на странице в любом порядке, редактировать оформление.
Если вы создавали сайты на Тильде или другом сервисе-конструкторе, то конструктор Турбо-сайтов будет для вас понятным и привычным.
Турбо-сайты по умолчанию адаптивные — не нужно отдельно прорабатывать отображение сайта на устройствах с разным расширением экрана.
Готовые шаблоны
При создании сайта доступны готовые шаблоны, адаптированные под разные тематики (например, сайт магазина мебели или фитнес-центра).
Аналитика
По умолчанию при создании сайта автоматически создается новый счетчик Яндекс.Метрики, в котором уже настроено отслеживание целей по взаимодействию с кнопками и другими элементами страницы. Также можно подключить свой счетчик.
Есть функционал для интернет-магазинов
Можно добавлять карточки товаров с несколькими фото, ценой и описанием. Есть настраиваемая корзина, в которой можно редактировать обязательные поля, добавлять способы доставки и оплаты.
Заявки клиентов поступают на почту, а данные о заказах хранятся у вас и всегда доступны, например, для анализа и запуска рекламы.
Для каких задач полезны Турбо-сайты
У Турбо-сайтов есть несколько вариантов применения.
Турбо-сайты можно использовать для персонализации в рекламе. Например, продвигать для разных сегментов целевой аудитории разные категории товаров или использовать разную коммуникацию на странице сайта.
Простота и доступность инструмента обеспечивает широкий простор для тестирования гипотез.
Есть и ограничения
В Турбо-сайте вы не сможете использовать кастомный дизайн, добавлять дополнительный функционал. Не получится также автоматически загружать весь ассортимент магазина с помощью фидов.
Турбо-сайты — это, скорее, инструмент для быстрого тестирования гипотез, запуска рекламы на отдельные товары, создания промостраниц с акциями и специальными предложениями.
Также Турбо-сайты отлично подойдут тем, у кого небольшой ассортимент товаров, но нет своего сайта. На первых порах такой сайт заменит интернет-магазин на собственном хостинге, так как в нем есть базовые функции:
Далее на примере интернет-магазина детских игрушек покажем пошагово, как создать Турбо-сайт, и познакомим с функционалом конструктора.
Как создать Турбо-сайт с нуля: пошаговая инструкция
Для создания турбо-сайта перейдите в конструктор Турбо-страниц в Директе (раздел «Инструменты» / «Конструктор Турбо-страниц»).
Система покажет всплывающее окно с предложением создать Турбо-сайт.
Мы будем создавать Турбо-сайт для интернет-магазина, поэтому выбираем соответствующий шаблон и жмем «Создать».
Задаем базовые настройки Турбо-сайта
Перейти в них можно из панели инструментов (кликнув по кнопке с шестеренкой).
Настройки сайта
Здесь необходимо задать адрес сайта. Сайт будет размещаться на домене turbo.site, но название сайта можно задать любое (не короче 4 символов). Также адрес сайта можно в любой момент изменить.
Можно указать главную страницу (если вы создали несколько страниц), а также добавить фавиконку.
Счетчик Яндекс.Метрики
По умолчанию при создании Турбо-сайта Яндекс автоматически создает новый счетчик Яндекс.Метрики и привязывает его.
Вот так выглядит автоматически созданный счетчик в Метрике:
Для отслеживания кликов по кнопкам или взаимодействия с контентом в секциях страницы уже готовы настроенные цели, данные по которым будут передаваться в Метрику:
Также можно добавить свой счетчик, но в этом случае вам придется вручную указывать идентификаторы целей для каждого элемента, взаимодействие с которым хотите отслеживать. Проще воспользоваться автоматически созданным счетчиком с предустановленными целями.
Настройки страницы
Эти настройки применяются к странице, которую вы сейчас редактируете.
Указываем адрес страницы:
Заполняем поля для SEO: заголовок, описание, указать канонический адрес при необходимости. Также можно закрыть страницу от индексации.
Настраиваем отслеживание действий. По умолчанию для отслеживания на странице используется счетчик всего сайта. Но при необходимости для страниц можно добавлять отдельные счетчики.
В блоке «Соцсети» указываем заголовок, описание и добавляем картинку, которая будет использоваться при отображении ссылки на ваш сайт в соцсетях.
Ссылки для просмотра
В этом разделе отображаются две ссылки:
Моя организация
В разделе «Моя организация» можно привязать организацию из Яндекс.Справочника, если у вас уже есть созданный и подтвержденный профиль. Данные из Справочника автоматически подтянутся в соответствующие поля секций страницы.
Создаем страницу в конструкторе
Над окном конструктора — навигация по директории с сайтом. Здесь вы можете переключаться между страницами или сайтами (если их несколько), а также создавать новые страницы.
Ниже — панель инструментов:
Страница собирается из секций: блоков определенного типа. Их можно собрать с нуля или адаптировать под себя стандартную структуру страницы, предложенную в шаблоне.
Чтобы добавить новый блок на страницу, нажмите «Добавить секцию». Откроется меню, в котором собраны все доступные типы секций. Для каждого типа (например, шапки) доступны несколько вариантов с разным расположением контента.
Для начала добавим шапку. Выбираем вариант «С логотипом, меню, кнопкой и минимальной контактной информацией».
Теперь отредактируем шапку:
Редактировать текст в шапке (и в других секциях Турбо-страниц) можно прямо в самой секции или в меню настроек в правой части интерфейса.
При добавлении/редактировании пункта меню в шапке необходимо указать, куда нужно переходить при клике на ссылку. Доступно два варианта:
Пункты меню можно легко менять местами с помощью перетаскивания:
В блоке «Контакты» можно добавить несколько контактов. Здесь доступно 4 типа контактов:
Также в шапку можно добавить иконки социальных сетей. Мы пока этого делать не будем, чтобы не перегружать шапку и оставить в ней только самую важную информацию.
Добавляем обложку
Добавляем новую секцию — «Обложка».
На обложке размещаем заголовок с подзаголовком, изображение, а также ставим кнопку.
Фон обложки можно залить цветом или поставить фоновое изображение.
Добавим преимущества — чтобы рассказать клиентам больше о нашем магазине
Для пунктов преимуществ можно добавить подложку — так они будут выглядеть более приятно и структурированно.
Следующая секция — товары
Выбираем вариант «В четыре колонки», чтобы на одном экране пользователи могли видеть сразу несколько товаров.
Секция пока что выглядит так:
Теперь нужно будет добавить информацию о товарах и фотографии.
Обратите внимание! После добавления секции с товарами в шапку автоматически добавилась кнопка корзины.
Также внизу страницы появился предпросмотр формы оформления заказа (ее мы рассмотрим детальнее ниже).
Создаем карточки товаров
Для добавления товаров переходим в правом меню в секцию товары и раскрываем ее настройки.
Перед тем как приступать к добавлению товаров, активируйте переключатель «Дополнительные настройки» (если до этого он был выключен). Так при работе с секцией будут доступно несколько полезных дополнительных опций.
Здесь можно настроить:
Выберите тот формат, в котором у вас подготовлены фото товаров. Если в настройках секции товаров выбран формат 1:1, а вы попытаетесь загрузить фото с соотношением сторон 16:9, изображение нужно будет обрезать и часть содержимого не будет показана.
Список товаров в секции отображается так:
Товары можно перетаскивать и менять местами, удалять или создавать копию. С помощью кнопки «Добавить» можно добавить неограниченное количество товаров.
Как создать карточку товара
Для этого нажмите на иконку карандаша у нужного товара (появляется при наведении). Откроется всплывающее окно редактирования.
Пройдемся по основным полям:
При загрузке изображения система предложит обрезать картинку, чтобы подогнать ее под формат, выбранный в настройках.
Можно добавить несколько фото товаров. В этом случае при клике (или тапе) на фото будет открываться слайдер, в котором можно перелистывать все доступные изображения.
Текст можно минимально отформатировать: выделить отдельные фрагменты жирным, курсивом или подчеркиванием; изменить цвет текста и заливку.
Если товар продается без скидки, заполняйте только поле «Текущая цена». Если же на отдельные позиции вы хотите добавить скидку, укажите в поле «Старая цена» исходную цену, а в поле «Текущая» — цену с учетом скидки.
Товары со скидками будут отображаться так:
В настройках секции (в пункте «Оформление») можно выбрать цвет текста цены, цвет бейджа скидки, а также указать способ отображения скидки — в процентах или в деньгах.
Всей секции с товарами можно добавить фон — цвет или изображение.
Любая секция копируется и перемещается в нужное место страницы.
Используйте эту функцию, если нужно разбить ряды товаров разделителем или другим контентом.
Добавляем контакты и карту
Если у вас есть физический магазин, где клиенты могут посмотреть ваши товары вживую, полезно добавить секцию контактов с картой.
Здесь можно указать всю контактную информацию, которая может быть нужна пользователям, а также показать адрес компании на карте.
Контакты отображаются в ряд (на десктопе) или в столбец (на планшетах и мобильных). Можно выбрать стиль отображения:
Для отображения карты с нужной отметкой и схемой проезда, в секции можно добавить ссылку на карту, созданную в Конструкторе карт Яндекса.
Можно настроить высоту карты (с помощью кнопок размеров XS-XL), а также изменить компоновку секции (разместить карту справа от списка контактов).
Под контактами и картой можно разместить иконки соцсетей. Для этого необходимо кликнуть по кнопке «Добавить соц. сеть» и выбрать нужную соцсеть из выпадающего списка.
А затем указать ссылку на группу или страницу:
Настраиваем корзину
В самом низу страницы отображается форма заказа — клиенты ее будут заполнять при оформлении товара, добавленного в корзину Турбо-сайта.
Форму нужно адаптировать под себя, а также сделать обязательные настройки.
Что нужно заполнить в настройках:
Для физлиц необходимо указать ФИО и адрес.
В блоке настроек «Данные клиента» можно настроить поля, которые пользователь должен заполнить при оформлении заказа. По умолчанию здесь три поля:
Поля для ввода телефона и почты — обязательные. Изменить или удалить их нельзя. Поле «Ваше имя» можно редактировать: изменить название поля, отредактировать поясняющий текст (плейсхолдер), а также активировать или снять галочку «Обязательное поле». Если галочка установлена, для оформления заказа клиенту обязательно нужно указать свое имя.
Можно добавить дополнительные поля, но мы не рекомендуем этого делать, если нет острой необходимости. Чем проще форма и чем меньше в ней полей, тем проще клиентам ее заполнять, и конверсия не пострадает.
Следующий блок настроек — варианты получения заказа (доставка).
По умолчанию есть три предустановленных варианта доставки. Их можно отредактировать под себя или удалить и создать заново.
Для создания способа доставки нужно:
Следующий блок настроек — способы оплаты.
Их всего два, и отредактировать можно только название:
На этом настройки формы заказа закончены, можно проверять страницу полностью и, если все в порядке, опубликовать.
Футер
Еще одна обязательная секций — подвал. Ее нельзя удалить или переместить. По умолчанию в футере отображается информация о том, что сайт создан с помощью технологии «Турбо-страницы».
В футер можно добавить:
Также можно изменить тему оформления футера: выбрать светлую или темную.
Проверяем страницу в предпросмотре и публикуем
Перед публикацией проверьте страницу в режиме предпросмотра.
В предпросмотре вы можете переключаться между разными видами отображения: десктоп, мобильное устройство, планшет.
Также можно скопировать ссылку и перейти по ней из адресной строки браузера, чтобы посмотреть, как страница смотрится вживую. А еще ссылку можно переслать себе на мобильный и открыть в мобильном браузере.
После того как все настройки проделаны и страница оформлена, ее можно опубликовать.
Сайт готов, теперь на него можно запускать трафик из Директа или других источников. Заявки будут приходить на почту, а в Метрике сможем отслеживать поведение пользователей и взаимодействие с контентом.
Рекомендации по оформлению интернет-магазина в Турбо-сайтах
Подборка советов по оформлению Турбо-страниц, которые помогут сделать их более эффективными:
Повышайте доход от ведения контекстной и таргетированной рекламы! Подключите рекламные аккаунты ваших клиентов к Click.ru — получайте вознаграждение до 18% от их расходов на рекламу. Деньги выводите на электронные кошельки когда вам удобно или вкладывайте обратно в рекламу.
Кроме партнерской программы вы получаете другие преимущества: один договор и акт на все рекламные системы, единый баланс, приоритетная техподдержка, инструменты для автоматизации и оптимизации рекламы.