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

В этой статье вы узнаете: как подключить сайт к Google AdSense и РСЯ, как создать рекламные блоки и поместить их код на страницу; как программно с помощью JavaScript настроить места для размещения рекламы и динамически добавить код.

Что такое AdSense и РСЯ? Как осуществляется подключение рекламы?

AdSense и РСЯ – это сервисы для размещения контекстной рекламы на сайтах и в приложениях. С помощью них можно очень удобно получать доход со своей площадки. Он начисляется за клики и показы объявлений.

Сервис AdSense от компании Google, а РСЯ – от Яндекса.

Процесс подключения рекламы к сайту через эти системы выполняется следующим образом:

1. в правилах участия читаем требования, предъявляемые к сайту;
2. при соответствии ресурса требованиям выполняем регистрацию и ожидаем результатов проверки (от нескольких дней до одной недели);;
3. после подключении площадки к сервису (получения одобрения) создаём рекламные блоки и получаем их код;
4. вставляем код в определённые места страниц сайта (где нужно показывать объявления).

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

Как установить рекламные объявления 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: открыть.