Как добавить пользовательский код на мою целевую страницу?
Вы можете добавить свой HTML-код, CSS-стили и JavaScript на вашу целевую страницу, используя элемент СОБСТВЕННЫЙ КОД.
Блок Свой код не следует использовать для встраивания в редактор полноценных страниц, созданных вне GetResponse. Этот блок следует использовать только для добавления элементов/стилей, которые недоступны в наших нативных опциях.
При работе с пользовательским кодом следует учитывать несколько моментов:
- Вы можете добавить пользовательский код в разделы <body> или <head> вашей целевой страницы. Если вы используете сторонний код, убедитесь, что у вас есть информация о его размещении от поставщика.
- Чтобы соответствовать требованиям GDPR, обязательно информируйте ваших лидов и посетителей о том, что вы используете сторонние формы или код, связанный с тепловым картированием или отслеживанием.
- Добавление нескольких кодов отслеживания, виджетов и т. д. может замедлить работу вашей целевой страницы. Кроме того, перегрузка страницы контентом может привести к тому, что посетители покинут её.
- В редакторе целевых страниц вы увидите только заполнители. Скрипт запускается только в режиме предварительного просмотра и на опубликованной странице. Поэтому сразу после публикации проверьте, работает ли он так, как вы задумали. Не делитесь ссылкой на страницу, пока не убедитесь в её качестве.
- Рекомендуется проверить, корректно ли отображается страница с кодом во всех веб-браузерах, особенно если вы вносите изменения в CSS.
- Наша команда поддержки клиентов может помочь с функциями, доступными в редакторе. Однако мы не предоставляем поддержку и не гарантируем работоспособность любых сторонних скриптов.
Примечание: Ошибки в вашем коде могут нарушить визуальную структуру вашего сайта и даже сделать его нечитаемым. Такие ошибки могут повлиять на работу любого JavaScript, который вы используете, что негативно скажется на макете сайта, позиционировании элементов и его видимости в результатах поисковых систем.
Редактор кода отобразит сообщение об ошибке, если код неполный, содержит синтаксические ошибки, устаревшие атрибуты или другие проблемы. Несмотря на эти предупреждения, вы всё равно сможете сохранить изменения на свой страх и риск.
Добавление пользовательского кода в тело целевой страницы
Раздел <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. Просмотрите опубликованный лендинг и убедитесь, что все элементы отображаются корректно.
