4

Seems like this question has been asked before with no answers. I'm trying to implement an overlay ad using Google Dfp and the SafeFrame API. I have the Google Console reporting that the ad is being served in a SafeFrame but no status is retrieved with $sf.ext.register callback is fired. It looks like the $sf.ext.expand is never firing as well as the $sf.ext.register.

I've changed the settings in my Ad Creative to serve into an iframe and I'm using the following dfp tags.

var sticky_image = document.getElementById('sticky-footer__image');
var sticky_image_expanded = 'http://www.example.com/image.jpg'
var sticky_image_collapsed = sticky_image.src;
var sticky_container = document.getElementById('sticky-footer__container');

function adjustDivContainerSize() {
  var self = $sf.ext.geom().self;
  sticky_container.style.width = (self.r - self.l) + 'px';
  sticky_container.style.height = (self.b - self.t) + 'px';
}

function expandAd() {
  /**
   * Expand the ad by calling the SafeFrame API
   */
  var config = {
    push: false,
    t: 250,
    l: 0,
    r: 0,
    b: 0
  };
  $sf.ext.expand(config);
  adjustDivContainerSize();
}

function collapseAd() {
  $sf.ext.collapse();
  adjustDivContainerSize();
}

adjustDivContainerSize();

/**
 * Register the original ad size
 */
$sf.ext.register(300, 70, function(status, data) {
  if (status == "expanded") {
    //nothing fires
  } else if (status == "collapsed") {
    //nothing fires
  }

});

sticky_container.style.height = '100%';

sticky_container.addEventListener('mouseover', function() {
  sticky_image.src = sticky_image_expanded;
  expandAd();
})

sticky_container.addEventListener('mouseout', function() {
  sticky_image.src = sticky_image_collapsed;
  collapseAd();
});

Ironically my snippet works when using the creative preview tool. http://publisherconsole.appspot.com/safeframe/creative-preview.html

user3175221
  • 51
  • 1
  • 6
  • Maybe you could better use second example here: https://stackoverflow.com/questions/46144151/google-dfp-resize-safeframe-custom-creative-outer-iframe-container-from-inside/46144152#46144152 – PayteR Sep 10 '17 at 18:30

1 Answers1

1

You are missing a part within your expandAd() function. You need to set the config variables to the allowed expansion size. Copied the relevant section and added required code.

    function expandAd() {
      /**
       * Expand the ad by calling the SafeFrame API
       */
      var allowedExp = $sf.ext.geom().exp;
      var config = {
        push: false,
        t: 250,
        l: 0,
        r: 0,
        b: 0
      };
      /*config.t = allowedExp.t; set in config initialisation*/
      config.l = allowedExp.l;
      config.r = allowedExp.r;
      config.b = allowedExp.b;
      $sf.ext.expand(config);
    }

Hope that this helps.

Berdesdan
  • 359
  • 1
  • 5
  • 12