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

Из этого материала вы узнаете:

• Что нужно для запуска рекламы в Директе
• Каким может быть аудит сайта и зачем он нужен
• Как провести аудит сайта — чек-лист

Что нужно для запуска рекламы в Директе

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

• Посадочная страница
• Подключение к Яндекс Метрике
• Качественные изображения товаров

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

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

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

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

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

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

Каким может быть аудит сайта и зачем он нужен

Аудит состоит из оценки по ряду показателей. Например:

• Удобство
• Скорость загрузки
• Конверсионные элементы
• Формы обратной связи

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

Как провести аудит сайта: чек-лист

Шаг 1. Шапка страницы. Здесь важно ответить на несколько вопросов:

• Есть ли логотип, куда переводит клик по нему, читабелен ли он, соответствует ли тематике бизнеса?
• Есть ли телефон?
• Есть ли ссылки на основные разделы или блоки — каталог, доставку, оплату, контакты, акции?
• Шапка закрепляется на странице — для сохранения навигации при скролле вниз? Опциональная, но желательная настройка.

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

Шаг 2. Первый экран. Это часть сайта, которую пользователь видит сразу после клика по рекламе. Первый экран должен отвечать на следующие вопросы:

• Понятно ли, что продаётся на сайте?
• Считывается ли география работы? Понятно ли, что есть выезд или доставка? Надо ли искать эту информацию?
• Понятно ли, почему товар стоит купить именно здесь? Есть ли ключевые УТП?
• Есть ли призыв к действию — форма обратной связи или что-то подобное?

Возьмём для примера вот такой первый экран.

Здесь есть несколько проблем, в том числе технических. А ещё на странице нет УТП — уникального торгового предложения, которое мотивирует пользователей обратиться именно к вам. Из-за его отсутствия люди могут не понять сути бизнеса и уйти с сайта.

При этом на сайте есть полезный блок — работа в реальном времени. Но его стоило размещать не на первом экране, а выделить под него один из разделов.

А вот более удачный пример.

С первого взгляда понятно, что компания производит двери, можно посмотреть разные коллекции. На странице также есть основные УТП, например «Сделано в России» и «28 лет производим входные двери».

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

Шаг 3. Дизайн. Его стоит оценивать по следующим критериям:

• Релевантен ли дизайн тематике?
• Читабельны ли элементы на экранах с разными разрешениями?
• Единообразны ли шрифты?
• Нет ли элементов, клик по которым никуда не ведёт?

Сравните дизайны разных сайтов:

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

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

Шаг 4. Формы обратной связи или захвата. Проверьте свою форму по следующим критериям:

• Форму легко найти? Всегда ли она в быстром доступе?
• Работает ли форма? При отправке срабатывает страница, подтверждающая заполнение формы обратной связи? Понятно ли пользователю, что его запрос получили?
• Обязательных полей не более трёх?
• Работает ли проверка телефона и почты по маске, чтобы отфильтровать спам-заявки?

Для примера разберём форму ниже.

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

А вот другой пример формы:

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

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

Запомните, чего не должны содержать формы:

• Много обязательных полей
• Капчу для проверки

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

Шаг 5. Атрибуты качества. Это подтверждение качества товара или услуги, например сертификаты или лицензии. А ещё отзывы, которые отражают впечатления клиентов.

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

Шаг 6. Элементы, которые ухудшают пользовательский опыт. Например, пользователь заходит на сайт, ничего не делает и сразу же видит элементы, подобные изображённым в карусели.

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

Шаг 7. Мобильная версия. Проверить, как сайт отображается на мобильном устройстве, можно даже без смартфона в руках. Вот как это сделать в браузере Google Chrome:

1. Откройте свой сайт в браузере.
2. Кликните правой кнопкой мыши по любому месту на экране и нажмите «Посмотреть код». В правой части экрана откроется консоль.
3. Найдите в левом верхнем углу консоли иконку для выбора устройства — она выглядит как ноутбук позади смартфона.
4. Нажмите иконку, чтобы подогнать разрешение сайта под любое мобильное устройство. Его можно выбрать из выпадающего списка Dimensions.

Мобильную версию вашего сайта можно проверить по следующим критериям:

• Подстраивается ли контент сайта под разрешение устройства?
• Закрепляется ли шапка при скролле страницы для удобства пользования?
• Есть ли мобильное меню?
• Удобные ли навигация и поиск в мобильной версии?
• Есть ли кнопка «Вверх» для перехода на первый экран страницы?
• Кликабелен ли номер телефона?
• Есть ли кнопки для перехода в социальные сети?

Например, вот сайты с неоптимизированной мобильной версией:

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

Более 60% пользователей заходят с телефонов, и неоптимизированный сайт может негативно повлиять на эффективность рекламы.

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

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

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

1. Перейдите в раздел «Настройки».
2. Укажите адрес конкретной страницы сайта.
3. Нажмите «Проверить».

После этого вы попадёте на страницу и увидите, подключён ли счётчик, установлены ли цели. Если нет, сможете это поправить.

Шаг 9. Скорость загрузки страниц. Советуем ориентироваться на следующие значения:

• 3 секунды — идеально
• 3–7 секунд — хорошо
• 7–10 секунд — приемлемо
• Больше 10 секунд — плохо

Отчёт по времени загрузки сайта доступен в Яндекс Метрике. В документе вы сможете увидеть и другие показатели из Метрики. Советуем ориентироваться на следующие значения:

• Время загрузки страницы (просто отрисовка) через Метрику для десктопа — менее 2 секунд
• Время загрузки страницы через Метрику для мобайла — менее 2 секунд
• Время загрузки DOM (Document Object Model) и полной загрузки страницы — менее 5 секунд
• Время загрузки ответа сервера (полной загрузки) — менее 0,5 секунды