Yandex Ads for Cordova apps

Support plugin https://boosty.to/maximnara

Demo Video

Table of Contents

• State of Development
• Install
• Usage
• Official Yandex Documentation

State of Development

• [x]
• [x]
• [x]
• [x]
• [x]
• [x]

Install

npm i cordova-plugin-yandex-ads --save

Usage

• Initialization
• Rewarded Videos
  • Load Rewarded Video
  • Show Rewarded Video
• Interstitials
  • Load Interstitial
  • Show Interstitial
• App open ads
  • Load App Open Ads
  • Show App Open Ads
• Events
• Banners
  • Load Banner
  • Show Banner
  • Reload Banner
  • Banner Events
• Instream
  • Load Instream
  • Show Instream
  • Hide Instream
• Feed

  • Load Feed

  • Show Feed

  • Hide Feed

All methods support optional onSuccess and onFailure parameters

Initialization

import * as YandexAds from 'cordova-plugin-yandex-ads/www/yandexads';
await YandexAds.init({ 
  rewardedBlockId: 'YOUR_REWARDER_BLOCK_ID',
  interstitialBlockId: 'YOUR_INTERSTITIAL_ID',
  bannerBlockId: 'YOOUR_BANNER_ID',
  openAppBlockId: 'YOUR_OPEN_APP_ADS_ID',
  instreamBlockId: 'YOUR_INSTREAM_ID',
  feedBlockId: 'YOUR_FEED_ID',
  options: { // This is for banner ads
    bannerAtTop: true, // Show banner on top of screen, otherwise on bottom
    bannerSize: { width: 468, height: 100 }, // Your banner size
    // You can skip bannerSize option and width will be as big as possible
  },
});

Set user consent for GDPR

Call this on every app launch. More info: https://yandex.ru/dev/mobile-ads/doc/android/quick-start/gdpr-about.html

YandexAds.setUserConsent(true);

Rewarded Videos

https://github.com/maximnara/cordova-plugin-yandex-ads/assets/2614172/520052cd-48ae-4db7-b888-6344fc83b54f

Load Rewarded Video

YandexAds.loadRewardedVideo({
  onSuccess: function () {

  },
  onFailure: function () {

  },
});

Show Rewarded Video

YandexAds.showRewardedVideo();

Interstitial

https://github.com/maximnara/cordova-plugin-yandex-ads/assets/2614172/2eb27491-e36d-4b2f-bd78-3020b1d86d86

Load Interstitial

Must be called before showInterstitial

YandexAds.loadInterstitial();

Show Interstitial

YandexAds.showInterstitial();

App Open Ads

https://github.com/maximnara/cordova-plugin-yandex-ads/assets/2614172/e6761531-05c7-4699-a996-a940a75efee9

Load app open ads

Must be called before showOpenAppAds

YandexAds.loadOpenAppAds();

Show app open ads

YandexAds.showOpenAppAds();

Banners

Load Banner

Must be called before showBanner

YandexAds.loadBanner();

Show Banner

YandexAds.showBanner();

Reload Banner

If you set banner size your banner will render in container, that will move content container (web view).

So calling loadBanner will lead to web view jumps. To fix that use reloadBanner method that will save container for banner. So while banner loading empty container avoid web view jumps.

YandexAds.reloadBanner();

Hide Banner

YandexAds.hideBanner();

Instream

Instream works only for android for now. It depends on video, so fo that we created empty video. Best works for TV.

Load instream

YandexAds.loadInstream();

Show instream

YandexAds.showInstream();

Hide instream

YandexAds.hideInstream();

Feed

This works only for android for now. It is feed with advertising cards with infinity scroll.

Load feed

YandexAds.loadFeed();

Show feed

YandexAds.showFeed();

Hide feed

YandexAds.hideFeed();

Events

Also you can find them here

{
  interstitial: {
    loaded: 'interstitialDidLoad',
    failedToLoad: 'interstitialFailedToLoad',
    shown: 'interstitialDidShow',
    failedToShow: 'interstitialDidFailToShowWithError',
    dismissed: 'interstitialDidDismiss',
    clicked: 'interstitialDidClick',
    impression: 'interstitialDidTrackImpressionWith',
  },
  rewarded: {
    loaded: 'rewardedDidLoad',
    failedToLoad: 'rewardedFailedToLoad',
    rewarded: 'rewardedDidReward',
    shown: 'rewardedDidShow',
    failedToShow: 'rewardedDidFailToShowWithError',
    dismissed: 'rewardedDidDismiss',
    clicked: 'rewardedDidClick',
    impression: 'rewardedDidTrackImpressionWith',
  },
  openAppAds: {
    loaded: 'appOpenDidLoad',
    failedToLoad: 'appOpenFailedToLoad',
    shown: 'appOpenDidShow',
    failedToShow: 'appOpenDidFailToShowWithError',
    dismissed: 'appOpenDidDismiss',
    clicked: 'appOpenDidClick',
    impression: 'appOpenDidTrackImpressionWith',
  },
  banner: {
    loaded: 'bannerDidLoad',
    failedToLoad: 'bannerFailedToLoad',
    clicked: 'bannerDidClick',
    impression: 'bannerDidTrackImpressionWith',
    leftApplication: 'bannerWillLeaveApplication',
  },
  feed: {
    loaded: 'feedDidLoad',
    failedToLoad: 'feedFailedToLoad',
    clicked: 'feedDidClick',
    impression: 'feedDidTrackImpressionWith',
  },
  instream: {
    loaded: 'instreamDidLoad',
    failedToLoad: 'instreamFailedToLoad',
    error: 'instreamError',
    completed: 'instreamAdCompleted',
    prepared: 'instreamAdPrepared',
  }
}

How to use events:

Here we start listen ad loaded event, when it is fired we call showOpenAppAds method.

window.addEventListener(YandexAds.events.openAppAds.loaded, async () => {
  await YandexAds.showOpenAppAds();
});

Additional steps

iOS

Add this to your Info.plist Please check official documentation in case of some breaking changes

<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>zq492l623r.skadnetwork</string>
  </dict>
</array>

Feel free to make your PRs for code structure or new functions