videojs player + google IMA ads - how to subscribe for an event

Question

I'm trying to run some test code using video.js player with google IMA plugin

I used a simple example provided by the plugin's authors: https://github.com/googleads/videojs-ima/tree/master/examples/simple

And now I try to subscribe for some of the ads-player events.

I tried to subscribe for the events in following way (changes in lines 48+ of the original sample code):

player.one(startEvent, function() {

    player.ima.onAdStarted_ = function(){
        console.log("Ad started");
    }

    player.ima.onAdPlayPauseClick_ = function(){
        console.log("Ad clicked");
    }

    player.ima.onAdComplete_ = function(){
        console.log("Ad completed");
    }

    player.ima.initializeAdDisplayContainer();
    player.ima.requestAds();
    player.play();
});

And it captures the events correctly, but the main player is broke: after the ad is finished the IMA controls are not being disabled (they overlay the controls of the main player) and we have no control over the video.

I assume I accidently overrided some of the IMA's events and it's not working properly.

I also tried to add event listeners like that:

player.one(startEvent, function() { 


    player.ima.initializeAdDisplayContainer();
    player.ima.addEventListener("click",function(){
        console.log("Ad clicked");
    });

    player.ima.addEventListener(google.ima.AdEvent.Type.STARTED,function(){
        console.log("Ad started");
    });

    player.ima.addEventListener(google.ima.AdEvent.Type.ALL_ADS_COMPLETED, function(){
        console.log("Ad completed");
    });
    player.ima.requestAds();
    player.play();
});

But it's not working.

Is there a proper way to subscribe for the IMA's events, mainly for "ad started", "ad clicked" and "ad ended" events?

Answer 1

OK, I managed to solve my problem.

The trick is to rewrite the plugin located in videojs-ima.js file and there one has access to all needed events of adsManager and adsLoader objects.

I.e. (code added at line 208):

adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    function(){
         console.log("Ad started");
    });

Answer 2

TLDR;

player.on("adsready", function(){
  player.ima.addEventListener(google.ima.AdEvent.Type.CLICK, function(){
    console.log(">>> ad clicked");
  });
});

---

This solution is undocumented, your code doesn't work because when you add the event listener, adsManager hasn't been created. Take a look at the following snippet from googleads/videojs-ima repository.

// https://github.com/googleads/videojs-ima/blob/master/src/videojs.ima.js#L758-L769
player.ima.addEventListener = function(event, callback) {
  if (adsManager) {
    adsManager.addEventListener(event, callback);
  }
};

To be able to add event listener on ads manager, one have to listen to adsready event, because it is emitted at the end of ads manager creation, look at the following snippet.

// https://github.com/googleads/videojs-ima/blob/master/src/videojs.ima.js#L219-L278
player.ima.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      contentPlayheadTracker, adsRenderingSettings);

  // other code
  // ...

  player.trigger('adsready');
};

Therefore to listen to google ima ad events, you must add the event listener after adsready event emitted as follows.

player.on("adsready", function(){
  player.ima.addEventListener(google.ima.AdEvent.Type.CLICK, function(){
    console.log(">>> ad clicked");
  });
});