如何在ajax成功上重新加載DFP廣告管理系統廣告？

Question

背景故事： 每次新的搜索結果完成後，服務器將返回整頁HTML。這包括廣告（有新的目標，ID等）。

我需要重新加載DFP廣告管理系統中位於搜索結果包裝（內容通過AJAX更新）內的其中一個廣告。這是我當前的代碼：

'use strict'; 
 
var $ = require('jquery'); 
 
require('./dfp-events'); 
 
var advertisements = {}; 
 
module.exports = advertisements; 
 

 
// component configuration 
 
var COMPONENT_ATTR = 'data-advertisement'; 
 
var COMPONENT_SELECTOR = '[' + COMPONENT_ATTR + ']'; 
 
var LAZY_INIT_SELECTOR = '[data-advertisement-init="lazy"]'; 
 

 
var SIZE_MAPPING_ATTR = 'data-advertisement-size-mapping'; 
 
var SIZE_DEFAULT_ATTR = 'data-advertisement-size-default'; 
 
var ADUNIT_PATH_ATTR = 'data-advertisement-adunit-path'; 
 
var CATEGORIES_URL_ATTR = 'data-advertisement-categories-url'; 
 
var GOOGLE_TAG_SERVICE_URL = 'https://www.googletagservices.com/tag/js/gpt.js'; 
 
var USER_ACCEPTED_COOKIES_ATTR = 'data-advertisement-has-user-accepted-cookies'; 
 
var REFRESH_AD_ATTR = 'data-advertisement-refresh'; 
 

 
advertisements.create = function(elements) { 
 
    var component = this; 
 
    advertisements.loadGoogleTagServices(); 
 
    window.googletag.cmd.push(function() { 
 
     window.googletag.pubads().setCookieOptions(advertisements.getCookieOptions(elements)); 
 
     window.googletag.pubads().collapseEmptyDivs(true); 
 
     window.googletag.enableServices(); 
 

 
     [].forEach.call(elements, function(element) { 
 
      var config = advertisements.getAdConfig(element); 
 
      advertisements.instances.push(element); 
 
      element.id = config.id; 
 
      advertisements.addSlot(config); 
 
      advertisements.refreshAdAfterScroll(element); 
 
      advertisements.refreshAdAfterResultsUpdated(); 
 
     }); 
 

 

 
     window.googletag.enableServices(); 
 
     window.googletag.cmd.push(function() { 
 
      window.googletag.on('gpt-slot_rendered', function(e,level,message,service,slot) { 
 
       var slotId = slot.getSlotId(); 
 
       var $slot = $('#' + slotId.getDomId()); 
 

 
       // DFP adds two iframes, one for calling scripts and one for displaying the ad. we want the one that is not hidden 
 
       if ($slot.find('iframe:not([id*=hidden])') 
 
        .map(function() { return this.contentWindow.document; }) 
 
        .find('body') 
 
        .children().length > 0 
 
       ) { 
 
        $slot.find('iframe').contents().find('body').addClass('redesign'); 
 
       } 
 
      }); 
 
     }); 
 
    }); 
 

 
    component.bindEvents(); 
 
}; 
 

 
advertisements.bindEvents = function() { 
 
    // THIS IS TRIGGERED AFTER THE SEARCH RESULTS ARE DONE 
 
    $(document).on('resultsUpdated', function(elements) { 
 
     console.log('gottgis'); 
 
     // HERE IS WHERE I'D LIKE TO GET NEW DATA_ATTRIBUTES AND RELOAD THE DFP. 
 
    }); 
 
}; 
 

 
advertisements.refreshAdAfterScroll = function(element) { 
 
    var refreshAttr = (element.getAttribute(REFRESH_AD_ATTR).toLowerCase()); 
 
    var maxAdHeight = 650; 
 
    var atEnd = false; 
 
    var point2 = (($('[' + REFRESH_AD_ATTR + ']').offset().top) + maxAdHeight); 
 
    var lastScrollTop = 0; 
 
    var scrolledToPosition = false; 
 

 
    if (refreshAttr !== 'true') { 
 
     return; 
 
    } 
 

 
    $(window).scroll(function() { 
 
     var currentTopPosition = $(this).scrollTop(); 
 

 
     if ($(window).scrollTop() + $(window).height() > $(document).height() - maxAdHeight) { 
 
      atEnd = true; 
 
     } 
 

 
     if (currentTopPosition < lastScrollTop && currentTopPosition < point2 && atEnd) { 
 
      if (!scrolledToPosition) { 
 
       window.googletag.pubads().refresh(); 
 
       scrolledToPosition = true; 
 
      } 
 
     } 
 
     lastScrollTop = currentTopPosition; 
 
    }); 
 
}; 
 

 
advertisements.instances = []; 
 
