How to solve google Publisher Tag multi ad showing mistakes in slotRenderEnded?

Question

I use nuxt composition api. Every page has many different ads so i created a composable structure to get ads. This works well but for example , if i have 5 ads in a page , it will be rendered 25 times in slotRenderEnded functions. (x^2 times)

useAds.js

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

let slots = {};

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());
      googletag.pubads().enableSingleRequest();
      googletag.enableServices();
      googletag.display(id);
      googletag.pubads().addEventListener('slotRenderEnded', event => {
        console.log('slotRenderEnded');

        if (event.slot.getSlotElementId() === id) isAdLoaded.value = !event.isEmpty;
      });
    });
  };

  const destroyAds = id => {
    if (window.googletag && window.googletag.apiReady && slots[id]) {
      window.googletag.destroySlots([slots[id]]);
      window.googletag.pubads().refresh([slots[id]]);
    }
  };

  return { isAdLoaded, createAd, destroyAds };
};

export default useAds;

in console

25 slotRenderEnded

Answer 1

Looks like you are creating / attaching an event every time you define a slot. These events being attached to your GPT instanciation, every registered listener will be triggered when one ad is rendered.

You need to define the event listenner once per page (outside your slot creation workflow), when you define the GPT Then, every time a slot will be defined and rendered, the generic / global event listenner will be triggered with its "slot" property / GPT params.