如何解决Google Publisher Tag的slotRenderEnded事件重复触发（x²次）问题？

问题原因 #

每次调用useAds()创建广告组件时，都会给googletag.pubads()新增一个slotRenderEnded事件监听器。当页面有5个广告时，会累计注册5个监听器；每个广告渲染完成时，所有已注册的监听器都会被触发一次，最终触发次数就是5×5=25次（即n²次，n为广告数量）。

修复方案 #

将事件监听器改为全局仅注册一次，通过回调映射来处理每个广告的状态更新，避免重复注册监听器：

import { ref } from '@nuxtjs/composition-api';

let slots = {};
// 存储各广告ID对应的状态更新回调
const adUpdateCallbacks = {};
// 标记全局监听器是否已注册
let isGlobalListenerRegistered = false;

const useAds = () => {
  const isAdLoaded = ref(null);

  const createAd = ({ path, size, id }) => {
    googletag.cmd.push(() => {
      googletag.pubads().collapseEmptyDivs();
      slots[id] = googletag.defineSlot(path, size, id).addService(googletag.pubads());
      
      // 保存当前广告的状态更新逻辑
      adUpdateCallbacks[id] = (isEmpty) => {
        isAdLoaded.value = !isEmpty;
      };

      // 仅注册一次全局监听器
      if (!isGlobalListenerRegistered) {
        googletag.pubads().addEventListener('slotRenderEnded', event => {
          console.log('slotRenderEnded');
          const slotId = event.slot.getSlotElementId();
          // 执行对应广告的状态更新
          adUpdateCallbacks[slotId]?.(event.isEmpty);
        });
        isGlobalListenerRegistered = true;
      }

      googletag.pubads().enableSingleRequest();
      googletag.enableServices();
      googletag.display(id);
    });
  };

  const destroyAds = id => {
    if (window.googletag && window.googletag.apiReady && slots[id]) {
      window.googletag.destroySlots([slots[id]]);
      // 清理回调和slot引用，防止内存泄漏
      delete adUpdateCallbacks[id];
      delete slots[id];
    }
  };

  return { isAdLoaded, createAd, destroyAds };
};

export default useAds;

关键修改点 #

• 新增adUpdateCallbacks对象，统一管理每个广告的状态更新逻辑
• 用isGlobalListenerRegistered确保slotRenderEnded监听器仅全局注册一次
• 销毁广告时清理对应的回调和slot引用，避免内存泄漏

内容的提问来源于stack exchange，提问作者oktay tontaş