Установка кода плеера CPMArena

CPMArena Loader — это легковесный JavaScript-код, который загружает и управляет рекламным плеером на вашем сайте. Правильная установка кода напрямую влияет на скорость загрузки, видимость рекламы и ваш доход.

Установка плеера

🚀 Рекомендуемый способ: один загрузчик + блоки

Как у Яндекс.РСЯ и Google: загрузчик ставится один раз на сайт и управляет всеми рекламными блоками страницы. Для каждого блока — лёгкий контейнер. Это быстрее (один запрос конфигурации на страницу) и чище: не нужно вставлять loader.js повторно для каждого блока.

Шаг 1. Загрузчик (один раз, между <head> и </head>)

<!-- CPM Arena: загрузчик (вставьте ОДИН раз в <head>) -->
<script>window.cpmArenaCb=window.cpmArenaCb||[];</script>
<script src="https://cpmarena.com/loader.js"
        data-site="site_XXXXXX"
        async
        fetchpriority="high"
        data-no-defer="true"
        data-cfasync="false"
        crossorigin="anonymous"></script>

Шаг 2. Код блока (в нужном месте страницы)

<!-- CPM Arena: блок (вставьте в нужное место страницы) -->
<div data-cpm-block="site_XXXXXX_1"></div>

Программный вызов (для SPA и динамических вставок)

Если контент подгружается динамически (SPA, AJAX), используйте очередь команд cpmArenaCb и CPM.render() — вызовы, отправленные до загрузки loader.js, выполнятся автоматически после:

<!-- Для SPA / динамических вставок -->
<script>
  window.cpmArenaCb = window.cpmArenaCb || [];
  window.cpmArenaCb.push(function () {
    CPM.render({ block: "site_XXXXXX_2", container: "#my-slot" });
  });
</script>

♾️ InRead в бесконечной ленте — макрос %%CPM_UID%%

Если один и тот же InRead-блок показывается в каждой статье бесконечной прокрутки, рекламной системе нужен уникальный id контейнера в каждой статье — иначе она отрисует рекламу только в первой. Для этого в коде блока используйте макрос %%CPM_UID%%: загрузчик подставит уникальное значение для каждой статьи автоматически.

<!-- В коде блока (админка → Стек) поставьте %%CPM_UID%%
     в id контейнера И в renderTo — строки должны совпадать. -->
<div id="yandex_rtb_R-A-XXXXXX-YYY-%%CPM_UID%%"></div>
<script>
  window.yaContextCb = window.yaContextCb || [];
  yaContextCb.push(() => {
    Ya.Context.AdvManager.render({
      blockId: "R-A-XXXXXX-YYY",
      renderTo: "yandex_rtb_R-A-XXXXXX-YYY-%%CPM_UID%%"
    });
  });
</script>

📌 Классический способ (один тег на блок)

Альтернатива для простых случаев и обратной совместимости: один <script> с data-block на каждый блок. Можно вставлять в <head> или перед закрывающим </body>.

<!-- CPMArena Loader -->
<script 
  src="https://cpmarena.com/loader.js"
  data-site="site_XXXXXX"
  data-block="site_XXXXXX_1"
  async
  fetchpriority="high"
  data-no-defer="true"
  data-cfasync="false"
  crossorigin="anonymous"
></script>

⚡ Быстрая загрузка (для первого экрана)

Если рекламный блок расположен в первом экране (above the fold), используйте preconnect и preload для максимальной скорости:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ваш сайт</title>
  
  <!-- ⚡ БЫСТРАЯ ЗАГРУЗКА: Preconnect к CDN -->
  <link rel="preconnect" href="https://cpmarena.com">
  <link rel="dns-prefetch" href="https://cpmarena.com">
  
  <!-- Preconnect к рекламным системам (опционально) -->
  <link rel="preconnect" href="https://an.yandex.ru">
  <link rel="preconnect" href="https://ads.adfox.ru">
  
  <!-- ⚡ КРИТИЧНО: Preload loader.js для первого экрана -->
  <link 
    rel="preload" 
    href="https://cpmarena.com/loader.js" 
    as="script"
    crossorigin="anonymous"
  >
  
  <!-- CPMArena Loader -->
  <script 
    src="https://cpmarena.com/loader.js"
    data-site="site_XXXXXX"
    data-block="site_XXXXXX_1"
    async
    fetchpriority="high"
    data-no-defer="true"
    data-cfasync="false"
    crossorigin="anonymous"
  ></script>
</head>
<body>
  <!-- Ваш контент -->
</body>
</html>

Что это даёт?

• preconnect — браузер заранее устанавливает соединение с сервером плеера
• preload — браузер получает указание начать загрузку loader.js заранее
• async — скрипт не блокирует рендеринг страницы

📄 Установка в конце <body>

Для Sticky и Fullscreen классический код можно разместить перед закрывающим </body>. Для InRead вставляйте его в нужное место статьи:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ваш сайт</title>
  
  <!-- Preconnect для ускорения -->
  <link rel="preconnect" href="https://cpmarena.com">
</head>
<body>
  <!-- Ваш контент -->
  
  <!-- CPMArena Loader в конце body -->
  <script 
    src="https://cpmarena.com/loader.js"
    data-site="site_XXXXXX"
    data-block="site_XXXXXX_1"
    defer
    fetchpriority="high"
    crossorigin="anonymous"
  ></script>
</body>
</html>

Плюсы:

• Не блокирует загрузку критичного контента
• Подходит для закреплённых блоков, которым не нужно место внутри статьи

Минусы:

• Реклама начнёт загружаться позже; часть посетителей может уйти со страницы до показа
• Если у пользователя медленный интернет, блок может не успеть показаться → потеря дохода