advertisements.cachedCategoriesByUrl = {}; 
 

 
advertisements.getCategories = function(categoriesUrl) { 
 
    var cachedCategories = advertisements.cachedCategoriesByUrl[categoriesUrl]; 
 
    if (cachedCategories) { 
 
     return cachedCategories; 
 
    } else { 
 
     var getCategories = $.ajax(categoriesUrl); 
 
     advertisements.cachedCategoriesByUrl[categoriesUrl] = getCategories; 
 
     return getCategories; 
 
    } 
 
}; 
 

 
advertisements.getCookieOptions = function(elements) { 
 
    var cookiesAccepted = elements[0].getAttribute(USER_ACCEPTED_COOKIES_ATTR); 
 
    //Get the first element,this attribute has to be the same for all the ads 
 
    if (cookiesAccepted && cookiesAccepted.toLowerCase() === 'true') { 
 
     return 0; 
 
    } 
 
    return 1; 
 
}; 
 

 
advertisements.getAdConfig = function(element) { 
 
    return { 
 
     id: element.id || 'ad-' + advertisements.instances.length, 
 
     adunitpath: element.getAttribute(ADUNIT_PATH_ATTR), 
 
     sizemapping: JSON.parse(element.getAttribute(SIZE_MAPPING_ATTR)), 
 
     sizedefault: JSON.parse(element.getAttribute(SIZE_DEFAULT_ATTR)), 
 
     categoriesUrl: element.getAttribute(CATEGORIES_URL_ATTR) 
 
    }; 
 
}; 
 

 
advertisements.addSlot = function(ad) { 
 
    advertisements.getCategories(ad.categoriesUrl) 
 
     .catch(function() { 
 
      return {}; 
 
     }) 
 
     .then(function(categories) { 
 
      advertisements.advertisementSlot(ad, categories); 
 
     }); 
 
}; 
 

 
advertisements.advertisementSlot = function(ad, categories) { 
 
    var tag = window.googletag 
 
     .defineSlot(ad.adunitpath, ad.sizedefault, ad.id) 
 
     .defineSizeMapping(ad.sizemapping) 
 
     .addService(window.googletag.pubads()); 
 

 
    for (var key in categories) { 
 
     if (categories.hasOwnProperty(key)) { 
 
      tag.setTargeting(key, categories[key]); 
 
     } 
 
    } 
 

 
    window.googletag.display(ad.id); 
 
}; 
 

 
advertisements.loadGoogleTagServices = function() { 
 
    window.googletag = window.googletag || {}; 
 
    window.googletag.cmd = window.googletag.cmd || []; 
 

 
    var gads = document.createElement('script'); 
 
    gads.async = true; 
 
    gads.src = GOOGLE_TAG_SERVICE_URL; 
 
    var node = document.getElementsByTagName('script')[0]; 
 
    node.parentNode.insertBefore(gads, node); 
 
}; 
 

 
// Turn all elements with the default selector into components. 
 
// Only one instance of advertisements per page. 
 
advertisements.create(
 
    document.querySelectorAll(COMPONENT_SELECTOR + ':not(' + LAZY_INIT_SELECTOR + ')') 
 
);

Answer 1

我知道這是一個老問題，但沒有得到答覆。以下是我如何在時間軸上通過JS刷新所有廣告的示例。它使用新的DFP JS api。希望它找到正在尋找的人。

var iInterval = 600000; // 10 Minutes 
setInterval(function() { 
    // Send DFP refresh request 
    googletag.pubads().refresh(); 
}, iInterval);