1

I want to load an mpu adslot when they come it comes into view. It currently works fine on desktop but the code which handles mobile devices is not behaving as it should.

When the adslot is partially visible on the page the ad should be shown. Currently this only works when the user scrolls down to the adslot and then scrolls up.

As soon as the user scrolls up the ad is loaded. Why??

Function which is called to place an ad on the page:

function generateMpu(slotName,instantRefresh) {

        var slot = googletag.defineSlot('/199874932/Tech_MPU', [[300, 250], [300, 600]], slotName).

        var refreshedMobile = false;

        jQuery('body').bind('touchmove', function(e) { 

             var inViewMobile = isScrolledIntoView('#'+slotName);

              if (inViewMobile == true && !refreshedMobile) {

                googletag.cmd.push(function() {
                  googletag.display(slotName);
                  googletag.pubads().refresh([slot]);
                });


                refreshedMobile = true; // Refresh the ad only once.

              }
        });
}

Function used to determine if the ad container is viewable: (used by function above)

function isScrolledIntoView(elem)
{
    var $elem = jQuery(elem);
    var $window = jQuery(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));

}
Omar
  • 32,302
  • 9
  • 69
  • 112
richelliot
  • 588
  • 2
  • 10
  • 30

0 Answers0