Как добавить пользовательский код на мою целевую страницу?
Вы можете добавить свой HTML-код, CSS-стили и JavaScript на вашу целевую страницу, используя элемент СОБСТВЕННЫЙ КОД.
При работе с пользовательским кодом следует учитывать несколько моментов:
- Вы можете добавить пользовательский код в разделы <body> или <head> вашей целевой страницы. Если вы используете сторонний код, убедитесь, что у вас есть информация о его размещении от поставщика.
- Чтобы соответствовать требованиям GDPR, обязательно информируйте ваших лидов и посетителей о том, что вы используете сторонние формы или код, связанный с тепловым картированием или отслеживанием.
- Добавление нескольких кодов отслеживания, виджетов и т. д. может замедлить работу вашей целевой страницы. Кроме того, перегрузка страницы контентом может привести к тому, что посетители покинут её.
- В редакторе целевых страниц вы увидите только заполнители. Скрипт запускается только в режиме предварительного просмотра и на опубликованной странице. Поэтому сразу после публикации проверьте, работает ли он так, как вы задумали. Не делитесь ссылкой на страницу, пока не убедитесь в её качестве.
- Рекомендуется проверить, корректно ли отображается страница с кодом во всех веб-браузерах, особенно если вы вносите изменения в CSS.
- Наша команда поддержки клиентов может помочь с функциями, доступными в редакторе. Однако мы не предоставляем поддержку и не гарантируем работоспособность любых сторонних скриптов.
Добавление пользовательского кода в тело целевой страницы
Раздел <body> целевой страницы – это основная область, где отображается основной контент, такой как текст, изображения, видео и интерактивные элементы (например, формы подписки). Он расположен между заголовком и нижним колонтитулом, служа центральным пространством для передачи информации и вовлечения посетителей.
Чтобы добавить пользовательский код в тело вашей целевой страницы:
- В редакторе целевых страниц нажмите кнопку Элементы.
- Перетащите элемент Свой код в содержимое вашей страницы. Обратите внимание, что редактор выделит места, куда можно его разместить.
- Нажмите на объект СОБСТВЕННЫЙ КОД, чтобы открыть панель инструментов, и введите свой код в редакторе справа.
В теле страницы можно использовать три типа кода:
- HTML – стандартное HTML-форматирование, например:
<p> Текст </p> - CSS – код CSS необходимо размещать между тегами style:
<style> CSS-код </style> - JavaScript – код JavaScript необходимо размещать между тегами script:
<script> JavaScript-код </script>
Если вы хотите использовать форматирование Less или Sass, сначала скомпилируйте его в CSS, а затем поместите между тегами style:<style> </style>
Вы также можете настроить дополнительные параметры для элемента “Пользовательский код”:
- Добавить дополнительные классы – включите эту опцию, чтобы добавить классы в контейнер элемента и стилизовать его по вашему усмотрению.
- Абсолютное позиционирование – включите эту опцию, чтобы разместить пользовательский код в любом месте вашей целевой страницы. Рекомендуем использовать этот вариант только в случае необычного дизайна, который невозможно создать другими способами. Использование объектов с абсолютным позиционированием может ухудшить отображение страницы на мобильных устройствах. больше здесь
- Скрыть на мобильных – включите эту опцию, чтобы скрыть результат работы пользовательского кода при открытии страницы на мобильных устройствах.
Добавление пользовательского кода в раздел <head> целевой страницы
Раздел <head> целевой страницы содержит метаданные и информацию о странице, такие как её заголовок, кодировка символов, подключенные таблицы стилей, скрипты и SEO-теги. Этот раздел не отображает контент напрямую, но предоставляет важные инструкции для браузеров и поисковых систем.
Чтобы добавить пользовательский код в раздел <head> целевой страницы:
- В редакторе целевых страниц нажмите кнопку Мои страницы.
- Наведите курсор на кнопку действий рядом с главной страницей и нажмите Настройки.
- В окне Настройки страницы перейдите на вкладку Элемент <head> и вставьте туда свой или сторонний скрипт.
Примечание: изменения сохраняются автоматически при выходе из текстового поля.
Используйте теги, чтобы указать, как код должен быть обработан:
- Для HTML используйте HTML-теги, например:
<h2> </h2> - Для CSS оборачивайте код в теги
<style> </style> - Для JavaScript оборачивайте код в теги
<script> </script>
Шаги для лендингов версии legacy
ы можете добавить собственный код (HTML, CSS и JavaScript) на лендинг с помощью специального блока в редакторе целевых страниц. Используйте эту функцию, если вам необходимо добавить инструменты и виджеты, которых нет в редакторе.
Код будет добавлен к версиям лендинга для компьютеров и мобильных устройств. Если вы планируете проводить A/B тестирование, не забудьте добавить блок с собственным кодом на каждый вариант посадочной страницы. Код также можно добавить на страницу благодарности.
Что следует помнить при работе с собственным кодом:
- Собственный код можно добавить только в раздел <body>
- В целях соответствия требованиям GDPR обязательно сообщите потенциальным клиентам и посетителям о применении любых сторонних форм или кода, в которых используются технологии составления тепловых карт и отслеживания.
- Добавление нескольких кодов отслеживания, виджетов и т. д. может замедлить скорость загрузки лендинга. Кроме того, из-за избыточного количества контента пользователи могут уйти со страницы.
- В редакторе целевых страниц отображается только блок для вставки собственного кода. Работу добавленного кода можно проверить только в режиме предпросмотра или на опубликованном лендинге. Всегда просматривайте страницу сразу после ее публикации, чтобы проверить работу добавленного кода. Не делитесь ссылкой, пока не убедитесь в качестве вашей посадочной страницы.
- Рекомендуем проверять отображение страниц с добавленным кодом во всех браузерах, особенно если вы изменяете стили CSS.
- Наш отдел поддержки клиентов может предоставить помощь по использованию стандартных функций редактора. Мы не предоставляем поддержку по использованию сторонних скриптов и не можем гарантировать их работоспособность.
Собственный код можно добавить в новый или существующий шаблон в редакторе. Как это сделать:
1. Перейдите Лендинги и выполните одно из следующих действий:
- нажмите Создать лендинг, чтобы создать новую страницу
- нажмите Настроить страницу в меню Действия рядом с названием страницы.
2. Дважды нажмите на значок Собственный код, чтобы добавить блок с собственным кодом в шаблон страницы.
Блок появится в левом верхнем углу текущего раздела страницы.
При двойном щелчке по значку появится окно для добавления собственного кода.
3. (По желанию) Если вы хотите, чтобы блок с вашим кодом располагался в конкретном месте страницы, просто перетащите его в это место. Затем дважды нажмите на блок, чтобы открыть окно для добавления собственного кода.
4. Вставьте или напишите код. Не забудьте закрыть скрипт с помощью тегов <script> (для JavaScript). Если необходимо добавить несколько фрагментов кода, добавляйте их друг под другом.
5. (По желанию) Если вы проводите A/B Тестирование, повторите шаги 2-4 для каждой версии страницы.
6. Во время создания новой страницы нажмите значок мобильного телефона, чтобы сгенерировать ее мобильную версию. Если вы редактируете существующую страницу, используйте эту кнопку, чтобы посмотреть изменения в мобильной версии.
7. (По желанию) Нажмите кнопку Предпросмотр, чтобы проверить, правильно ли отображаются добавленные с помощью кода элементы, которые должны видеть посетители.
8. Сохраните изменения или опубликуйте лендинг.
9. Просмотрите опубликованный лендинг и убедитесь, что все элементы отображаются корректно.
