Турбо-страницы в Яндекс.Директ — реальные кейсы и эффективность

Автор статьи: Светлана Игнатьева,

специалист по контекстной рекламе компании SEO.RU

В конце 2018 года Яндекс отчитался о достижениях турбо-страниц: благодаря ускоренному и облегченному формату пользователи суммарно сэкономили 317 лет на ожидании загрузки, а рекламодатели получили доход на 40% больше на 1000 показов.

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

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

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

Мы собрали 3 кейса о турбо-страницах в Директе и делимся результатами своих наработок с вами.

Кейс №1. Транспортные услуги

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

Вот пример турбо-страницы для его кампаний в Яндекс. Директ:

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

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

За три месяца мы получили 37 заявок в дополнение к основным заявкам с сайта. Коэффициент конверсии составлял 4,34%. Это неплохой результат для данной тематики и данного сайта. Поэтому для этого рекламодателя турбо оказались полезны и эффективны:

Кейс №2. Юридические услуги

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

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

В итоге за три месяца мы получили 14 заявок, коэффициент конверсии с турбо-страниц — 3,49%:

Кейс №3. Оптовая продажа обуви

Для сайта продажи обуви турбо-страницы не дали нужного эффекта: конверсий с них за три месяца было только 3. При этом сайт дает до 60 конверсий в месяц.

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

Выводы

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

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

Перед внедрением турбо-страниц рекомендуем прочитать в нашем блоге статью о том, как правильно настроить Яндекс.Директ, чтобы рекламные кампании приносили вам трафик и конверсии с самого начала.

Как сделать турбо страницы Яндекса: инструкция и примеры

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

Функция турбо-страницы

Турбо-страницы – это недавно появившийся инструмент, благодаря которому контент ресурса будет загружаться на смартфонах моментально. Главная фишка технологии – высокая скорость загрузки, страницы отображаются быстрее, чем при использовании мобильной версии. Не зря инструмент получил название «Турбо» — скорость выше обычной приблизительно в 10-15 раз.

Как работает технология?

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

Важно: ограничения по контенту не распространяются на показы РСЯ, AdFox.

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

• видео из YouTube, Vimeo;




• виджеты Instagram;




• меню;




• блоки комментариев;




• кнопки социальных сетей;




• расширенный рекламный блок;




• ленту с тематическими материалами;




• галереи изображений.

Пример турбо-страницы

В мобильной поисковой выдаче напротив страниц с новой функцией Яндекс показывает специальный значок ракеты. При использовании поиска Google такого значка не будет.

Значок «Турбо», мобильная поисковая выдача Яндекса

Кажется, что страничка Википедии, с подключенной технологией, внешне ничем не отличается от стандартной версии.

Как сделать турбо-страницу

Первый шаг

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

Раздел «Турбо-страницы», кабинет Вебмастера

Источником информации для загрузки Турбо будет RSS-канал вашего сайта. Настройте его, следуя рекомендациям сервиса. Если ваш портал сделан на ВордПрессе, то установите специальный плагин. Плагин позволяет быстро организовать трансляцию новостей с вашего ресурса в Яндекс.Новости, и автоматически формирует RSS. Чтобы установить плагин, скопируйте вот эту ссылку https://ru.wordpress.org/plugins/yandexnews-feed-by-teplitsa/ и вставьте ее через админ-панель ВордПресса.

Также Яндекс разработал плагины для 1С-Битрикс, Joomla, Drupal. Для подключения через Тильду нужно будет нажать на кнопку Настройки – Раздел «Еще» — «Включить генерацию RSS-ленты», а затем скопировать появившийся URL ленты.

Второй шаг

После подключения RSS-ленты, копируем ссылку и вставляем в окошко «Добавить RSS-канал», раздел Источники. Нажимаем желтую кнопку «Добавить».

Добавляем RSS-канал для турбо

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

Проверка ошибок RSS-канала

Третий шаг

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

Шапка турбо-страницы

Чтобы данные о пользователях с турбо-страницы передавались в Метрику, указываем номер счетчика, а также id для РСЯ. Можно добавлять не только счетчик Метрики, но и Гугл Аналитикс, Рамблер, Меилру.

Аналитика для турбо-страниц

После проверки и настройки шапки, станет доступен предварительный просмотр в разделе «Источники».

Предварительный просмотр

Пример турбо-станицы

Аналитика

Чтобы понимать, сколько пользователей приходят с турбо-страницы, необходимо использовать Метрику. Перейдите в раздел Отчеты – Стандартные — Источник сводка – Визиты + «Турбо».

