Skip to content

Руководство по интеграции виджетов

Узнайте, как эффективно интегрировать рекламные виджеты на ваш сайт.

Базовая интеграция

Простой пример как можно реализовать базовую интеграцию в автоматическом режиме:

html
<script type="text/javascript" src="https://cdn.tgads.space/assets/js/tg-ads-co-widget.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        const adexiumAds = new AdexiumWidget({
            wid: 'YOUR_WIDGET_ID',
            adFormat: 'push-like', //adFormat только такие: push-like/interstitial
            firstAdImpressionIntervalInSeconds: 5, // по умолчанию если параметр не задан, реклама покажется через 20 секунд после загрузки приложения
            adImpressionIntervalInSeconds: 100, // по умолчанию если параметр не задан, реклама будет показываться с периодичностью 200 сек
            debug: true, // можно передать debug параметр для дебага, он всегда будет возвращать !тестовую! рекламу. На продакшене не использовать :) 
            isFullScreen: false // если требуется принудительное включение показа рекламы в полноэкранном режиме - просто поменяйте значение на true 
        });
        adexiumAds.autoMode(); // этот метод необходимо вызывать если необходимо чтоб реклама показывалась автоматически в зависимости от заданных параметров
    });
</script>

Продвинутая интеграция

Если вы собираетесь интегрировать скрипт не в автоматическом режиме, а в ручном - по клику на кнопку: вот простой пример как это можно сделать:

js
document.addEventListener('DOMContentLoaded', () => {
    // инициализируем виджет
    const adexiumAds = new AdexiumWidget({
        wid: 'YOUR_WIDGET_ID',
        adFormat: 'interstitial',
        debug: true // убрать на продакшене, используйте только для теста
    });
    const button = document.getElementById('button');
    
    // регистрируем событие клика по кнопку
    button.onclick = () => {
        // запрашиваем рекламу
        adexiumAds.requestAd('interstitial');
    };
    // подписываемся на событие показа рекламы
    adexiumAds.on('adReceived', (ad) => {
        adexiumAds.displayAd(ad); // отображаем рекламу
    });

    adexiumAds.on('noAdFound', () => {
        // что-то сделать если рекламы не нашлось
    });
});
js
adexiumAds.requestAd('interstitial'); // необходимо использовать если просмотр рекламы происходит НЕ за вознаграждение
adexiumAds.requestRewardedAd('interstitial'); // необходимо использовать если просмотр рекламы происходит ЗА вознаграждение

Пример ответа и содержание переменной ad:

json
[{
    "creativeUrl": "https://cdn.tgads.space/creatives/images/cf5e1ddb279099500910042f4c897ea2.webp",
    "notificationUrl": "https://postback.tgads.live/impression?imp_id=64c286d8-04a2-4f4b-ac80-e455d8cbe020",
    "clickUrl": "https://postback.tgads.live/click?click_id=64c286d8-04a2-4f4b-ac80-e455d8cbe020",
    "buttonText": "Go!",
    "title": "Ready for action, User? Play now!",
    "adFormat": "push-like",
    "description": "Blast Cannon: Aim, fire, win\u2014just for you! "
}]

Список доступных событий:

Событие когда реклама не найдена:

javascript
adexiumAds.on('noAdFound', () => {
    // сделать что-то если не найдена
});

Событие когда реклама найдена и пользователь кликнул на рекламу

javascript
adexiumAds.on('adRedirected', () => {
    alert('clicked and redirected');
});

Реклама показана

javascript
adexiumAds.on('adDisplayed', () => {
    alert('Ad Displayed');
});

Реклама закрыта пользователем

javascript
adexiumAds.on('adClosed', () => {
    alert('Ad adClosed');
});

Реклама полностью показана и таймер истек(для interstitial формата)

javascript
adexiumAds.on('adPlaybackCompleted', () => {
    alert('adPlaybackCompleted');
});

Метод .off работает для каждого события: adexiumAds.off('eventName', listenerFunction);

Если необходимо проверить был ли клик по рекламе от пользователя, то можно сделать запрос на следующий URL:

http
GET https://bid.tgads.live/task/check/{widgetId}/{taskId}

taskId = id из колбэка adReceivedListener(ad) {ad.id} Ответ

json
{
  "done": false
}

Как выглядит реклама?

Это Interstitial/Pushlike форматы. Можно посмотреть в нашем примере в TG mini apps @AdexiumExampleBot