Requesting more ads without recreating a new AdsLoader (IMA HTML5)

[Matt Godfrey]

I'm making a game and have started using the advanced demo found at http://googleads.github.io/googleads-ima-html5/advanced/. When the player clicks a button to start a game, I want to show an ad. The code below does that :

function setupSinglePlayer(showAd){
    if(showAd){
        $('#titleScreen').append("<div id='vidDiv'></div>");
        $("#vidDiv").load('advid.html',function(){
            if(application==null){
                application = new Application();
               
            }else{
                //I want to request new ads here
            }            
            application.onClick_();//I do this to autoplay the ad. Is there a better way
        });
       
        return;
    }else{
        $('#vidDiv').remove();
    }
    //start the game here
    . . .
}

The content of advid.html is:

<div id="container">
    <center>
      <label for="tag">Tag (<span id="sampleAdTag" class="urlLink">sample</span>):&nbsp;</label>
      <input type="text" size="75" id="tagText" value='https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator='/>
    </center>

    <div id="videoplayer">
      <video id="content">
      <!--  <source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.mp4"></source>
        <source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.webm"></source>-->
      </video>
      <div id="adcontainer">
      </div>
      <button id="playpause" title="Play/Pause">&#9654;</button>
      <button id="fullscreen" title="Full screen">[&nbsp;&nbsp;&nbsp;]</button>
    </div>

    <div id="customClick">
      <div id="customClickTextWrapper">Click here for more info on your ad.</div>
    </div>
    <div id="console">
    Welcome to IMA HTML5 SDK Demo!
    </div>

  </div>

But In this game, I want to show ads between each play. I can get the ads to run after each play if I recreate the 'Application' and call onClick_ every time. But I'm sure this is the wrong way. Also I'm not supposed to recreate AdsLoader more than once in each life-cycle of the page. The ads.js and application.js are largely unmodified, however I have added the following to onAdEvent_ in ads.js to start the game running after the add ends or is skipped.

if(adEvent.type == google.ima.AdEvent.Type.ALL_ADS_COMPLETED){
        setupSinglePlayer(false);            
}

[Binny Patel (IMA SDK Team)]

Hi Matt,

You will need to destroy the AdsManager once the ad finishes. When you request a new ad, you will get a new AdsManager, and all in all you will be reusing your AdsLoader. You can have a look at my sample example here. Let me know if you have other questions. 

Regards,

Binny Patel

IMA SDK Team

[Matt Godfrey]

Thanks Binny

This concise example was lot easier to follow. I was about to let you know that it was still not working. But I just discovered that my issue was caused by me removing and the adContainer and contentElement in the DOM after each ad was shown. The 2nd ads would not play because of the stale reference to the now non-existent elements.  

It seems to work just fine at the moment. I'm now just hiding/showing the mainContainer instead if removing/recreating it.
I've attached my modified version of your ads.js. Please let me know if you see anything wrong in there. I just call int() every time I want to show an ad. But I make sure I don't create AdsLoader more than once.

Regards
Matt

[Binny Patel (IMA SDK Team)]

Hi Matt,

You can try to implement the code below to request the ad again. 

• Simply destroy the AdsManager 
• Call contentComplete() on the AdsLoader
• Make a new adRequest object
• Give it the linear ad slot dimensions it needs
• Request the ad
• Then call adsManager.start() to start the ad

 

if (adsManager != null) {

    adsManager.destroy();

    adsManager = null;

}

adsLoader.contentComplete();

var adsRequest = new google.ima.AdsRequest();

adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/...';

adsRequest.linearAdSlotWidth = 640;

adsRequest.linearAdSlotHeight = 400;

adsRequest.nonLinearAdSlotWidth = 640;

adsRequest.nonLinearAdSlotHeight = 150;

adsLoader.requestAds(adsRequest);

adsManager.start();

Let me know if this works for you. 

Thanks,

Binny Patel

IMA SDK Team

[Matt Godfrey]

Yes. This is all working good now. Thanks. Sorry for the late reply

--
You received this message because you are subscribed to a topic in the Google Groups "Interactive Media Ads SDK" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/ima-sdk/NoG0znMvXk4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to ima-sdk+unsubscribe@googlegroups.com.
To post to this group, send email to ima...@googlegroups.com.
Visit this group at https://groups.google.com/group/ima-sdk.
For more options, visit https://groups.google.com/d/optout.