При разработке целевой страницы в конструкторе целевой страницы Unbounce вы можете использовать фрагменты кода для добавления дополнительных функций и элементов. Это может улучшить восприятие ваших посетителей и даже увеличить конверсию. Например, отличный способ совершать телефонные звонки на целевой странице – использовать заголовок прокрутки или «стикер», чтобы следовать за людьми вниз по странице при их прокрутке. Эта тактика может очень хорошо работать на странице рабочего стола, но как она выглядит в мобильном представлении?
Как вы можете видеть на изображении выше, заголовок занимает слишком много места на экране мобильного телефона.
Что ты сейчас делаешь Мы продолжаем бесконечный «год мобильности» в 2016 году. Мы должны не только следить за тем, чтобы наши мобильные приложения работали, но и быть восхитительными, чтобы получать больше конверсий.
Если вы используете Unbounce, как мы, есть простое решение, которое позволяет вам активировать код на рабочем столе, исключая его на мобильном (и наоборот). Я подготовил это руководство, чтобы показать вам, как оно работает, и помочь установить его на своей странице.
Шаг первый:
Сначала скопируйте этот фрагмент кода.
Шаг второй:
После того, как вы скопировали фрагмент кода, перейдите на страницу Unbounce и нажмите кнопку javascripts в левом нижнем углу окна.
Шаг третий:
Когда загрузится окно JavaScript, нажмите «Добавить скрипт в этот вариант» и вставьте скопированный ранее фрагмент в основное поле ввода.
Эту часть легко потерять, но очень важно: Над кодом находится раскрывающееся меню с параметрами, в которых мы хотели бы разместить этот фрагмент кода относительно остальной части HTML страницы. Важно добавить фрагменты кода в нужном месте, чтобы новый JavaScript не мешал другим скриптам, работающим на вашей странице.
Для этого скрипта мы хотим выбрать «перед окончательным тегом тела».
Вы увидите поле для названия вашего сценария. Не забудьте пометить все добавленные сценарии, чтобы вы (или поддержка Unbounce) могли ориентироваться, если что-то пойдет не так.
Шаг четвертый:
Теперь, когда наш фрагмент кода помечен и размещен в правильном месте, мы готовы нацелить наш код.
В этом примере я хочу, чтобы мой заголовок прокрутки загружался только тогда, когда пользователь просматривает страницу на экране рабочего стола или планшета.
Чтобы применить этот код исключительно к рабочему столу, я вставлю JavaScript из заголовка прокрутки, где написано «Код вашего рабочего стола идет сюда». Не забудьте удалить эти дополнительные теги сценария до и после внутреннего сценария.
Заголовок прокрутки теперь будет применяться только к экрану рабочего стола или планшета.
Не забудьте сохранить и повторно опубликовать свою страницу, чтобы вы могли видеть эффекты.
Шаг пятый:
Мы протестируем страницу на настольных и мобильных устройствах, чтобы убедиться, что мы получаем результаты, которые мы ищем. Вы можете увидеть это в функции предварительного просмотра Unbounce или загрузить страницу на ближайшем компьютере и мобильном устройстве.
Изображения показывают, что при просмотре на мобильном телефоне один и тот же заголовок меняется со скролла на статический.
вывод:
Это не должно быть ограничено заголовками прокрутки. Этот скрипт действительно полезен. когда Вам нужна страница, чтобы выглядеть по-разному в мобильной или настольной версии. Это дает вам полный контроль над рабочим столом и мобильным опытом ваших посетителей.
Надеюсь, что это поможет вам оптимизировать целевые страницы Unbounce и повысить коэффициент конверсии.
Хотите узнать больше о том, как оптимизировать свои целевые страницы? Следите за нашим блогом здесь!