Доля визитов турбо среди общего трафика

На что влияют?

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

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

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

А вы уже подключили новую функцию? Как результаты? Почувствовали приток мобильного трафика или нет? Поделитесь опытом в комментариях в нашей группе Вконтакте!

секретов создания захватывающих макетов страниц с помощью темы Turbo Shopify

Главная / Shopify Theme Blog

Предыдущая

/ Next

Turbo, новейшая премиум-тема Shopify, присоединившаяся к семейству Out of the Sandbox, уже закладывает основу для отличного дизайна магазина, но множество вариантов темы позволяют легко, как никогда раньше, создавать почти безграничное количество уникальных образов. .

На прошлой неделе мы обсудили некоторые параметры и параметры конфигурации в теме Turbo Shopify, которые позволят вам выйти за рамки привычного.

На этой неделе мы рассмотрим несколько более продвинутых способов использования Turbo для создания захватывающих макетов страниц и дизайна.

Использование полноразмерных изображений на страницах товаров

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

Все темы Out of the Sandbox позволяют добавлять дополнительный контент под описанием продукта и галереей изображений с помощью специального тега «разделить», но в Turbo добавлена ​​замечательная новая функция, позволяющая вставлять полноразмерные изображения баннеров на страницы продуктов, в комплекте с текстовым заголовком.

Эта функция — отличный способ сделать страницы товаров еще более привлекательными без необходимости настраивать код.

Использование столбцов

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

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

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

• Разновидностью этого метода является создание нескольких столбцов и начало со значка в верхней части первого столбца. Затем добавьте заголовок или текст под ним.

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

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

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

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

Поэкспериментируйте с разделами домашней страницы

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

• Избранные рекламные акции: эти квадратные блоки могут занимать всю ширину или располагаться по центру вашей страницы. Каждый вариант создает уникальный внешний вид, поэтому поэкспериментируйте с обоими, чтобы увидеть, что лучше всего подходит для вашего магазина. Вы также можете выбрать до восьми отдельных полей и контролировать, сколько рекламных акций должно отображаться в строке. Эти настройки можно «смешивать и сочетать» для создания более интересных образов.

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

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

• Избранная коллекция в деталях: эта функция, которая также включена в другие темы Shopify Out of the Sandbox, позволяет вам продавать товары прямо с главной страницы со всеми подробностями, необходимыми покупателям для совершения действий. Измените внешний вид, разместив макет в шахматном порядке или скрыв описание продукта.

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

Попробуйте еще раз

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

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

Справочник по турбонаддуву

Turbo объединяет несколько методов для создания быстрых, современных, прогрессивно улучшаемых веб-приложений без большого использования JavaScript. Он предлагает более простую альтернативу преобладающим платформам на стороне клиента, которые помещают всю логику во внешний интерфейс и ограничивают серверную часть вашего приложения не более чем JSON API.

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

Вы можете узнать больше о преимуществах этого подхода HTML-over-the-wire на сайте Hotwire. Ниже приведены методы, которые Turbo предлагает, чтобы сделать это возможным.

﹟ Turbo Drive: Навигация в постоянном процессе

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

Turbo Drive обеспечивает ту же скорость за счет использования той же модели постоянного процесса, но без необходимости создания всего приложения вокруг этой парадигмы. Нет маршрутизатора на стороне клиента, который нужно поддерживать, нет состояния, которым нужно тщательно управлять. Постоянный процесс управляется Turbo, и вы пишете свой серверный код так, как будто живете в начале нулевых — в блаженной изоляции от сложностей сегодняшних монстров SPA!

Это происходит путем перехвата всех кликов по ссылкам на один и тот же домен. Когда вы щелкаете подходящую ссылку, Turbo Drive запрещает браузеру переходить по ней, изменяет URL-адрес браузера с помощью History API, запрашивает новую страницу с помощью fetch , а затем отображает HTML-ответ.

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

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

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

﹟ Turbo Frames: Разложение сложных страниц

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

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

Чтобы поместить независимый сегмент в собственный контекст навигации, заключите его в тег . Например:

 <турборама> 
 
 
 ... 
 
 
  

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

Фреймы также могут откладывать загрузку своего содержимого в дополнение к навигации по области. Чтобы отложить загрузку кадра, добавьте src атрибут, значением которого является автоматически загружаемый URL-адрес. Как и в случае с навигацией по области, Turbo находит и извлекает соответствующий кадр из полученного ответа и заменяет его содержимое на место:

.

  
 
Это сообщение будет заменено ответом от /messages.
 
  

Это может звучать как фреймы старой школы или даже