Flat PM один из самых крутых плагинов для размещения рекламы на сайте. Но экспертные блоги имеют свою специфику. В отличие от информационных сайтов с сотнями статей на блогах в разы меньше контента. Основные читатели это постоянное сообщество людей разделяющих взгляды автора. И их доверие – главный авторский капитал. Поэтому, грубые рекламные приемы на таких площадках не приветствуются. Так как же грамотно разметить рекламные блоки на экспертном блоге, используя возможности плагина Flat PM?
В предыдущей статье я начал разбирать эту тему: «Flat PM – плагин для вывода рекламы на сайте». Здесь рассматриваю варианты вывода блоков на ноутбуках и настольных ПК. Для вывода на мобильных будет отдельная публикация.
Начнем с того, что заработок на контекстной рекламе от Яндекса или Google это исключение для авторского блога. Основные источники дохода на нем это:
прямая реклама;
продажа партнерских или собственных продуктов;
реклама экспертных услуг от автора блога.
В качестве главного рекламного инструмента используются статьи, написанные под конкретный продукт. В теле этих статей по смыслу размещены одна/две текстовых ссылки на продающую страницу. А вот яркие рекламные блоки в статьях используются не часто, чтобы избегать ощущения предвзятости автора и заказухи. Но, тем не менее, даже на экспертном блоге есть места, где баннеры будут смотреться органично. А инструменты Flat PM помогут нам повысить их эффективность.
Как создатьбаннер из собственной картинки и сделать его кликабельным
В сети масса обзоров о работе с плагином. И все разбирают вариант, как вставить код готового рекламного блока. Но почему-то тем, как сделать рекламный баннер из своего креатива (картинки), ни кто не захотел поделиться. Или просто я не нашел. А ведь именно такие баннеры приходиться создавать, работая с инфобизнесовыми партнерками.
Пришлось разбираться самому.
Нужно будет повозиться с HTML. Но ни чего сложного – я все покажу.
Сначала поместим приготовленную вами картинку в «Библиотеку медиа» вашего ресурса (1, 2).
Приступаем к созданию рекламного баннера:
Переходим в консоль Ворд Пресс и выбираем Flat PM — «Добавить блок» в левом меню консоли (1). Вы во вкладке «Подблоки». Даем название новому блоку (2). Называем новый подблок (3). Теперь «Добавить медиафайл» (4) и выбираем в «Библиотеке» заготовленную картинку. В черном поле она появиться в виде кода (5).Проверяем чтобы «Блок» и «Подблок» были активированы. Должны стоять зеленые флажки (6, 7). И жмем «Сохранить настройки блока» (8).
Теперь сделаем картинку активной кнопкой
Вот тут начинается самый сок, сосредоточьтесь:
Итак, жмем «Показать макросы» — «Ссылка» (7, 8). Вводим в строку «URL-адрес ссылки:» вашу партнерскую ссылку (9), в строку «Текст ссылки» — подпись под баннером (10), если вам это нужно;
В выпадающем списке «Rel ссылки:» выбираем «nofollow» (11), если не хотим, чтобы роботы её индексировали. В списке «Target ссылки:» (12) выбираем «_blank», если хотим, чтобы открывалось в новом окне. Если нужно, чтобы открывалось в текущем оставляем «_self». И «Вставить» (13);
Ссылка появиться в черном поле, но второй строкой (14). Картинка все еще будет не активной. Но мы копируем открывающую часть тега ссылки и вставляем ее в самое начало первой строки перед кодом картинки (15, 16). Теперь копируем закрывающую часть тега ссылки и вставляем ее уже в самый конец первой строки после кода картинки (17, 18). Строку номер два удаляем полностью;
Жмем «Сохранить настройки блока» (19). Рекламный блок готов.
Создаем баннер партнерки на HTML коде
Иногда партнерская программа предлагает HTML код уже готового рекламного баннера с вашей партнерской ссылкой. Вставить такой креатив на своём блоге проще простого. Описаниями этого процесса ломиться интернет:
Копируем HTML код баннера, который предлагает партнерская программа. Далее просто выполняем последовательно те же шаги, которые были описаны выше: Flat PM — «Добавить блок» (2) — называем блок (3) — называем подблок (4) – переходим в левое черное поле (5).
Теперь отличие от создания блока из своего креатива: в левом черном поле размещаем HTML код вашего баннера (6). В код баннера уже будет вшита кнопка. Поэтому этап создания из креатива активной кнопки пропускаем.
Проверяем чтобы «Блок» и «Подблок» были активированы. Должны стоять зеленые флажки (7, 8). И жмем «Сохранить настройки блока» (9).
Все, блок готов.
В принципе, сам процесс создания баннера завершен. Далее настраивается вывод блока и таргетирование.
Настраиваем вывод блоков
Вывод в сайдбаре и шапке
Вывод блока в шапке сайта (хедере)
Это те элементы блога, которые больше всего находятся перед глазами посетителей и отлично подходят для продвижения партнерских запусков или входа в воронкуфлагманского продукта. Многие шаблоны для Вордпресс позволяют настраивать вывод креативов в сайдбаре и хедере. Но даже если в вашем шаблоне нет такой опции, вас выручит Флатпиэм. И его возможности, как правило, более гибкие. Об этом ниже.
Создаем рекламный баннер, как описано выше. Переходим во вкладку «Параметры ввода» (1). Выбираем «Основано на селекторах (один раз)» и включаем его (2). В пункте «Элемент, относительно которого произойдёт вывод:» селектор (3). У меня будет «.flatpm_header_1». Вы можете вписать что-то своё. Главное на латинице и начинаться должно с точки. В «выберите элемент» у вас автоматически подставится «Свой вариант». В «порядковый номер оставим» единицу. Обязательно ставим галочку «Поиск по всему документу» (4). Остальные настройки на этой вкладке оставляем по умолчанию.
Далее, обратите внимание, что примеры моих демо-блоков для этой статьи выводятся только с ней. Это существенный момент. Ведь если статья написана для продвижения какого-то конкретного продукта, то и рекламные креативы к нему нужно выводить на этой странице. Показывать этот баннер с другими статьями менее эффективно. Там нужно размещать другие. И вот ради таких тонкостей и нужен FlatPM.
Как это сделать? Таргетированием по контенту.
Таргетинг по контенту
Переходим во вкладку «Таргетинг по контенту» (1). В моем случае я оставляю галочку на «Записи», т.к. данная стать находится в них. Далее опускаемся в «Публикации», «в каких публикациях показывать» (2). Кликаем по карандашу (3). В открывшемся окне в черном поле (4) вводим название статьи, где буде показываться баннер. С точностью до запятой, не сокращая. Ждём мгновение, пока плагин найдет на блоге вашу статью. Если вы точно ввели её название, она появится в правом белом поле (5). Жмём на плюсик справа от слова «Запись» (6). Готово.
Если этот баннер должен выводиться с несколькими статьями. Укажите их названия списком.
Если рекламный блок будет показываться на всем ресурсе, кроме конкретной статьи, вы можете исключить её. Для этого проделайте те же операции, но в поле «В каких публикациях не показывать:» (7).
Жмем сохранить (8).
Теперь выполним настройки для вывода блоков конкретно в шапке или сайдбаре.
Переходим во вкладку «Внешний вид» (1), «Настроить» (2), «Блоки» (3). Переходим в «Шапка» (4). И в поле «HTML код #1» (5) вписываем (6):
<div class="flatpm_header_1"></div>
Вы вместо flatpm_header_1 прописываете тот селектор, который указали во вкладке «Параметры ввода» выше (7). Но уже без точки в начале селектора.
Жмем «Опубликовать» (8).
Вывод блока в шапке настроен.
В плагине есть отдельная вкладка (1) для размещения кода в шапке (2) или подвале (3) сайта.
Но эта функция больше подходит для размещения здесь кодов яндекс.метрики, гугл аналитик и т.п.
Для размещения рекламных блоков удобнее способ предложенный мной выше.
Вывод блока в сайдбаре
Для вывода в сайдбаре в плагине есть специальная настройка. Вот здесь (*). Но я предлагаю сделать по тому же принципу что и в шапке. Это более гибкий способ.
Итак, делаем те же настройки, которые делали для блока в шапке.
Отличия только в этом: идём «Внешний вид» (1), «Виджеты» (2). Жмём на плюсик (3), «Посмотреть все» (4). Находим «Произвольный HTML» (5). И вписываем тут наш селектор. Для сайдбара у меня будет(6):
<div class="flatpm_saidbar_1"></div>
Жмём сохранить (7).
Готово.
Выезжающий и прилипающий баннер в сайдбаре — высокая конверсия
Все предложенные ниже приемы вывода блоков не стоит применять одновременно ко всему контенту на ресурсе. Лучше избегать перегруженности рекламой – эффекта той самой «заказухи». Для этого разные приемы привязываются к разным статьям с помощью «таргетирования по контенту». Либо действуют ограниченное время. Например, пока идет активное продвижение партнерского запуска.
Выезжающий
Блоки в сайдбаре это классика, которой пользуются и на экспертных блогах. Но есть способ повысить конверсию этого инструмента. Для этого сделаем самый нижний блок выезжающим. Неожиданное появление нового элемента на странице привлекает к нему внимание. При этом он не перекрывает контент и не раздражает.
Основные этапы по созданию такого блока мы уже рассмотрели выше. Осталось добавить пару новых шагов:
Сначала создаем рекламный блок, как это описано в пункте «Создаем рекламный блок» выше. Далее переходим к настройкам вывода. Они элементарные. Переходим во кладку «Параметры вывода» (1) и «Попап/выезжающий:» (2). Активируем этот режим переводом ползунка в положение «on» (3). Затем я активирую режим вывода блока «Справа снизу» (4). На моём блоге сайдбар справа и блок будет появляться в его поле. Рекламный баннер не перекрывает контент, не раздражает, но при этом заставляет на себя посмотреть.
Соответственно, если сайдбар слева, то активируется положение «Слева снизу».
Задаём момент появления выезжающего баннера. В разделе «Вывести через» (5) включаем пункт «Пикселей» (6) и задаём нужное количество пикселей (7), которое проскролит читатель статьи до момента появления блока. Сейчас я задал его таким образом, чтобы демонстрационный блок выехал примерно в момент, когда вы читаете это описание.
Ещё я поставил галочку в «Выводить крестик» (8), чтобы посетитель мог закрыть блок, если он ему вдруг мешает.
И включил режим «Вывести блок после его закрытия при повторном посещении» (9).
Если нужно, чтобы блок выводился только с конкретной статьёй, настраиваем «Таргетинг по контенту». Это подробно описано выше.
Прилипающий
Другой вариант повысить конверсию блоков в сайдбаре – создать прилипающий блок.
Начинаем, как обычно, с создания блока. Только код блока в этот раз начнем создавать в поле «Для пользователей ADblok» (1). Сейчас поймете почему. Копируем полученный код (2). Переходим в поле «Основной рекламный код» (3), «Показать макросы» (4), жмем «Прилипающий» (5).
В появившемся окне вставляем код блока, который мы скопировали (6). Задаем параметры «Высота прилипающего блока» (7) и «Отступ от верхнего края» (8). Жмем «Вставить» (9). Получаем полную запись прилипающего блока (10). Теперь можно очистить поле «Для пользователей ADblok».
В полученном коде отступ будет задан здесь (11). Он определяет, в каком месте страницы появится прилипающий блок при её прокрутке. А высота задана здесь (12). Он регламентирует, до каких пор блок будет прилипать. Попробуйте поиграть с этими цифрами и сами поймете, как они работают.
Теперь следуем «Параметры ввода» (13), и «Основано на селекторах (один раз)» (14) и создаем «Свой вариант» селектора (15). Включаем поиск по всему документу (16). Код вашего селектора размещаем в нужном месте. Я создал вот таким:
<div class="flatpm_stiking_1"></div>
Код селектора размещаем в сайдбаре.
И задаем таргетирование. Его рассмотрели выше.
Выплывающий баннер при попытке уйти со страницы
Это тип рекламного блока, который выводится по поведенческому признаку. Когда посетитель хочет закрыть страницу. Настройки во многом совпадают с «Выезжающим баннером …» выше.
Начинаем с создания рекламного блока (см. «Создаем рекламный блок» выше). Затем, переходим во вкладку «Параметры вывода» (1) и «Попап/выезжающий:» (2). В «Попап/выезжающий:» активируем этот режим переводом ползунка в положение «on» (3). Теперь активируем вывод блока «По центру» (4). Ставим галочки в «Выводить крестик» (5) и «Вывести блок после его закрытия при повторном посещении» (6). И теперь главная настройка попап баннера: ставим галочку напротив «Вывести блок немедленно, если пользователь попытается закрыть страницу» (7).
Если вы сейчас сделаете движение мышкой в правый верхний угол страницы, то перед вами появиться пример этого блока.
Понятно, что такой показ, это попытка задержать не заинтересованного пользователя и направить его на нужную нам страницу. Но этот же блок будет выводиться и, напротив, очень заинтересованному читателю, который прочитал статью до самого конца. Если вы сейчас проскролите мою статью вниз до плитки рекомендуемых статей, то перед вами снова появится тот же самый демонстрационный баннер.
Это обеспечивают такие настройки: там же во вкладке «Попап/выезжающий:» опускаемся до «Вывести через» (8), включаем параметр «Пикселей» (9). И теперь задаем количество пикселей (10) так, чтобы блок появился точно в нужный момент. В моем примере плитка появляется после 5500 пикселей. У вас цифра будет другой. Это зависит от длины статьи, величины шрифта и т.п. Подбирается методом тыка. Осталось настроить «Таргетинг по контенту» (см. выше), если вам это требуется.
Чем отличается инструмент «Слайдер» от «А/Б тестирования»
Во первых, что нужно знать про «А/Б тестирование»:
Ни какой аналитики кликов внутри Flat PM нет. Поэтому за анализом переходов вам придется обращаться либо к Метрике, либо в ваш партнерский кабинет. Отсюда вывод:«А/Б тестирование» это только заготовка, к которой ещё нужно прикрутить аналитику на других сервисах. Это если вы действительно хотите провести тест. А по-сути, «Слайдер» и «А/Б тестирование» это один инструмент с различными вариациями вывода креативов. И чтобы решить, какой из них вам нужен, внимательно перечитайте два следующих абзаца. Ну, и настройка у них из разных вкладок.
В случае «А/Б тестирования»
Смена креатива происходит при перезагрузке страницы. При каждом ее открытии будет выводиться один из баннеров серии. Т.е. так должно быть. А в реальности страницы иногда кешируются. И ни при каждой перезагрузке обновляется контент. А вот «Слайдер» этим не страдает;
В случае «Слайдера»
рекламные креативы сменяются четко по времени. Один за другим и по-кругу. Время показа регулируется. Но у этого инструмента свой минус. Если посетитель будет находиться на странице не долго, то всегда будет видеть только самые первые слайды. Поэтому прикиньте, как часто должны меняться креативы. И сколько всего их стоит заряжать в «слайдер», чтобы пользователь успел увидеть хотя бы большинство из них.
Настраиваем «Слайдер» и «А/Б тестирование»
Показ блоков созданных одним из этих инструментов можно выводить любым способом, которые я рассмотрел выше. В сайдбаре, хедере, в выезжающем или выплывающем блоке.
«А/Б тестирование»
Создаете запись кода рекламного баннера в черном поле (1). Выше мы это рассматривали.
Нажимаем кнопку «Добавить ещё блок» (2). В новом черном поле создаем код для следующего креатива, который вы приготовили для теста.
И повторяем эти шаги для всех баннеров, которые будите тестировать. Если их у вас два, то два раза. Три – три. И т.д.
Теперь в окошечке «Группа для А/Б» ставим номер группы одинаковый для всех баннеров (1) – правильно, (2) – не правильно.
Переходим в «Параметры вывода» (3), «Основано на селекторах (один раз)» (4), (5) и создаем «Свой вариант» селектора (6). Включаем поиск по всему документу (7). Теперь запись HTML кода с вашим селектором
размещаем в нужном нам месте блога – сайдбар, шапка.
В моем примере я разместил демонстрационные блоки в теле статьи для наглядности. Ну, и настраиваем таргетирование по контенту.
«Слайдер»
Для создания слайдера используем вкладку «Слайдер» (1). Здесь в открывшемся окне задаем время показа каждого слайда отдельно (2) и вписываем код заготовленного креатива в черное поле (3). Затем нажимаем «Добавить ещё» (4) и повторяем для следующего креатива в вашей серии. И так для каждого. В конце жмем «Вставить» (5). Затем переходим «Параметры ввода» (6), и «Основано на селекторах (один раз)» (7) и создаем «Свой вариант» селектора (8). Включаем поиск по всему документу (9). Эти шаги мы рассмотрели выше.
Код вашего селектора размещаем в нужном месте. У меня он выглядит вот так:
И далее таргетирование. В общем, все как с «АБ тестом» выше.
Заключение
Мы рассмотрели несколько инструментов плагина Flat PM для вывода рекламных блоков на вашем блоге эксперта. Они повысят кликабельность, но при этом не оставят осадка предвзятости вашего мнения у читателей.
