AdLoader

A module for loading and playing ads «by location» (on a ready-made video tag at any time). The module's API implements interfaces for loading, preloading, and playing ads. Control over running these processes is carried out from an external code (on the ad tag side).

Basic concepts

Loading ads

Obtaining information about which ad creatives need to be played: in what sequence and with what parameters.

Preloading ads

Preparing data for the launch of ads to speed up subsequent launches of ad creatives.

Playing ads

Displaying an ad creative on the user's side.

Ways to load ads

The AdLoader module lets you load ads in different ways:

• Loading ads linked to a YAN ad campaign (using parameters such as partnerId and category). In this case, the parameters for loading and playing ads are taken from VMAP.
• Loading ads via a link. In this case, VMAP can be loaded to get ad playback parameters, but the ad itself will be loaded using the provided vastUrl.
• Initializing VAST by location. In this case, the vast parameter should pass a string with VAST XML. Additional ad loading will be carried out if VAST XML contains Wrapper elements (links to other VASTs). Ad playback parameters can be obtained from VMAP.

Creating and playing ads

1. Create an AdLoader instance. To do this, call the AdLoader.create(adConfig) method for the AdLoader object.
2. Once the AdLoader instance is created, you can load ads using the adLoader.loadAd(); method. As a result, a promise is returned with an AdStore instance.
3. After creating the AdStore instance, preload ad creative files using the AdStore.preload(preloadParams) method to speed up subsequent ad launches. Or start playing content immediately using the AdStore.showAd(videoSlot, slot, playbackParameters) method.
4. If you need to carry out flexible control over playing ads, AdStore provides the AdStore.createPlaybackController(videoSlot, slot, playbackParameters) method that returns the AdPlaybackController object. AdPlaybackController lets you subscribe to ad events and call methods while ads are playing.

Sample ad tag

ya.videoAd
    .loadModule('AdLoader')
    // 1) Create an AdLoader instance with ad parameters
    .then(function(module) {
        return module.AdLoader.create(
            {
                partnerId: partnerId,
                category: category,
                // Optional block ID parameter. 
                // If the parameter is not specified, a preroll block type is used.
                impId: impId,
            },
        );
    })
    // 2) Load the ad
    .then(function(adLoader) {
        return adLoader.loadAd();
    })
    // 3) Preload the ad
    // This step is skipped if the ad needs to be launched immediately
    .then(function(adStore) {
        return adStore.preload({
            videoSlot: video,
            desiredBitrate: 1000,
        })
        .then(function() {
            return adStore;
        })
        .catch(function() {
            // Ignore if something went wrong during preloading
            // It is not a blocker for playback
            return adStore;
        });
    })
    // 4) Start the ad
    .then(function(adStore) {
        // Create a playback controller
        const adPlaybackController = adStore.createPlaybackController(video, slot);
        // Subscribe to the AdStopped event
        adPlaybackController.subscribe('AdStopped', function() {
            console.log('Ad stopped playing');
        });
        // Start ad playback
        adPlaybackController.playAd();
    })
    // If something goes wrong, log the error to the console
    .catch(function(error) {
        console.error(error);
    });        

Test data

You can use the following settings for testing:

{
  partnerId: 291193,
  category: 0,
}

Test page example