Как добавить несколько блоков Яндекс рекламы в приложение, созданное с помощью Reactjs?

Как исправить ошибку "CONTAINER_NOT_FOUND Container with id "yandex_rtb_1" is not found (init)" при подключении нескольких блоков Яндекс рекламы на сайте, которая возникает в консоли, и устранить проблему, когда реклама иногда не отображается до перезагрузки страницы?
  • 14 января 2024 г. 16:17
Ответы на вопрос 1
Чтобы добавить несколько блоков Яндекс.Директа в приложение на React, вам потребуется следить за тем, чтобы каждый блок имел уникальный идентификатор и был корректно инициализирован. Вот шаги, которые помогут вам это сделать:

1. Убедитесь, что у каждого блока рекламы есть уникальный `id`. Желательно присваивать `id` динамически для исключения любых конфликтов.

2. Добавьте на страницу скрипт рекламного блока, если он уже не добавлен. Обычно скрипт добавляется один раз и включает код подобный следующему:

```html
<script type="text/javascript" src="//an.yandex.ru/system/context.js"></script>
```

3. После того как компоненты с рекламой смонтировались, необходимо вызвать инициализацию блоков.

В React это можно сделать с помощью `useEffect` и `useRef`, например, так:

```jsx
import React, { useEffect, useRef } from 'react';

const YandexAd = ({ blockId }) => {
  const adRef = useRef(null);

  useEffect(() => {
    if (window.Ya && window.Ya.Context) {
      try {
        window.Ya.Context.AdvManager.render({
          blockId: blockId,
          renderTo: adRef.current.id,
          async: true
        });
      } catch (e) {
        console.error("Ошибка рендеринга рекламы: ", e);
      }
    }
  }, [blockId]);

  return <div ref={adRef} id={`yandex_rtb_${blockId}`}></div>;
};

export default YandexAd;
```

В данном примере представлен простой React компонент `YandexAd`, который принимает `blockId` как свойство и использует `useEffect` для вызова рендера рекламного блока, когда DOM-элемент готов.

Чтобы исправить ошибку `CONTAINER_NOT_FOUND`, вам нужно удостовериться, что элемент с данным `id` существует в DOM в момент инициализации рекламного блока.

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

Учтите, что Яндекс может время от времени обновлять свой API, так что следует также проверять актуальность кода на официальном сайте Яндекса и обращать внимание на документацию.
Похожие вопросы