Question

I’ve been developing up a custom HTML5 video player that incorporates a pre-roll video. I’m now in the process of implementing the Google IMA SDK and running into a few issues.

The integration docs are here:
https://developers.google.com/interactive-media-ads/docs/sdks/googlehtml5_ads

What I don’t understand is what is actually invoking the requestAds & onAdsLoaded functions. It seems like it should be straight forward but I must be missing something.

You can see the source here: http://jsfiddle.net/cncpts/SZ895/1/

Answer 1

I was able to figure it out, pretty simple in fact. I just removed the event listeners and adrequest out of the requestAd function. Here is the final script.

<script src="http://www.google.com/uds?file=ima&v=1&nodependencyload=true"></script>
<script>

var adsManager;
var adsLoader;
var clickTrackingOverlay = document.getElementById('clickTrackingOverlay');
var videoElement = document.getElementById('myVideoElement');   
var adsLoader = new google.ima.AdsLoader();  

  // Add event listeners
adsLoader.addEventListener(
    google.ima.AdsLoadedEvent.Type.ADS_LOADED,
    onAdsLoaded,
    false);
adsLoader.addEventListener(
    google.ima.AdErrorEvent.Type.AD_ERROR,
    onAdError,
    false);

   // Create request object
   var adsRequest = {
      adTagUrl: "http://ad.doubleclick.net/pfadx/AngelaSite;kw=html5linearnonlinear;sz=300x300;ord=5036130;dcmt=text/xml",
      adType: "video"
    };

  // Make request
  adsLoader.requestAds(adsRequest);

  function onAdsLoaded(adsLoadedEvent) {
    // Get the ads manager
    adsManager = adsLoadedEvent.getAdsManager();
    adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

    // Listen and respond to events which require you to pause/resume content
    adsManager.addEventListener(
        google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
        onPauseRequested);
    adsManager.addEventListener(
        google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
        onResumeRequested);

    // Set a visual element on which clicks should be tracked for video ads
    adsManager.setClickTrackingElement(clickTrackingOverlay);
    try {
      // Call play to start showing the ad.
      adsManager.play(videoElement);
    } catch (adError) {
      // An error may be thrown if there was a problem with the VAST response.
    }
  }

  function onAdError(adErrorEvent) {
    // Handle the error logging.
    console.log(adErrorEvent.getError());
  }

  function onPauseRequested() {
    videoElement.pause();
    // Setup UI for showing ads (e.g. display ad timer countdown,
    // disable seeking, etc.)
    // setupUIForAd();
  }

  function onResumeRequested() {
    // Setup UI back for showing content.
    // setupUIForContent();
    videoElement.play();
  }

</script>