Наш модуль баннерной рекламы позволяет вам легко монетизировать ваши Web Apps, показывая релевантные баннеры вашей аудитории. Интеграция спроектирована так, чтобы быть максимально простой и быстрой.
Модель оплаты — CPM (Cost Per Mille), но доход вы получаете за каждый просмотр баннера рекламодателя.
Следуйте этой инструкции, чтобы добавить ваш первый рекламный блок на сайт.
API_KEY. Скопируйте его.Вставьте эти две строчки кода в <head> каждой страницы вашего сайта, где вы планируете показывать рекламу. Рекомендуется размещать их как можно выше.
Замените ВАШ_API_KEY на ключ, полученный на предыдущем шаге.
<!-- AnyAds Display Network Script -->
<script>
window.anyads = new AnyAdsClient('anyads_ВАШ_API_KEY');
</script>
<script async src="https://cdn.anyads.online/scripts/anyads.js"></script>
Что делает этот код?
- Первый скрипт создает объект
anyadsи инициализирует его вашимAPI_KEY.- Второй скрипт асинхронно загружает нашу основную библиотеку, не блокируя загрузку вашего сайта.
В том месте на странице, где вы хотите показать баннер, вставьте <div> с особым id. Сразу после него вызовите метод anyads.show().
Доступные форматы:
300x250 (прямоугольник)728x90 (горизонтальный "лидерборд")320x50 (мобильный баннер)<!-- 1. Место для баннера -->
<div id="anyads-300x250"></div>
<!-- 2. Команда для показа -->
<script>
anyads.show('anyads-300x250');
</script>
Наш скрипт anyads.js автоматически найдет этот div, запросит с сервера подходящий баннер и отобразит его.
Если вы используете современные JavaScript-фреймворки, интеграция становится еще проще с помощью хука useEffect.
Если вы не добавляете скрипт инициализации в index.html, вы можете сделать это один раз в главном компоненте вашего приложения (например, _app.js в Next.js или App.js в React).
import { useEffect } from 'react';
function App() {
useEffect(() => {
// Эта функция выполнится один раз при монтировании приложения
window.anyads = new AnyAdsClient('anyads_ВАШ_API_KEY');
}, []); // Пустой массив зависимостей гарантирует однократный вызов
// ... остальной код вашего приложения
}
Создайте компонент для вашего баннера. Это позволит легко переиспользовать его в разных частях сайта.
// components/BannerAd.js
import { useEffect } from 'react';
// Принимаем размер как пропс для гибкости
const BannerAd = ({ size = '300x250' }) => {
const blockId = `anyads-${size}`;
useEffect(() => {
// Проверяем, что глобальный объект anyads уже существует
if (window.anyads) {
window.anyads.show(blockId);
}
}, [blockId]); // Эффект будет перезапускаться, если изменится ID блока
return <div id={blockId}></div>;
};
export default BannerAd;
Как использовать этот компонент на странице:
import BannerAd from '../components/BannerAd';
export default function MyPage() {
return (
<div>
<h1>Моя страница</h1>
<p>Какой-то контент...</p>
{/* Вставляем баннер где угодно */}
<BannerAd size="728x90" />
<p>Еще контент...</p>
</div>
);
}
new AnyAdsClient(apiKey)Глобальный конструктор. Вызывается один раз.
apiKey (string): Ваш ключ площадки.anyads.show(blockId)Запрашивает и отображает баннер.
blockId (string): id div-элемента, в котором нужно показать баннер. Формат: anyads-ШИРИНАxВЫСОТА.