Как подключить рекламу AdSense и РСЯ к сайту?

В этой статье вы узнаете: как подключить сайт к Google AdSense и РСЯ, как создать рекламные блоки и поместить их код на страницу; как программно с помощью JavaScript настроить места для размещения рекламы и динамически добавить код.
Что такое AdSense и РСЯ? Как осуществляется подключение рекламы?
AdSense и РСЯ – это сервисы для размещения контекстной рекламы на сайтах и в приложениях. С помощью них можно очень удобно получать доход со своей площадки. Он начисляется за клики и показы объявлений.
Сервис AdSense от компании Google, а РСЯ – от Яндекса.
Процесс подключения рекламы к сайту через эти системы выполняется следующим образом:
- в правилах участия читаем требования, предъявляемые к сайту;
- при соответствии ресурса требованиям выполняем регистрацию и ожидаем результатов проверки (от нескольких дней до одной недели);;
- после подключении площадки к сервису (получения одобрения) создаём рекламные блоки и получаем их код;
- вставляем код в определённые места страниц сайта (где нужно показывать объявления).
После этого эти сервисы будут показывать рекламные баннеры и вам будут начисляться вознаграждение за клики и просмотры.
Как установить рекламные объявления Google AdSense на сайт?
AdSense предъявляет следующие требования к участникам программы:
- качественный, оригинальный и не запрещённый правилами этой сети контент на сайте;
- возраст участника больше 18 лет;
- доступ к HTML-коду ресурса, для того чтобы подтвердить право собственности на сайт.
При соответствии этим условиям переходим к заполнению регистрационной формы (необходимо иметь аккаунт Google).

Вводим корректные данные и отправляем форму. После успешной проверки, мы переходим в личный кабинет в раздел «Объявления».

Здесь мы можем выбрать между самостоятельным (ручным) размещением объявлений на сайте и автоматическим.
Автоматизированные объявления
Автоматизированные объявления — это автоматический способ размещения объявлений на ресурсе. От издателя требуется только вставить предложенный код, а всё остальное за вас будет делать сама система (т.е. искать места размещений и отображать в них объявления).

С одной стороны, это очень удобно. Но с другой, это довольно сильное ограничение, т.к. вы не можете самостоятельно настроить места для объявлений и проводить с ними различные тесты.
При использовании автоматизированных объявлений вы не можете точно знать где они отобразятся на странице, система может их расположить в любых местах, в том числе и в самых не подходящих (например, в шапке, меню, футере). В некоторых случаях это даже может приводить к искажению макета сайта.
Кроме этого, при размещении не учитываются рекламные места других партнёрских сетей, в результате реклама может быть вставлено близко к другой.
В настройках, конечно, можно удалить различные места размещений. Но это нужно постоянно отслеживать и вносить в изменения в настройки.
Если минусы это способа вы принимаете и они для вас не являются принципиальными, то тогда используйте его. Тем более что подключение и настройка рекламы AdSense таким образом выполняется в пару кликов.
В настройках мы можем выбрать форматы объявлений, а также поэкспериментировать с количеством объявлений для показа:

Ручная настройка объявлений
Процесс работы с обычными объявлениями начинаются с их создания. Для этого его нужно перейти на вкладку «По рекламному блоку».

Виды рекламных блоков в Google AdSense:
- медийные объявления;
- объявления в фидах;
- объявления в статьях;
- рекомендуемый контент;
- поисковая система.
Для создания нужного блока нужно кликнуть на его карточку, указать ему название и настроить его внешний вид.
Пример настройки медийного объявления:

После настройки нажмите на кнопку «Создать». Полученный код объявления нужно скопировать и разместить его на странице там, где должно показываться объявление.

