CODEWITHSUNDEEP
google-tag-managernuxt3.jsgoogle-publisher-taggoogle-ads-script
Atabak
Atabak

Reputation: 1

How to avoid "googletag.defineSlot was called without a matching googletag.display call" warning?

We're using GPT in Single Page Application (Nuxt3 App).

onMounted(() => {
  const googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    googletag
      .defineSlot('/6355419/Travel/Europe/France/Paris', [300, 250], 'banner-ad')
      .addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
    googletag.display('banner-ad');
  });
})

onBeforeUnmount(() => {
  const googletag = window.googletag || { cmd: [] };
  googletag.destroySlots();

})

In code, I clearly see that "display" call is following right after "defineSlot". At the moment of code execution, DIV element already exists in the DOM.

Before the user navigate to the next page, we're destroying all slots created for the current page using googletag.destroySlots.

after route change we see this warning warning

can anyone help me to solve this problem?

This will definitely cause issue in impression counting (duplicate impressions);

I've tried different solutions such destroySlots or remove queryIds from window.googletag object, but Seems destroySlots not removing the slot completely and caching the ad unit.

Thank you in advance.

Upvotes: 0

Views: 1385

Answers (1)

Marghen
Marghen

Reputation: 686

I don't think the unBeforeUnmount will work at all in this case, I would set up a router guard:

const router = useRouter()
router.beforeResolve(async (to, from, next) => {
    //you code
    // to and from are both route objects. must call `next() to go with the flow`.
})

Ref: https://router.vuejs.org/guide/advanced/navigation-guards.html

Also, I don't know if you are on SSR or not, but I would definitely wrap whatever code deals with DOM withing an onMounted hook with

if (process.client) { ... }

Just to be on the safe side

Upvotes: 0

Related Questions