How to properly remove an overlay ad

[Simon Ferndriger]

I'm sorry, this is probably documented somewhere, but I just didn't figure out how to properly remove an overlay ad when I keep the container?

Now I have the problem that I have two overlay ads overlapping when I play the slideshow for the second time:

Thank you in advance for your help.

- Simon

[Chris Feldman (IMA SDK Team)]

Hi Simon,

Standard practice would be to reset/reinitialize the adsManager and adDisplayContainer before making subsequent ad requests. That being said, I've never before seen the issue in your screenshot. Can you provide more information about your implementation? And if possible, please share a test page as I would like to investigate further.

Regards,
Chris Feldman

IMA SDK Team

[Simon Ferndriger]

Hi Chris

A) How do I reset/reinitialize the adsManager properly? Does this also need to happen on user action on mobile devices?

B) Sure, just play the slideshows 2 times in a row: http://dev-api.lookr.com/embed/timelapse/1171032474/day (login as usual lookr:thisisnext)

Best

Simon

[Chris Feldman (IMA SDK Team)]

Hi Simon,

It looks like you're loading a separate instance of the SDK for each of your ads. This is not necessary and is likely causing your issue since you're not reusing the same adDisplayContainer for each ad, but instead creating a new one for each. I suggest taking a look at ad rules, which will allow you to show overlay ads and post roll ads with one tag instead of two. This will greatly simplify your SDK integration and should solve your issue.

Regards,

Chris Feldman

IMA SDK Team

[Simon Ferndriger]

Hi Chris

Thank you, it wasn't intended to use init() several times, since I fixed this it works now.

However, I still get the "Uncaught TypeError: Cannot read property 'apply' of undefined" error which would be nice if it could get fixed.

The issue here is that after the overlay ad is shown, I cannot leave the overlay ad container after this error, because it would take an invisible space and thereby capture and mute all events over that area.

So I currently set CSS display = 'none' to workaround this problem.

Best

Simon

[Chris Feldman (IMA SDK Team)]

Hi Simon,

I'm not seeing that error on the test page that you shared originally. Can you share the tag that you're serving when you see that console output? I'd like to investigate further.

Thank you,

Chris Feldman
IMA SDK Team

[Simon Ferndriger]

Sure thing. Here are the steps to reproduce:

1) Visit http://api.lookr.com/embed/timelapse/1490383699/month

2) Change browser to "mobile view"

3) Play

4) Watch (and skip) postroll

5) Look into console

[Chris Feldman (IMA SDK Team)]

Hi Simon,

I was able to see the behavior on your page. However, when I pulled the ad tags from the network log and tested in our HTML5 Advanced Example I could no longer replicate the results. This points to an issue with your implementation. I noticed that you're still using two instances of the SDK, with two separate ad containers (overlayAdContainer & postRollAdContainer). I would advise against this approach as it needlessly complicates your implementation. Best practice would be to use ad rules to serve both of your ads in the same tag to one ad container.

Let me know if you continue to have issues.

Regards,
Chris Feldman

IMA SDK Team

[Simon Ferndriger]

Hi Chris

Well, using the same ad container indeed solved this issue, thanks! The error now disappeared, and it also performs a little faster.

Just a minor/small inconvenience consists: after the postroll ad finishes, the ad container still takes up an empty space and thereby blocks clicks on the image/player. So I just set it to display="none" while not in use.

Is that recommended or is there a better way to do that? I can now say for the first time that I feel comfortable with this implementation.

BTW: Your coworker Vu recommended me to use two different ad containers, that's why I did it in the first place...

Best

Simon

[Simon Ferndriger]

It is just unbelievable. Just when I think I finally got around this extremly complex API for doing a very trivial thing, I get the fist in the face promptly.

Not it doesn't work on mobiles anymore when using just a single ad container, since it doesn't recognize somehow that the adcontainer gets initialized on user action (which it does, see console for "init"):

http://dev-api.lookr.com/embed/timelapse/1490745834/month (lookr:thisisnext)

1. Open in mobile view

2. Click on play

3. Watch console

> "Failed to initialize ad playback element before starting ad playback."

[Chris Feldman (IMA SDK Team)]

Hi Simon,

Are you still having issues? I've been testing and your page is working perfectly for me on mobile, even when I throttle my connection speed.

Regards,

Chris Feldman

IMA SDK Team

[Simon Ferndriger]

Hi Chris

Well, this is a bit odd, but yes, still having the described issues, see here:

Did you run it on "dev-api.*" or on "api.*"? Because the issue is only on the dev-version. Did you clear the browser cache? And go in landscape mode?

BTW: Why isn't there ANY link in the email to this post? I cannot reply directly by email, nor can I click on the link to reply. I always have to go to the threat list and search for my post to reply!

[Chris Feldman (IMA SDK Team)]

Hi Simon,

It's strange, your page was working for me yesterday but not anymore. Regardless, you're getting this error because you never initialize your adDisplayContainer. The line is in your code, but it's commented out:

_.adDisplayContainer = new google.ima.AdDisplayContainer($adContainer);
                console.debug('init')
/*
_.adDisplayContainer = {
overlay: new google.ima.AdDisplayContainer($overlayAdContainer),
postroll: new google.ima.AdDisplayContainer($postRollAdContainer)
};
_.adDisplayContainer.overlay.initialize();
_.adDisplayContainer.postroll.initialize();
*/

Let me know if you continue to have issues.

Regards,

Chris Feldman
IMA SDK Team 

[Simon Ferndriger]

Hi Chris

You are right, this totally makes sense - I indeed forgot to call the function, thank you!

What is even more strange is that it worked on desktop even without calling initialize() - maybe there is a bug in the IMA after all ;)

Now it works perfectly, have a great day!

Thank you very much for your professional help.

Best

Simon

[Simon Ferndriger]

Well, I don't believe it but it really is a never ending story. Now that I DO call initialize() the error still appears on mobiles, but ONLY when I click on "skip" in the postroll. When I let the postroll finish by itself, the error doesn't show.

http://dev-api.lookr.com/embed/timelapse/1490905695/day

Now I really do everything: using only one ad container, and initializing it.

Looks like a bug to me.

[Chris Feldman (IMA SDK Team)]

Hi Simon,

The "Uncaught TypeError..." looks like an SDK issue. I pulled the ad tag and it exhibits the same behavior in our Video Suite Inspector. I'm going to bring this to the rest of our team to investigate further. I will let you know as soon as I have any knew information.

Regards,

Chris Feldman

IMA SDK Team