Changing an iframe ad's img src with Javascript

Question

I'm setting up A/B tests for a site that is running several adspaces through Google Ad Manager (aka Double Click for Publishers). Part of the test involves moving and resizing the adspaces' iframes, thus we need to serve up different images within the ads. We're trying to avoid having to do this through the Ad Manager dashboard, but the fact that Google's ads are served in an iframe make it so that our front-end Javascript on our test site can't change the img src to the new ad creative.

Is there any way to have the Google Ad iframe accept Javascript changes as the page is loading?

Answer 1

First, it would depends on your safeframe setup (see here for more details about the safeframe API). If your goal is to trigger a function inside your "banner" ad iframe from your parent site :

case 1 : GPT safeframe API not enabled

creative script (custom template or custom script added to your 'basic' creative)

 function changeBackground() {
    var creative = document.querySelector('#creativeId');
        creative.style.backgroundImage = 'url("yournewimage.jpeg")';
  }

parent site DOM script :

document.querySelector('#bannerId iframe').contentWindow.changeBackground();

case 2 : GPT safeframe API enabled you would need to create a dedicated communication protocol through a window postmessage => see here for details

Also, keep in mind the following :

• Google Ad Manager is able to serve different kind of creatives (images, html5, custom templates, third party adserver's redirect) >> see here
• Google Ad Manager is able to declare different creative ad sizes each device / screen sizes for a unique ad placement (defineSizeMapping) >> see here
• Google Ad Manager is able to refresh all or some of the ad placements on a page >> see here

Then, few questions are arising :

• What is the amount of users effectively resizing their window during their session ?
• What would happen if your printed creative is not an image ? In this specific case, your ad slot won't be responsive, as your creative would need a signal from your site to change its rendering image...

That is why I would recommend to handle the "responsive" rendering directly from your Google Publisher Tag setup :

• declare which dimensions are eligible to the different screen sizes
• if "real time" responsive effect is needed : watch for the the window being resized (event listenner), then refresh the ad calls so Ad Manager would use the new window size to generate new adcalls

This solution has the advantage to cover all of creative types from your site adserver integration :

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
 window.googletag = window.googletag || {cmd: []};
 googletag.cmd.push(function() {
   // Define a responsive ad slot.
   // [START responsive_ad]
  responsiveAdSlot =
       googletag.defineSlot('/6355419/Travel/Europe',
                            [[300, 250], [728, 90], [750, 200]], 'responsive-ad')
                .addService(googletag.pubads());

   var mapping =
       googletag.sizeMapping()
                .addSize([1024, 768], [[750, 200], [728, 90]])
                .addSize([640, 480], [300, 250])
                .addSize([0, 0], [])
                .build();

   responsiveAdSlot.defineSizeMapping(mapping);
   // [END responsive_ad]

   // Enable SRA and services.
   googletag.pubads().enableSingleRequest();
   googletag.enableServices();
 });

function refreshSlot() {
  googletag.cmd.push(function() {
      googletag.pubads().refresh([responsiveAdSlot]);
  })
}

 //widow being resized (end of event to prevent multiple adcalls)
 var timeOutFunctionId;

 window.addEventListener('resize', function() {
   clearTimeout(timeOutFunctionId);
   timeOutFunctionId = setTimeout(refreshSlot, 500)
 });
</script>

<div class="ad-container">
  <div id="responsive-ad" class="ad-slot"></div>
</div>

<script>
  googletag.cmd.push(function() {
    googletag.display('responsive-ad');
  });
</script>

Credit for the "wait resize end event".