Как настроить показ РСЯ рекламы на сайте?
Сайт может присоединиться к рекламной сети Яндекса, если он отвечает определённым требованием.
Среди них:
- материалы сайта должны быть полезны для людей и иметь тематику, не запрещенную пправилам участия в РСЯ;
- сайт должен располагаться на платном хостинге;
- количество уникальных посетителей должно быть больше 500 человек в сутки (для этого необходимо предоставить доступ к счётчику, при помощи которого на сайте отслеживается посещаемость).
Регистрация в рекламной сети Яндекса начинается с нажатия на кнопку «Присоединиться» и заполнения анкеты для будущих партнёров. Заявка на участие будет проходить модерацию около недели. Если её одобрят, то вам придёт письмо с положительным ответом на почту.

После этого можно переходить к созданию рекламных блоков в личном кабинете. Осуществляется это посредством кнопки «Добавить RTB-блок».

В открывшемся диалоговом окне на вкладке «Общие» вам нужно выбрать тематическую площадку, уровень приватности, версию сайта и ввести название блока.

На следующей вкладке добавить форматы, которые желаете показывать в этом блоке.

После завершения настройки необходимо скопировать код и вставить его то место HTML разметки, в котором хотите отображать это объявление.

Как подключить рекламу с помощью JavaScript?
Вручную вставлять коды для показа рекламы на сайте довольно трудоёмкая процедура. Тем более, если всё это ещё сопровождается регулярной сменой местоположения блоков на странице, например в целях проведения различных экспериментов.
Подключить рекламу к странице и настроить её расположение можно не только вручную добавляя код в нужные места страницы или шаблона, но и посредством JavaScript.
Для этого можно написать небольшой скрипт:
(function () { // функция для создания элемента, который в дальнейшем будет использоваться сервисами AdSense и РСЯ для размещения в нём рекламы function createAd(id, className) { var hasYandex = className === 'adsbyyandex'; var tag = hasYandex ? 'div' : 'ins'; var $element = document.createElement(tag); $element.className = className; if (hasYandex) { $element.id = id; } else { $element.style.display = 'block'; $element.dataset.adClient = adClientByGoogle; // ca-pub-xxxxxxxxxxxxxxxx $element.dataset.adSlot = id; $element.dataset.adFormat = adFormatByGoogle; // auto $element.dataset.fullWidthResponsive = fullWidthResponsiveByGoogle; // true } $element.style.marginTop = '15px'; $element.style.marginBottom = '15px'; return $element; } // функция для вставки элемента (рекламного блока) после указанного элемента function insertAdAfterElement(id, className, selector, index, media) { if (!window.matchMedia(media).matches && media !== undefined) { return; } var $ad = createAd(id, className); var $elements = document.querySelectorAll(selector); if ($elements.length > index) { $elements[index].parentNode.insertBefore($ad, $elements[index].nextSibling); } } // функция для вставки элементов (рекламных блоков) через каждые n-символов function insertAdsAfterNChars(ads, selector, nChars, media) { var accumChars = 0; // накопленное количество символов var accumTotalChars = 0; // итоговое накопленное количество символов var totalChars = 0; // всего символов var indexAd = 0; // текущий индекс рекламного объявления var $elements = document.querySelectorAll(selector); if (!window.matchMedia(media).matches && media !== undefined) { return; } for (var i = 0, length = $elements.length; i < length; i++) { totalChars += $elements[i].textContent.length; } for (var i = 0, length = $elements.length; i < length; i++) { var numberChars = $elements[i].textContent.length; accumChars += numberChars; accumTotalChars += numberChars; if (accumTotalChars + nChars >= totalChars) { break; } if (accumChars >= nChars) { if (indexAd >= ads.length) { break; } var $ad = createAd(ads[indexAd].id, ads[indexAd].className); $elements[i].parentNode.insertBefore($ad, $elements[i].nextSibling); accumChars = 0; indexAd++; } } } // функция для инициализации рекламы function initAds() { // РСЯ var $ads = document.querySelectorAll('.adsbyyandex'); for (var i = 0, length = $ads.length; i < length; i++) { (function (w, d, n, adId, s, t) { w[n] = w[n] || []; w[n].push(function () { Ya.Context.AdvManager.render({ blockId: adId.slice(11), renderTo: adId, async: true, }); }); t = d.getElementsByTagName('script')[0]; s = d.createElement('script'); s.src = '//an.yandex.ru/system/context.js'; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, 'yandexContextAsyncCallbacks', $ads[i].id); } // AdSense $ads = document.querySelectorAll('.adsbygoogle'); for (var i = 0, length = $ads.length; i < length; i++) { (adsbygoogle = window.adsbygoogle || []).push({}); } if ($ads.length) { // загрузка adsbygoogle.js var s = document.createElement('script'); s.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; s.async = true; document.head.appendChild(s); } } })();
Этот код состоит из 5 функций:
createAd
– выполняет создание элемента, который в дальнейшем будет использоваться сервисами AdSense и РСЯ для размещения в нём рекламы (используется вinsertAdAfterElement
иinsertAdsAfterNChars
);insertAdAfterElement
– применяется для вставки элемента (рекламного блока) после указанного элемента;insertAdsAfterNChars
– предназначена для вставки элементов (рекламных блоков) через каждые n-символов;initAds
– нужна для инициализации рекламы и загрузки внешних скриптов («context.js» и «adsbygoogle.js»).
Первую функцию (createAd
) непосредственно вызывать не нужно, она используется в других функциях.
Синтаксис функции insertAdAfterElement
:
/* id - id рекламного блока (yandex_rtb_R-A-xxxxxx-x или xxxxxxxxxx) className - указываем adsbyyandex или adsbygoogle selector - селектор для выбора элементов, после одного из которых следует вставить рекламный блок index - индекс элемента из выбранных, после которого нужно вставить рекламный блок media - медиа-запрос при соответствии которому следует вставить рекламный блок (если значение данному параметру не установить или задать undefined, то рекламный блок будет вставлен вне зависимости от каких-то условий) */ function insertAdAfterElement(id, className, selector, index, media) { ... }
Синтаксис функции insertAdsAfterNChars
:
/* ads - массив рекламных блоков, которые нужно вставить через каждые nChars-символов: [ { id: '...', className: '...', }, { id: '...', className: '...', }, ... ] selector - селектор для выбора элементов, после которых через каждые nChars-символов нужно вставить рекламные блоки nChars - количество символов media - медиа-запрос при соответствии которому следует вставить рекламные блоки (если значение данному параметру не установить или задать undefined, то рекламный блок будет вставлен вне зависимости от каких-то условий) */ function insertAdsAfterNChars(ads, selector, nChars, media) { ... }
Пример применения скрипта, приведённого выше для вставки рекламы в нужные места страницы:

// настройки Google Ad const adClientByGoogle = 'ca-pub-xxxxxxxxxxxxxxxx'; const adFormatByGoogle = 'auto'; const fullWidthResponsiveByGoogle = 'true'; // после загрузки DOM document.addEventListener('DOMContentLoaded', function () { // вставим РСЯ блок после 2 параграфа, расположенного в article (max-width: 575px) insertAdAfterElement('yandex_rtb_R-A-xxxxxx-x', 'adsbyyandex', 'article p', 1, '(max-width: 575px)'); // вставим РСЯ блок после 2 параграфа, расположенного в article (min-width: 576px) insertAdAfterElement('yandex_rtb_R-A-xxxxxx-x', 'adsbyyandex', 'article p', 1, '(min-width: 576px)'); // вставим рекламу через каждые 2500 символов insertAdsAfterNChars( [ { className: 'adsbyyandex', id: 'yandex_rtb_R-A-xxxxxx-x' }, { className: 'adsbygoogle', id: 'xxxxxxxxxx' }, { className: 'adsbyyandex', id: 'yandex_rtb_R-A-xxxxxx-x' }, ], 'article p', 1500 ); // вставим рекламный блок AdSense в aside после 4 элемента div, расположенного в нём insertAdAfterElement('xxxxxxxxxx', 'adsbygoogle', 'aside>div', 3, '(min-width: 992px)'); // выполним инициализацию initAds(); });
Полный пример скрипта доступен на GitHub Gist: открыть.