Документация Веб Интеграция

Веб Интеграция

Реклама OMNIBOX для веб-сайтов

1 Обзор va API

OMNIBOX veb-saytlar uchun yengil integratsiyani ta'minlaydi. Barcha reklama so'rovlari oddiy GET so'rovi orqali amalga oshiriladi, bu esa displey reklamalar uchun HTML/JS yoki video uchun VAST/VPAID qaytaradi.

Основной Endpoint

HTTPS ENDPOINT
https://omnibox.digital/ads/direct

Параметры запроса

Параметр Тип Обязательный Описание
plc String Да Placement ID (получите от менеджера)
w Int Да Ширина (px), например: 300
h Int Да Высота (px), например: 250
cb Long Да Cache Buster (Timestamp/Random)
t String Нет Bo'sh (standart) yoki app (faqat VAST Wrapper)

2 Displey Reklama (Баннеры)

Format
HTML5 / JS
Integratsiya
Iframe / Script
O'lchamlar
300x250, 728x90...

Iframe Tavsiya Etiladi

Iframe dan foydalanish reklama CSS-larini saytingiz uslublaridan ajratib turadi, bu esa buzilishlarni oldini oladi.

Iframe Integratsiyasi

HTML
<!-- Standard Banner Integration -->
<iframe 
    id="ad_frame"
    src="https://omnibox.digital/ads/direct?plc=YOUR_PLACEMENT_ID&w=300&h=250&cb=" + Date.now()
    width="300" 
    height="250" 
    scrolling="no" 
    frameborder="0"
    allow="autoplay">
</iframe>

<!-- Test Banner (for testing) -->
<iframe
    src="https://omnibox.digital/ads/direct?plc=test_banner"
    width="300"
    height="250"
    frameborder="0"
    scrolling="no"
    allowfullscreen></iframe>

<!-- Responsive Banner with JavaScript -->
<script>
function loadBannerAd(placementId, containerId) {
    var container = document.getElementById(containerId);
    var iframe = document.createElement('iframe');
    
    // Standard banner sizes
    var width = '300', height = '250';
    
    // Adjust for mobile
    if (window.innerWidth <= 768) {
        width = '250'; height = '200';
    }
    
    iframe.src = "https://omnibox.digital/ads/direct?plc=" + placementId + 
                 "&w=" + width + "&h=" + height + "&cb=" + Date.now();
    iframe.width = width;
    iframe.height = height;
    iframe.frameBorder = "0";
    iframe.scrolling = "no";
    iframe.allow = "autoplay";
    
    container.appendChild(iframe);
}
</script>

3 In-Stream Video (Pre-roll)

Video pleyer kontenti oldidan ko'rsatiladigan reklamalar uchun Video.js + IMA SDK tavsiya etiladi.

Integratsiya kodi

JavaScript
var player = videojs('content_video');

// 1. URL yaratish (t parametri YO'Q - VPAID kerak)
var adTagUrl = "https://omnibox.digital/ads/direct?plc=video_preroll&w=640&h=360&cb=" + Date.now();

var options = {
    id: 'content_video',
    adTagUrl: adTagUrl,
    // VPAID yoqilgan bo'lishi shart
    vpaidMode: google.ima.ImaSdkSettings.VpaidMode.ENABLED
};

player.ima(options);

// 2. Click orqali boshlash (Avto-ijro siyosati uchun)
var startEvent = 'click'; 
if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
    startEvent = 'touchend';
}

var initAd = function() {
    player.ima.initializeAdDisplayContainer();
    player.ima.requestAds();
    player.play();
    player.off(startEvent, initAd);
};

player.on(startEvent, initAd);

4 Outstream Video

Maqsad Maqolalar orasida ko'rsatiladigan video reklama.
Xususiyat Ko'rinadigan zonaga tushganda avtomatik o'ynaydi.
HTML
<!-- Simple Outstream Video Integration -->
<script
    src="https://storage.dsp-ui.uz/uploads/outstream.js"
    adunit-id="YOUR_ADUNIT_ID"
    width="640"
    height="480"
