Разметка страниц

Здесь вы выбираете элементы, которые будете подменять и способ разметки страниц для работы подмен.
 
Для этого есть три способа: визуальный, продвинутый и режим кода.
 

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 на сайт.
 
Не забудьте сделать разметку на всех страницах, где вы собираетесь подменять элементы!