Разметка страниц
Здесь вы выбираете элементы, которые будете подменять и способ разметки страниц для работы подмен.
Для этого есть три способа: визуальный, продвинутый и режим кода.
3.1. Визуальный способ.
При визуальном способе сразу после импорта рекламной кампании, прямо в интерфейсе YAGLA подгружается ваш сайт. Точнее, все посадочные страницы.
Обратите внимание: если вместо нужной сраницы у вас подгружается главная или какая-то другая, или вообще ничего не подгружается, это означает, что у вас стоит редирект. Нужно его отключить. Либо стоит специальная защита. Решение — обратиться к нашим специалистам через чат техподдержки.
Итак, в верхней части вы видите список всех страниц («Размечаемый URL»). Ниже — область, где отображается страница.
При наведении на элементы страницы, у вас будет курсор в виде ладони с указательным пальцем, а сам элемент будет подсвечиваться синей рамкой.
Нужно кликнуть на соответствующий элемент и отметить «Да, сделать динамическим». Допустим, это заголовок, как в нашем примере. Для подмен можно разметить любое количество элементов на странице. Мы рекомендуем не больше пяти, чтобы было удобно анализировать результаты.
В поле «Названия подменяемых элементов» система автоматически присваивает порядковые указатели «Подмена № 1», «Подмена № 2» и т.д. Рекомендуем для удобства давать собственные названия, чтобы дальше, при заполнении таблицы подмен не запутаться что к чему (например, «Заголовок», «Подзаголовок», «Картинка»).
Разметить необходимо каждую страницу из рекламной кампании. То есть, после того, как разметили первую, нажимаете на кнопку «Перейти к разметке следующей страницы».
В поле «Название подменяемых элементов» можно показать на странице (1) или удалить (2) конкретную подмену:
Для чего необходимы данные возможности?
1 — возможность увидеть какой конкретно элемент на странице указан для подмен под данным названием.
Допустим, у вас есть подменяемый элемент «Кнопка». А кнопок на странице несколько. Чтобы убедиться, что вы пометили правильный вариант, кликните на значок «Показать подмену» и система вам его покажет.
2 — убираем из подмен конкретный элемент.
Группировка страниц
Если у вас несколько URL, точнее, несколько однотипных страниц, чтобы облегчить процесс – используйте группировку страниц.
Иконка рядом с подписью «Размечаемый URL»:
Это актуально, когда у вас несколько однотипных лендингов, либо однотипных страниц на сайте, либо множество рубрик каталога / карточек товаров в интернет-магазине, сделанных по одному шаблону.
На всех этих страницах вы хотите сделать подменяемыми, к примеру, два элемента – заголовок и подзаголовок.
При клике на иконку группировки, вы переходите на страницу «Объединение / разъединение страниц».
Галочками отмечаете нужные страницы и нажимаете «Объединить»:
В результате вам достаточно разметить подменяемые элементы только на одной странице, на остальных разметка произойдет синхронно.
Кроме того, вы можете не просто сделать быструю разметку в одной группе, а создать несколько шаблонов (групп), внутри которых будет ряд типовых страниц и в каждом из них провести свою разметку. Это актуально для тех, у кого несколько десятков разноплановых страниц (в интернет-магазинах, например – отдельный шаблон для страниц каталога, отдельный шаблон для карточек товаров и т.д.)
Вот в чем преимущество объединения страниц в визуальном редакторе.
3.2. Режим кода.
Это ручное создание списка подменяемых элементов. В режиме кода иной порядок действий. Он актуален, когда:
- Сайт не отображается в визуальном режиме;
- На сайте настолько запутанная разметка, что невозможно однозначно определить элементы (что именно является заголовком, например);
- На странице есть элементы, которые нельзя выделить в обычном режиме (всплывающие окна, меняющиеся блоки после какого-то действия посетителя и т.д.)
YAGLA присваивает подменяемому элементу код (класс), который вы должны вручную вставить на сайт:
Работа состоит из двух этапов:
1) Нажать на кнопку «Добавить подменяемый элемент» и выбрать тип элемента (текст, картинка, фоновая картинка или элемент input).
Под каждый добавленный элемент YAGLA сгенерирует уникальное имя класса.
2) В коде сайта элементам, которые вы хотите подменять, нужно прописать класс, сгенерированный YAGLA.
При клике на вопросительный знак появляется окно с подсказкой, как это сделать:
3.3. Продвинутый режим.
Так же, как и режим кода, актуален при сложностях с визуальной разметкой.
Здесь обратная логика: вы сами копируете с сайта код элемента, который хотите сделать подменяемым, и вставляете его в поле «Селектор»:
Обратите внимание: продвинутый режим требует знания css и html. Поэтому лучше поручить это программисту.
В итоге вы добавляете столько элементов, сколько вам нужно; сохраняете сделанную разметку и переходите к следующему шагу – установке кода YAGLA на сайт.
Не забудьте сделать разметку на всех страницах, где вы собираетесь подменять элементы!