></script>

<!-- Responsive Outstream with JavaScript -->
<div id="outstream-container"></div>

<script>
    var container = document.getElementById('outstream-container');
    var script = document.createElement('script');
    
    // Use test adunit for testing: "test"
    script.src = "https://storage.dsp-ui.uz/uploads/outstream.js";
    script.setAttribute('adunit-id', 'YOUR_ADUNIT_ID');
    script.setAttribute('width', '640');
    script.setAttribute('height', '480');
    
    container.appendChild(script);
</script>

<!-- Device-specific sizing -->
<script>
function loadOutstreamAd(adunitId) {
    var width = '640', height = '480';
    
    // Adjust for mobile devices
    if (window.innerWidth <= 768) {
        width = '320'; height = '240';
    } else if (window.innerWidth <= 1024) {
        width = '480'; height = '360';
    }
    
    var script = document.createElement('script');
    script.src = "https://storage.dsp-ui.uz/uploads/outstream.js";
    script.setAttribute('adunit-id', adunitId);
    script.setAttribute('width', width);
    script.setAttribute('height', height);
    
    document.getElementById('outstream-container').appendChild(script);
}
</script>

5 Interstitial (Oraliq Reklama)

Sahifalar o'rtasida yoki yuklanish paytida ko'rsatiladigan to'liq ekranli reklama.

JavaScript
var script = document.createElement('script');
// w=screen va h=screen parametrlari muhim
script.src = "https://omnibox.digital/ads/direct?plc=interstitial_1&w=screen&h=screen&cb=" + Date.now();
script.async = true;
document.body.appendChild(script);

6 VAST Интеграция Integratsiyasi

Qachon ishlatiladi?

Agar siz o'zingizning maxsus pleyeringizdan foydalansangiz va sizga faqat VAST URL kerak bo'lsa.

TAVSIYA ETILADI

Rejim A: Standart

...?plc={ID}
  • VPAID JS ni o'z ichiga oladi
  • Ko'rinuvchanlik o'lchovi (OMID)
ZAXIRA

Rejim B: Sof Video (MP4)

...?plc={ID}&t=app
  • Faqat MP4 fayl
  • Oddiy pleyerlar uchun

Устранение проблем

Reklama ko'rinmayapti (Oq bo'shliq)

Konsol xatolarini tekshiring. Agar 404 bo'lsa, placement ID noto'g'ri. Agar 200 bo'lib bo'sh bo'lsa, ushbu o'lcham uchun reklama mavjud emas (fill-rate).

// Test uchun ishlayotganini tekshiring:
adunit-id="test" (outstream)
plc="test_banner" (banner)

Outstream script yuklanmayapti

storage.dsp-ui.uz/uploads/outstream.js manzilining to'g'riligini tekshiring. CORS xatolari bo'lishi mumkin.

// Network tabda tekshiring:
// Status: 200 OK
// Content-Type: application/javascript

Video avto-ijro etilmayapti

Brauzerlar ovozli avto-ijroni bloklaydi. Videoni ovozsiz (muted) boshlang yoki foydalanuvchi bosishini kuting.

// Muted avto-play uchun:
<script muted="true"></script>
// Yoki foydalanuvchi interaktivligini kuting

Banner noto'g'ri o'lchamda

Width/height parametrlari noto'g'ri bo'lishi mumkin. Standart o'lchamlardan foydalaning.

// Standart banner o'lchamlari:
// 300x250 (Medium Rectangle)
// 728x90 (Leaderboard)
// 320x50 (Mobile Banner)

Mobile moslamasida muammolar

Mobil qurilmalarda o'lchamlarni avtomatik sozlash funktsiyasidan foydalaning.

// Mobile uchun tavsiya etilgan o'lchamlar:
// Outstream: 320x240
// Banner: 250x200

Дополнительно yordam kerakmi?

Test stendimizdan foydalanib integratsiyani tekshiring: /uz/docs/demo
Texnik yordam uchun: @omnibox_digital