● Корректировки не требуют дополнительного инструментария: отработайте процесс в браузере из любого удобного места. Изменения на сервер вносит уже разработчик.
Для чего же может потребоваться изучение элемента сайта? Чаще всего – для определения элементов, на которые надо привязывать события («Метрику», Google Analytics). Сайт, как мы знаем, состоит из элементов и имеет древовидную структуру, благодаря которой каждый подэлемент занимает свое место и показывается пользователю в строго установленном порядке. Существуют контейнеры, абзацы текста, ссылки, изображения, кнопки, списки, видео…
Интерес к тому или иному блоку напрямую влияет на продающие качества сайта; соответственно, работа с каждым из них будет означать потенциальное улучшение воронки продаж.
Одна из самых полезных для маркетолога возможностей консоли разработчика – это редактирование сайта вручную с автоматическим отображением изменений. Вы редактируете сайт исключительно для себя, никакие правки не применяются к нему в целом, но вы можете запомнить произведенные изменения и внести их уже на сервере. Все очень просто: любые элементы и параметры в консоли могут быть не только просмотрены, но и изменены.
Нужный текст можно править: для этого два раза щелкните по нему левой клавишей.
Схожим образом можно играть с любыми элементами, изменяя сайт так, как вам нравится, чтобы в будущем использовать эти изменения для оптимизации и улучшения. К тому же это позволяет быстрее поставить задачу разработчику, дизайнеру или верстальщику. А если вы сами осваиваете HTML, CSS и движки, то консоль разработчика дает неплохое подспорье в их изучении и применении знаний на практике без вреда для сайта. Как только вы перезагрузите его, все изменения пропадут.
Хотите знать, какие шрифты использует сайт? Ищите по слову font – причем либо в разметке страницы, либо в CSS: грамотный разработчик такой линк на googlefonts не будет врезать в страницу, поскольку это обращение к внешнему серверу.
Хотите быстро увидеть мобильную версию сайта? Легко! Выберите соответствующую иконку в левом верхнем углу консоли разработчика.
После нажатия на иконку надо перезагрузить страницу, чтобы браузер перешел в режим устройства. В JS может быть зашит детектор устройства, который сначала определяет девайс, а потом на базе этого отрисовывает разметку. Банальный пример – есть две ссылки на магазины AppStore и Google Play. На устройствах Android имеет смысл оставить только последнюю, у человека просто нет технической возможности скачать приложение с AppStore. Для этого детектор смотрит, на какой платформе смартфон, и отрисовывает ссылку на соответствующий магазин приложений.
Данный инструмент дает прекрасную возможность оценить юзабилити и качество сайта на мобильных устройствах, если у маркетолога относительно этого возникли сомнения. Обратите внимание, что на панели сверху есть возможность настроить вывод на конкретной модели смартфона:
И, наконец, список Throttling дает вам возможность эмулировать качество интернет-соединения на устройстве. «No throttling» означает, что соединение работает максимально быстро и стабильно. Попробуйте изменить это на нестабильное соединение и посмотрите, как будет вести себя сайт. Если даже в режиме эмуляции он будет загружаться медленно или производить баги, то это повод обратиться к разработчику за оптимизацией.
Главное назначение карты кликов – идентификация самых эффективных и неэффективных зон веб-страницы. Например, если никто не пользуется надоедливым сайдбаром – подумайте о редизайне: скорее всего, хуже вы не сделаете.
Кроме этого, карта кликов позволяет:
● выявить наиболее популярные места на странице для размещения рекламных блоков;
● узнать о проблемах юзабилити;
● проанализировать кликабельность конкретных элементов или зон;
● увидеть, какие именно элементы/разделы/кнопки наиболее удачны;
● собрать данные для запуска A/B-тестов.
Еще один пример: анализируя главную страницу блога TexTerra Daily, мы увидели, что посетители активно пытаются кликать на имя автора цитаты, хотя изначально этот элемент был некликабельным. Тогда мы сгоняли в отдел бэкенда и попросили добавить поле для ссылки на страницу автора. На то, чтобы заполнить его, потребовалось две секунды, зато у посетителей сайта больше нет когнитивного диссонанса, который возникает, когда по клику ничего не происходит – хотя по логике элемент должен быть кликабельным.
Кстати, редизайн главных страниц сайта компании TexTerra и блога TexTerra Daily дал нам +38 % к трафику – кейс по ссылке ниже.
Из опыта компании «Текстерра». Кейс 22
Как мы вырастили трафик на сайте, поменяв всего две страницы
Эта группа отчетов позволяет наблюдать за устройствами и программами, которые используют посетители вашего сайта.
Исследуя данные о поведении пользователей на различных устройствах, можно выявлять проблемные моменты в отображении сайта или ориентировать его на аудитории с соответствующими девайсами.
В частности, вы можете отслеживать следующие критерии:
● типы и бренды устройств (компьютеров, смартфонов, планшетов или Smart TV);
● браузеры пользователей;
● разрешения дисплеев;
● операционные системы;
● версии Flash и Silverlight;
● наличие Java, JavaScript и Cookies.
В данном случае выведена круговая диаграмма визитов с различных устройств, где мы выделили смартфоны производства Apple и Samsung.
Красивый и функциональный футер улучшит взаимодействие посетителя с вашим сайтом.
Функции, которые выполняет футер, могут быть различными. Например, коммерческие сайты часто используют «подвал», чтобы провести нового посетителя в раздел категорий товаров.
Футеры интернет-магазинов, как правило, содержат ссылки не только на ключевые разделы сайта, но и на страницы с:
● купонами/сертификатами / подарочными картами / программой лояльности;
● информацией о работе в компании;
● ответами на часто задаваемые вопросы;
● контактными данными;
● информацией о возврате товара;
● информацией для поставщиков, инвесторов и других партнеров;
● информацией о работе с юридическими лицами.
Кроме того, футер идеален для перелинковки между самыми популярными страницами сайта.
Все URL, размещаемые в «подвале», сквозные. Соответственно, их вес очень мал. Не пытайтесь создать ненужное нагромождение ссылок.
Если верхняя часть главной страницы не зацепила целевого посетителя, «подвал» может дать сайту второй шанс. В футере обязательно сделайте акцент именно на полезной информации:
Большинство разработчиков подходит к наполнению футера чисто формально, размещая там контакты, политику конфиденциальности, страницу «О компании». Этим вы не удивите посетителя. Лучше придумайте что-то более функциональное. Например, подойдет форма подписки на email-рассылку. Можно просто поставить ссылку на блог / раздел с новостями.
Даже если человек принял решение покинуть ваш сайт, совсем не обязательно тыкать в него поп-апами «Уже уходите?!». Лучше разместите аккуратную форму обратной связи в «подвале». Так гость сам примет решение и сможет вернуться к вам через какое-то время.
Сегодня хорошо работают кнопки социальных сетей. Посетитель может не найти ничего интересного на сайте, но на вашей странице во «ВКонтакте», например, ему понравится.
Крупные компании могут опубликовать в «подвале» данные о своих сотрудниках/партнерах/инвесторах.
Если вы разрабатываете сайты, предоставляете услуги интернет-маркетинга, ваши партнеры будут часто на вас ссылаться. Поисковые системы нормально относятся к таким ссылкам. Однако, если вы продаете запчасти для автомобилей или пишете о финансах, появление большого количества ссылок из футеров на ваш сайт выглядит подозрительно. Если ссылки из футеров не закрыты атрибутом nofollow и имеют анкоры с ключевыми словами, вы можете получить санкции.
Полезный материал по теме:
49 «подвалов», которые удерживают посетителей и повышают продажи
Приемы, которые помогут сделать сайт удобным
Показывайте поп-ап хотя бы через минуту после открытия страницы: посетитель должен сначала ознакомиться с контентом. Поп-ап должен появляться при скроллинге страницы на 60–80 %, а не рандомно.
Всплывающие окна раздражают большинство пользователей, особенно если эти окна без разрешения разворачиваются на весь экран.
Не все догадываются, что на совершение конверсий влияют не только заголовки страниц, но и заголовки форм, которые есть на странице («Заказать звонок», «Подписаться на рассылку», отзывы, форма заказа, форма комментария). Продумайте их названия максимально тщательно и таким образом, чтобы они цепляли целевую аудиторию сайта.
Вот тут, например, мы лаконично объяснили, зачем подписываться на нашу рассылку:
Обычно на сервисах-одностраничниках используют стандартную форму заявки с несколькими полями. Чаще всего клиенту нужно указать контактные данные: имя и фамилию, почту или телефон. Но в некоторых сложных сферах (например, при заказе техники) лучше раскрыть тему подробнее. Вот как это сделали специалисты компании «Текстерра» на клиентском сайте: в форме лендинга dellservers.ru клиент может выбрать модуль, параметры, задачи сервера, а может сбросить значения, если что-то пошло не так.