如何在刷新时避免GPT广告位被清空

Great question! The default behavior of googletag.pubads().refresh() clears the slot before attempting to load new ads, which leads to empty slots when the response has no creative. We can fix this by preserving the existing ad content and restoring it if the new ad request fails. Here's a modified version of your code that implements this logic:

googletag.cmd.push(function() {
  var REFRESH_KEY = 'refresh';
  var REFRESH_VALUE = 'true';

  // Define your ad slot as before
  googletag.defineSlot('/6355419/Travel',[728, 90], 'div-for-slot')
    .setTargeting(REFRESH_KEY, REFRESH_VALUE)
    .setTargeting('test', 'event')
    .addService(googletag.pubads());

  var SECONDS_TO_WAIT_AFTER_VIEWABILITY = 60;

  googletag.pubads().addEventListener('impressionViewable', function(event) {
    var slot = event.slot;
    if (slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE) > -1) {
      setTimeout(function() {
        // Step 1: Save the current content of the ad slot
        var slotElement = document.getElementById(slot.getSlotId());
        var originalAdContent = slotElement.innerHTML;

        // Step 2: Define a handler for the slot render event
        function handleSlotRenderEnded(renderEvent) {
          // Only act on the slot we're refreshing
          if (renderEvent.slot === slot) {
            // Clean up the event listener to avoid memory leaks
            googletag.pubads().removeEventListener('slotRenderEnded', handleSlotRenderEnded);
            
            // Step 3: If the new ad is empty, restore the original content
            if (renderEvent.isEmpty) {
              slotElement.innerHTML = originalAdContent;
            }
          }
        }

        // Attach the render handler before triggering refresh
        googletag.pubads().addEventListener('slotRenderEnded', handleSlotRenderEnded);

        // Step 4: Trigger the ad refresh
        googletag.pubads().refresh([slot]);
      }, SECONDS_TO_WAIT_AFTER_VIEWABILITY * 1000);
    }
  });

  googletag.enableServices();
});

How This Works: #

• Preserve Original Content: Before calling refresh(), we save the current HTML of the ad slot element. This captures the existing ad creative and any associated markup.
• Listen for Render Completion: We attach a slotRenderEnded event listener to detect when the refresh attempt finishes. This event provides a boolean isEmpty property that tells us if the new ad request returned valid creative.
• Restore on Failure: If the new ad is empty (renderEvent.isEmpty is true), we overwrite the empty slot with the saved original content. If the new ad loads successfully, we leave the fresh creative in place.
• Clean Up Listeners: We remove the event listener after it triggers to avoid duplicate handling and memory leaks.

Key Notes: #

• This approach works for most standard GPT implementations, but if your ad uses complex dynamic content (like iframes with scripts), restoring innerHTML might not fully replicate the original state. For those cases, you might need to use a more robust preservation method (e.g., cloning the element instead of saving HTML).
• Ensure your slot ID matches the ID of the DOM element holding the ad (in this case, div-for-slot).

内容的提问来源于stack exchange，提问作者Debjit Sinha