Show Google AdSense ad on modal

Question

I have a banner AdSense ad on my site. It's kicked off by the code snippet they give me.

In another part of my app, I pop up a modal with some info in it. I'd like to display another ad unit in that modal. I have the following defined in that modal:

<script type="text/javascript"><!--
google_ad_slot = "xxxxx";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Nothing happens. It's weird to me that you have to include that "show_ads.js" file again. Also, seems like it would overwrite the global js variables that are on the home page that this modal is on top of.

Any ideas how to make this work?

Answer 1

What's probably happening is that your modal container element doesn't exist at the time the page was loaded. AdSense is loaded for other ads on your page, and you cannot reload them later.

A common solution is to load an iframe in your model with an ad in the frame. Unfortunately, this violates the terms of service. It is also against the terms of service to load an ad in a div that is hidden (as this throws off the click-through ratio).

I think your best option is to place the ad in a div that is normally visible, and then position that div on your modal when needed. Not ideal, but the only method I can think of that will keep Google happy.

Answer 2

We tried Brad's solution and other solutions, non worked, simply reloading the ad after 0.1 seconds of showing the Ad worked for us.

PS: just make sure that you don't use a deprecated reload ad function.