Скрипт для вставки рекламы в статью Blogger

Известно, что наибольший доход приносят рекламные блоки, расположенные в тексте статьи, в сообщении блога. На блогах (сайтах), работающих на Blogger, нет возможности вставить рекламный блок в статью стандартными средствами с помощью виджета.

Чтобы рекламные блоки появились в начале и в конце статьи необходимо вставить коды рекламных блоков в HTML шаблон, в тему блога.

Если статьи на блоге большие, более семи тысяч знаков, то выгодно размещать рекламные блоки еще и внутри статьи, один - в середине сообщения, и два блока - в верхней половине статьи.

Вставляем пять блоков рекламы в пост

Рекламные блоки в пост вставляем в следующие места:

1. Перед статьей (before)
2. После первого абзаца (opening paragraph)
3. После верхней 1/4 части статьи (upper quarter),
4. В середине статьи(middle),
5. После статьи (after),

Для вставки пяти рекламных блоков, в коде HTML темы блога ищем строку:
<data:post.body/> (вставляем в окно поиска Ctrl+F). В коде имеется несколько таких строк. Находим вторую сверху строку и вместо неё копируем и вставляем этот код:

<!-- Adsense article start -->
<div id='jobmiddlenew'>
 <div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='adsense-quarter-article'>
<!-- Adsense upper quarter article  -->
<span> Код блока рекламы</span>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'>
 <div class='adsense-before-article'>
<!-- Adsense before article --> 
<span> Код блока рекламы</span>
 </div>
<data:post.body/>
 <div class='adsense-after-article'>
<!-- Adsense after article --> 
<span> Код блока рекламы </span>
 </div>
 </div>
 </div>
 <!-- Скрипт upper quarter Adsense article -->
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/4);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
 <div id='addcodemiddle'>
<div class='adsense-middle-article'>
<!-- Adsense middle article -->
<span> Код блока рекламы</span>
</div>
 </div> 
 <div id='AdCode'>
<div class='adsense-paragraph-article'>
<!-- Adsense opening paragraph article -->
<span> Код блока рекламы</span>
</div>
 </div>                                    
<!-- Adsense article end -->

Скрипт для вставки блоков рекламы

Для вставки трех блоков рекламы внутрь текста сообщения необходимо для каждого блока добавить в код темы свой скрипт.

Скрипт для рекламного блока opening paragraph находится в коде (см. выше), который уже добавлен в тему сайта. Но для его работы необходима загрузка на сайт библиотеки jQuery. В тему блога перед тегом </head> необходимо вставить код загрузки библиотеки:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

Проверьте, возможно в теме блога похожий код уже есть. Цифры 2.1.3 - это версия библиотеки, могут быть в вашей теме другими.