🔄 Ленивая загрузка (Lazy Load)

Ленивая загрузка откладывает запрос рекламы до приближения блока к видимой области страницы. Её настраивают в кабинете; код вставки менять не нужно.

При самостоятельном управлении Sticky-блоком откройте вкладку «Основные» и настройку «Ленивая загрузка (Lazy Load)». Поле «Отступ (px)» задаёт расстояние, с которого начинается загрузка. После изменения нажмите «Применить».

Если размещения настраивает команда CPM Arena, передайте пожелания менеджеру. У InRead отдельного переключателя Lazy Load в кабинете нет. Проверьте поведение своего блока на странице, в том числе при подгрузке новых статей.

📦 Несколько блоков на одной странице

В рекомендуемом режиме после загрузчика (Шаг 1) добавьте только лёгкие контейнеры — по одному на блок с уникальным data-cpm-block. Так можно собрать полную монетизацию страницы: sticky + несколько InRead + fullscreen.

<!-- В <head> — ОДИН раз: загрузчик (см. Шаг 1) -->

<!-- Затем в нужных местах страницы — только лёгкие контейнеры: -->
<div data-cpm-block="site_XXXXXX_1"></div>  <!-- Sticky -->
<div data-cpm-block="site_XXXXXX_2"></div>  <!-- InRead #1 -->
<div data-cpm-block="site_XXXXXX_3"></div>  <!-- InRead #2 -->
<div data-cpm-block="site_XXXXXX_4"></div>  <!-- Fullscreen -->

В классическом режиме каждый блок — отдельный <script> с уникальным data-block (остальные атрибуты одинаковые):

<!-- Sticky блок (все устройства) -->
<script src="https://cpmarena.com/loader.js"
        data-site="site_XXXXXX"
        data-block="site_XXXXXX_1"
        async fetchpriority="high"
        data-no-defer="true" data-cfasync="false"
        crossorigin="anonymous">
</script>

<!-- InRead блок (вставить в нужное место контента) -->
<script src="https://cpmarena.com/loader.js"
        data-site="site_XXXXXX"
        data-block="site_XXXXXX_2"
        async fetchpriority="high"
        data-no-defer="true" data-cfasync="false"
        crossorigin="anonymous">
</script>

Особенности работы нескольких блоков:

• На мобильных устройствах (<768px) работает только один sticky-блок на страницу — остальные sticky автоматически пропускаются
• InRead (в контенте) и Fullscreen (overlay) блоки не входят в это ограничение на число Sticky-блоков
• Если нужно несколько sticky — настройте таргетинг в админке: один блок для «Все устройства», остальные для «Только Desktop»

📊 Как выбрать способ установки

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

✨ Рекомендации по загрузке

Проверьте первый экран

Не откладывайте загрузку плеера произвольным таймером. Для блока в первом экране проверьте время появления рекламы и влияние на основной контент.

Используйте preconnect по необходимости

Предварительное соединение может сократить ожидание первого запроса. Его эффект зависит от сети, кеша и других ресурсов страницы.

<link rel="preconnect" href="https://cpmarena.com">
<link rel="dns-prefetch" href="https://cpmarena.com">

Проверьте медленное соединение

В DevTools включите ограничение скорости сети. Убедитесь, что основной контент остаётся доступным, реклама появляется в подходящий момент и не сдвигает текст.

Оцените Core Web Vitals

Измеряйте LCP, INP и CLS для страницы целиком. Порядок проверки — в разделе «Производительность».

Проверка после установки

1. Откройте типовые страницы на компьютере и телефоне: проверьте первый экран, место в статье, прокрутку и закрытие плеера.
2. Убедитесь, что реклама не перекрывает меню, кнопки и текст. Проверьте состояние с рекламой и без заполнения.
3. Если контент подгружается динамически, проверьте переход и новую порцию ленты отдельно.
4. Сравните производительность в одинаковых условиях. Один запуск PageSpeed не доказывает отсутствие влияния на всех посетителей.
5. При проблеме запишите URL, устройство, время и наблюдаемый эффект. Передайте их поддержке без персональных данных посетителей.

Подробнее о проверке LCP, INP и CLS — в инструкции по производительности.

🔧 Решение проблем

Блок не появляется

1. Проверьте идентификаторы: в рекомендуемой модели — data-site у загрузчика и data-cpm-block у контейнера; в классической — data-site и data-block. Они должны совпадать с ID в админке (скопируйте код напрямую из админки!)
2. Откройте DevTools → Console, проверьте ошибки загрузки loader.js
3. Сверьте домен страницы с настройками площадки в кабинете

Медленная загрузка

1. Добавьте preconnect и dns-prefetch
2. Если блок в первом экране — используйте preload
3. Проверьте что блок не конфликтует с другими скриптами (например, старыми рекламными кодами)

Низкая видимость (viewability)

1. Проверьте настройки загрузки с менеджером или в кабинете, если управляете блоком самостоятельно
2. Установите загрузчик в <head>, сохранив контейнер InRead в нужном месте статьи
3. Проверьте что блок не перекрыт другими элементами (z-index)

📚 Следующие шаги

После установки кода рекомендуем:

• Настроить колбеки — если плеер в чужом рекламном стеке
• Разобраться в форматах — sticky, InRead, fullscreen, видео и рамка с погодой
• Провести A/B тест — сравнить CPMArena с текущим решением
• Изучить лучшие практики — максимизировать доход
• Открыть кабинет — проверьте площадку и установленные блоки. Если вы управляете монетизацией самостоятельно, коды сетей доступны на вкладке «Стек (Waterfall)»; при работе через команду CPM Arena настройку выполнит менеджер