nuxt-modules / google-adsense

Google AdSense module for Nuxt.js
MIT License
204 stars 65 forks source link

Pushing Ads fail when Page Transition is enabled #172

Open ChristopheCVB opened 1 year ago

ChristopheCVB commented 1 year ago

Pushing Ads fail when Page Transition is enabled

Provided

Versions

Extract from package.json

{
  "devDependencies": {
    "nuxt": "3.0.0",
    "@nuxtjs/google-adsense": "^2.1.0"
  }
}

Config

pageTransition is set in nuxt.config.ts

export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'fade',
      mode: 'out-in',
    },
  },
  modules: [
    '@nuxtjs/google-adsense',
  ],
  'google-adsense': {
    id: process.env.GOOGLE_ADSENSE_ID,
    test: process.env.GOOGLE_ADSENSE_TEST_MODE === 'true',
  },
})

Setting the onPageLoad to true doesn't help

Current Result

Ads don't load and the following error appears in client-side console:

TagError: adsbygoogle.push() error: All ins elements in the DOM with class=adsbygoogle already have ads in them.

Expected Result

Ads should load seamlessly when enabling Page Transition in nuxt.config.ts

ChristopheCVB commented 1 year ago

A workaround is to retry to push ads in component onMounted with a slight delay (greater than the page transition in duration)

onMounted(() => {
    setTimeout(() => (window.adsbygoogle || []).push({}), 350) // My page transition duration is 300ms
})

Of course, this generates more errors in console (the same described above), but those can be safely ignored

lipecss commented 1 year ago

Im still getting this with nuxt3

ChristopheCVB commented 1 year ago

@lipecss did you try the workaround above?