blogger.freewebmaster.info/web/Cross-Column2

14 декабря 2015

Как установить рекламу AdSense в мобильном шаблоне Blogger?

Как установить рекламу AdSense в мобильном шаблоне Blogger?
При включенной функции показа мобильного шаблона блога на смартфонах пользователей, по умолчанию, будут отображаться некоторые виджеты, в том числе, рекламного блока AdSense. Как же оптимально расположить рекламу AdSense в мобильном шаблоне Blogger?

Настройка мобильного шаблона Blogger

Краткая информация об общих настройках мобильного шаблона для Blogger, содержится в справке этой системы. На вкладке "Шаблон", панели управления Blogger, нажмите на значок шестеренки под изображением варианта шаблона для мобильных устройств и выберите такой шаблон, который хотите использовать для блога. При значении "По умолчанию", будет отображаться такой же шаблон, как и для компьютера. При выборе значения "Дополнительно", все ваши настройки, внесённые в основной шаблон, отобразятся и в мобильном, поэтому, применяют, как правило, именно это значение.

Создаём отдельные адаптивные блоки AdSense

Согласно оптимальному расположению рекламы AdSense, на Blogger можно установить четыре блока AdSense для контента на обычной веб-версии сайта, которые в мобильном шаблоне Blogger не отобразятся, если не использовать виджеты "AdSense". Хотя и можно отобразить все блоки с рекламой в мобильном шаблоне, указав для соответствующих виджетов HTML/JavaScript атрибут mobile='yes', но такие блоки могут не вписаться в дизайн мобильного шаблона, если не имеют автоматического размера (адаптивные блоки). В любом случае, для мобильных шаблонов лучше создавать отдельные блоки AdSense с адаптивным дизайном, это поможет следить за статистикой показов рекламы на смартфонах.

Ошибка функции сохранения в меню "Дизайн"

Для мобильной веб-версии сайта, так же, как и для основной, достаточно установить четыре блока AdSense для контента, которые не видны в обычном шаблоне. Рекламу будем внедрять с помощью виджетов HTML/JavaScript в меню "Дизайн". С функциями меню "Дизайн", стоит познакомиться поближе, так как при попытке сохранить установленные в некоторые секции виджеты, могут появиться "глюки" и всплывает сообщение "Произошла ошибка. Обновите страницу и повторите попытку.", как показано на изображении ниже.

Ошибка при сохранении меню "Дизайн" в Blogger "Произошла ошибка. Обновите страницу и повторите попытку."

Схема расположения гаджетов меню "Дизайн"

После создания блога, меню "Дизайн" имеет стандартный вид:

Изначальный вид меню "Дизайн" после создания блога Blogger

Здесь стоит обратить внимание на видимую возможность добавить гаджет в позиции "Cross-Column", но это не означает, что нельзя добавить такой гаджет в позиции "Cross-Column 2" - просто перетащите гаджет, созданный в другой позиции. На следующей картинке показан изначальный код секций "Cross-Column" и "Cross-Column 2" в шаблоне Blogger.

Секции "Cross-Column" и "Cross-Column 2" в шаблоне Blogger

Принципиальной разницы между двумя секциями нет, а отличаются они только значениями атрибута "showaddelement", благодаря которому мы видим или не видим опцию "Добавить гаджет" под названием позиции, и наличием в верхней секции атрибута "maxwidgets", ограничивающего количество виджетов секции. Понятно, что данные атрибуты можно удалить или изменить их значения.

Что делать, если выпадающее меню страниц перекрывает блок AdSense?

Чтобы определить подходящую секцию для AdSense, необходимо учитывать особенности отображения виджета "Страницы" в мобильном шаблоне Blogger.

Отображение виджета "Страницы" в мобильном шаблоне Blogger

Как видим, в мобильной версии шаблона Blogger, меню страниц открывается выпадающим вниз списком, и расположенная ниже реклама может им перекрываться, что запрещается правилами AdSense.

Согласно правилам AdSense, раскрывающимся меню не должна перекрываться реклама AdSense

В тоже время, в шаблоне Blogger для настольных компьютеров, меню страниц отображается полностью, его пункты, по умолчанию не раскрываются и рекламу оптимальней размещать ниже такого меню. Поэтому, на блог есть смысл установить два виджета страниц, один из которых предназначен для обычной веб-версии сайта, другой - для мобильной. Между такими страницами, в схеме меню "Дизайн" будут расположены блоки AdSense, один из которых, также, предназначен для обычной веб-версии сайта, другой - для мобильной.

Расположение виджета страниц и AdSense в меню "Дизайн" Blogger

Обратите внимание, в позиции "Cross-Column", уже нет ссылки на добавление гаджета, так как это секции имеет атрибут maxwidgets='1', и один возможный виджет уже добавлен. Если в коде шаблона не увеличить значение атрибута "maxwidgets", то и перетащить виджет в данную секцию не получиться. Но менять что-то здесь, пока необходимости нет.

Так как гаджет страницы, по умолчанию, отображается в мобильном шаблоне, то в обеих веб-версиях блога рядом будет два списка страниц, поэтому, для самого верхнего гаджета страниц, в позиции "Cross-Column", установите атрибут mobile='nо', а для самого нижнего гаджета страниц, в позиции "Cross-Column 2", установите атрибут mobile='only'. Теперь, для виджета AdSense HTML/JavaScript, предназначенного для смартфонов, установите атрибут mobile='only'. Конечно, заморачиваться над расположением страниц в мобильном шаблоне не надо, если они, вообще, не предусмотрены в вашем блоге, но если страницы есть, то теперь, в мобильной версии шаблона Blogger, раскрывающееся меню таких страниц выпадающим вниз списком, не будет перекрывать расположенную ниже рекламу AdSense.

Именуйте виджеты и редактируйте их в мобильной веб-версии блога

Названия гаджетов в секциях "Cross-Column" и "Cross-Column 2" не отображаются на сайте, поэтому, для облегчения поиска их кода в шаблоне, блоки страниц и AdSense лучше озаглавить, например, "Страницы", "Страницы-моб", "AdSense" и "AdSense-моб". Заметил, что гаджеты с добавленным атрибутом mobile='only', после сохранения шаблона и перезагрузки вкладки меню "Дизайн" в Blogger, со схемы дизайна исчезают. В связи с этим редактируйте такие гаджеты или в шаблоне или в мобильной версии, по ссылке "Ваш сайт/?m=1".

Исправление ошибки функции сохранения в меню "Дизайн"

К сожалению, теперь, при нажатии на кнопку "Сохранить расположение" в меню "Дизайн", появился, "глюк" с всплывающим сообщением "Произошла ошибка. Обновите страницу и повторите попытку.", о чем говорилось выше. О том, что это именно глюк, связанный с меню "Дизайн", говорит успешное сохранение изменений в расположении виджетов в меню "Шаблон". После того, как с двух виджетов были удалены атрибуты mobile='only', функция сохранения в дизайне заработала. Вот такой вот глюк. Возможно, исчезновение виджетов со схемы дизайна связано с нарушением функции сохранения. Попытка увеличить число гаджетов в секции "Cross-Column" и перенос туда виджетов с атрибутом mobile='only', успехом не увенчалась, - функция сохранения в дизайне не заработала. Остаётся заметить, что и без этой функции, блог, вполне работоспособен, все изменения делаются и сохраняются непосредственно в шаблоне.



Спасибо за Вашу оценку!




Комментариев нет:

Отправить комментарий