Чтобы подключить несколько блоков Яндекс рекламы к ReactJS, вам необходимо выполнить следующие шаги:
- Установите пакет
react-yandex-ads
с помощью npm или yarn:
npm install react-yandex-ads
или
yarn add react-yandex-ads
- Импортируйте компонент
YandexAd
из пакетаreact-yandex-ads
в вашем React-компоненте:
import { YandexAd } from 'react-yandex-ads';
- Зарегистрируйтесь в Яндекс.Директ и создайте необходимые блоки рекламы. Получите их идентификаторы (slot id).
- Внутри вашего React-компонента создайте блоки
YandexAd
с помощью полученных идентификаторов:
const MyComponent = () => { return ( <div> <YandexAd adType="direct" blockId="ваш_slot_id" format="размер_и_формат" /> <YandexAd adType="direct" blockId="ваш_slot_id" format="размер_и_формат" /> {/* Добавьте ещё блоки рекламы по необходимости */} </div> ); }
- Вместо
"ваш_slot_id"
вставьте идентификаторы ваших блоков рекламы (slot id), а вместо"размер_и_формат"
укажите размеры и форматы блоков рекламы (например,300x250
илиauto
).
- Перейдите на страницу, содержащую ваш React-компонент, и вы должны увидеть подключенные блоки Яндекс рекламы.
Обратите внимание, что для работы с Яндекс.Директ вам потребуется создать аккаунт и настроить необходимые настройки рекламного кабинета.