Два других скрипта, для отображения блоков middle и opening paragraph, добавляем в код HTML темы. Для этого копируем и вставляем перед тегом </body> следующий код двух скриптов:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Скрипт вставки рекламы после первого параграфа opening paragraph -->
<script>
$AdCode = $(&quot;#AdCode&quot;).html();
$(&quot;#jobmiddlenew br:lt(1)&quot;).replaceWith($AdCode);
$(&quot;#AdCode&quot;).remove();
</script>

<!-- Скрипт вставка рекламы в середину поста middle  --> 
<script type='text/javascript'> var str1=document.getElementById(&quot;jobmiddlenew&quot;).innerHTML; var str2=str1.length; var str3=str2/2; var substr = str1.substring(str3, str2); var n = substr.search(&quot;&lt;br&gt;&quot;); if(n&lt;0) { n = substr.indexOf(&#39;.&#39;); if(n&lt;0) { n=0; } var firsthalf = str1.substring(0, str3+n+1); var secondhalf = str1.substring(str3+n+1, str2); } else { var firsthalf = str1.substring(0, str3+n+4); var secondhalf = str1.substring(str3+n+4, str2); } var addcode=document.getElementById(&quot;addcodemiddle&quot;).innerHTML; var newbody=firsthalf+addcode+secondhalf; var strnew=document.getElementsByClassName(&quot;post-body entry-content&quot;); strnew[0].innerHTML=newbody; document.getElementById(&quot;addcodemiddle&quot;).innerHTML=&quot;&quot;; </script> 

</b:if>

Скрипт, обеспечивающий вставку в пост рекламного блока upper quarter, переносить к тегу </body> не следует. Скрипт там работать не будет.

Алгоритм работы скриптов

Верхняя строка кода <b:if cond='data:blog.pageType == &quot;item&quot;'> разрешает выполнение скриптов только на страницах сообщений.

Первый скрипт, opening paragraph, вставляет рекламный блок в сообщение после первого абзаца. Число абзацев можно менять. Для этого, участок кода br: lt (1) необходимо заменить на br: eq ( 3 ) , где 3 (число можно менять), это количество абзацев, тегов <br> , после которых в статье появится реклама.

Если в статье меньше трех абзацев (тегов <br>), или тегов совсем нет, то объявление не показывается. Необходимое условие для показа объявлений этим скриптом - это наличие в статье разделителя абзацев, тега переноса строки <br>.

В редакторе, перед написанием сообщения необходимо в "Настройках сообщения" выбрать "Параметры" > "Переносы строк" > "Использовать тег <br>".

Алгоритм скрипта, вставляющего рекламу в середину сообщения, middle, определяет общее количество абзацев в тексте статьи по тегу <br> или предложений - по знаку препинания "точка" в посте. Затем определяет середину поста и вставляет рекламный код в ближайший разрыв между абзацами (тег <br>) или перенос строки клавишей Enter. Для правильной работы этого скрипта перенос строк в сообщении можно делать любым способом, использовать тег <br> или клавишу Enter. Если алгоритм скрипта middle, по какой-то причине не находит места для вставки рекламы в середине поста, то рекламный блок отображается в конце сообщения.

Алгоритм скрипта для блока объявлений upper quarter также определяет общее количество в статье абзацев, делит на 4, и вставляет код рекламного объявления после примерно 1/4 части статьи сверху. Если в этом участке кода: length/4) , цифру 4 заменить, например, на 5 , то реклама появится в статье примерно на уровне 1/5 сверху.

Вставка кода рекламного блока

Код рекламного блока размещают в коде темы вместо строки: <span> Код блока рекламы </span>

Код блока рекламы от Рекламной сети Яндекс имеет формат HTML. Темы Blogger закодированы на языке HML. Перед вставкой кода рекламы в тему блога, необходимо код HTML рекламного объявления преобразовать, конвертировать в формат HML. Делать это удобно с помощью виджета Converter HTML / HML.

Converter HTML / HML

Инструкция:

1. Введите код HTML в поле.
2. Нажмите на кнопку "Convert".
3. Скопируйте полученный код HML.
4. Очистка поля кнопкой "Clear".

Преобразованный код блока рекламы вставляют в код темы блога вместо строки:
<span> Код блока рекламы </span>

Если код рекламного блока вставляют в виджет (гаджет) HTML/JavaScipt, то преобразовывать код с помощью Converter не требуется. Виджет сам конвертирует коды.

До недавнего времени приходилось конвертировать коды и рекламных блоков AdSense. В настоящее время конвертация кодов объявлений AdSense не требуется. Шаблоны тем Blogger теперь принимают коды AdSense в исходном виде.

Как запретить показ рекламных блоков

Совсем не обязательно вставлять в статью все пять блоков рекламы. Если вы решите какой-то рекламный блок не вставлять, то просто участки кода и скрипт этого блока удалите из кода темы блога.

Если не показывать в статье рекламный блок upper quarter, то просто удалите строки кода выделенные голубым цветом.

Выше в статье, участки кода других блоков расположены в тегах <div ... </div> , выделенных жирным шрифтом. Для удаления блока рекламы необходимо удалить строки с этими тегами и все что между ними.

Строчки кода, выделенные зеленым цветом, можно вырезать, если удален код сразу двух блоков opening paragraph и middle. Если хотя бы один из этих блоков остается, то зеленые строчки убирать нельзя.

Иногда необходимо, чтобы рекламный блок отображался только на мобильном или только на декстопном компьютере. Для этого, код рекламного блока внутри жирных тегов <div ... </div> обертывают тегом <b:if cond='data:blog.isMobileRequest . Например, рекламный блок middle будет отображаться только на мобильном, если код будет выглядеть так:

<div id='addcodemiddle'>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<div class='adsense-middle-article'>
<!-- Adsense middle article -->
<span> Код блока рекламы</span>
</div>
</b:if>
</div>

Этот же блок middle будет виден только на декстопе, если:

 <div id='addcodemiddle'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='adsense-middle-article'>
<!-- Adsense middle article -->
<span> Код блока рекламы</span>
</div>
</b:if>
</div>

Рекламные блоки какого вида вставлять в статью

Для вставки в середину и в верхнюю половину статьи рекомендую использовать код нативных объявлений от Google AdSense. Этот вид объявлений был разработан специально для вставки в текст сообщения. Впрочем, сейчас и в Рекламной сети Яндекса появились похожие форматы рекламных блоков.

Перед статьей и после, удобно разместить рекламные блоки AdSense адаптивного формата. Адаптивные блоки сами подстраиваются под размер экрана компьютера.

Если на сайте размещают несколько рекламных блоков AdSense, то этот скрипт из кода объявления: <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> достаточно вставить в код темы сайта только один раз, с кодом объявления вверху страницы. Для сайтов, которые работают на Blogger с URL на https:// рекомендуется этот скрипт рекламных блоков AdSense вставить на сайт один раз и в таком коде:

<script type='text/javascript'>
//<![CDATA[
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
//]]>
</script>

Стили CSS блоков рекламы

Размеры блоков рекламы, обтекание текстом, отступы от текста, расположение по горизонтали, а также другие параметры, регулируются с помощью стилей CSS.

Обязательно на сайтах помощи (справки) рекламных сервисов Google и Яндекс изучите их рекомендации по вставке блоков рекламы.

Пример стилей CSS блоков рекламы

В код HTML темы, перед тегом ]]></b:skin> добавляем стили блоков рекламных объявлений:

.adsense-before-article {clear:both;width:100%;text-align: center;margin: 30px auto;}
.adsense-paragraph-article, .adsense-quarter-article,.adsense-middle-article {clear:both;width:100%;text-align: center;border: 1px solid #ecf0f1;margin: 30px auto;}
.adsense-after-article {clear:both;width:100%;text-align: center;margin: 30px auto;}

Стили CSS для мобильной версии сайта Blogger

В мобильной версии сайта часто возникает необходимость ограничить высоту адаптивного блока рекламы, особенно расположенного в первом экране, перед статьей, или задать другие отступы, изменить обтекание блока текстом и т. д. Делают это с помощью стилей CSS, которые будут исполняться только в мобильной версии блога.

Настройка показа мобильной версии блога

В Blogger имеется возможность настройки показа мобильной версии сайта в двух вариантах. В одном, для показа на мобильном производится перевод сайта с одной темы, декстопной, на другую. В качестве другой, мобильной темы блога используется одна из стандартных (дефолтных) тем Blogger.

В другом варианте, для показа используется та же тема, что и на декстопе, если она адаптирована к показу на мобильных устройствах.

Для настройка показа мобильной версии сайта в меню Blogger выбираем раздел "Тема" и под окном "На мобильных" нажимаем на звездочку.

В открывшемся окне отмечаем пункт "Да, использовать мобильную версию темы при просмотре блога на мобильных устройствах" - если хотите перейти на стандартную, дефолтную блоггеровскую тему . В открывшемся окне необходимо просмотреть и выбрать одну из понравившихся по дизайну тем и сохранить настройки.

Если после нажатия на звездочку, выбрать пункт: "Нет, использовать обычную версию темы при просмотре блога на мобильных устройствах", и сохранить настройки, то на мобильных будет показываться та же тема, что и на декстопных компьютерах.

Пример стилей CSS рекламы для мобильной версии сайта

В зависимости от выбранного варианта настройки показа мобильной версии блога, стили CSS оформляются по разному.

Если используется дефолтная мобильная тема блога, то стили CSS, которые должны исполняться в мобильной версии обертываются в тег <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

В следующем примере рекламный блок before, перед статьей, в мобильной версии сайта будет ограничен по высоте размером 100рх :

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
.adsense-before-article {clear:both;width:100%;text-align: center; max-height: 100px; margin: 20px auto;}
</b:if>

Если в мобильной версии настроен показ той же темы,что и на декстопе, то код CSS, который будет исполняться на мобильном заключают в тег @media .

Например, тот же код для блока before, будет выглядеть так:

@media screen and (max-width:480px){
.adsense-before-article {clear:both;width:100%;text-align: center; max-height: 100px; margin: 20px auto;} }

А в этом примере в мобильной версии не будет отображаться рекламный блок middle:

@media screen and (max-width:480px){
.adsense-middle-article {display: none; margin: 0;} }

Где, 480px - это максимальная ширина экрана мобильного или планшета, на котором не будет отображаться реклама. На экранах большего размера этот код CSS выполняться не будет, реклама будет видна.

Если рекламный блок middle не должен отображаться на декстопном компьютере, то код CSS для этого случая:

@media screen and (min-width:480px){
.adsense-middle-article {display: none; margin: 0;} }

В последнем примере, код CSS исполняется при показе на экранах шириной более 480px.

Коды стилей CSS для мобильной версии добавляем в код темы блога перед тегом ]]></b:skin>
Кроме того, следим за тем, чтобы коды CSS для мобильной версии были расположены на странице ниже соответствующих стилей декстопной версии.

Файл ads.txt

В меню Blogger перейдите в "Настройки", далее в "Настройки поиска", найдите "Персонализированный файл ads.txt", выберите "Изменить", "Использовать персонализированный файл ads.txt?", "Да".
В открывшееся окно добавьте: google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0
Вместо нулей необходимо вставить 16 цифр своего Идентификатора аккаунта AdSense.

Зачем нужен файл ads.txt

В справке AdSense на этот вопрос отвечают так:
При наличии файла ads.txt Google по его содержанию определяет, каким аккаунтам продавцов разрешен показ объявлений в этом корневом домене.

Когда запрашивается объявление для конкретного сайта, мы проверяем, содержит ли корневой домен этого сайта файл ads.txt. Если нет, никаких действий с нашей стороны не последует. Если файл ads.txt присутствует и ваш идентификатор издателя указан правильно, мы проведем аукцион и покажем выигравшее объявление. Если идентификатор издателя неверен, аукцион для этого запроса проводиться не будет.

Наша система автоматически проверяет наличие новых и обновленных файлов ads.txt. Обратите внимание, что при обновлении или удалении файла ads.txt может пройти до 24 часов, прежде чем наша система зарегистрирует изменения.

После размещения файла ads.txt в вашем домене поисковый робот Google будет выполнять следующие действия:

• обрабатывать файл каждые 24 часа;
• проверять, указаны ли в файле идентификаторы продавцов, которым разрешено получать доход от вашего инвентаря.

Файл ads.txt, расположенный по адресу www.domain.com/ads.txt, будет обрабатываться только в том случае, если на него выполняется перенаправление с адреса domain.com/ads.txt.

Проверьте, чтобы файл ads.txt был доступен по URL как с HTTP, так и с HTTPS.

Убедитесь, что при запросе файла возвращается код ответа HTTP 200 ОК .

Пример размещения рекламы на сайте Blogger

В качестве примера размещения рекламы на сайте, посмотрите этот блог на декстопе, планшете и смартфоне. Оцените выбор формата и мест размещения объявлений в разных версиях сайта. В комментариях выскажите свое мнение по этому поводу.