hustcc / react-adsense

:film_projector: a simple React-component for Google AdSense / Baidu advertisement.
https://git.hust.cc/react-adsense
MIT License
276 stars 43 forks source link

Error when switching sites: availableWidth=0 #17

Open fernlop opened 5 years ago

fernlop commented 5 years ago

I get this error on every first load of the page. On any other re-mount or reload it will work. I set min-width for the container of the add. But i think the problem is, that "window.adsbygoogle = window.adsbygoogle || []).push({})" starts to early, not after finished load of the page.

message: "adsbygoogle.push() error: No slot size for availableWidth=0" name: "TagError" pbr: true stack: "TagError: adsbygoogle.push() error: No slot size for availableWidth=0↵ at Zg (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:17:7433)↵

timscott commented 5 years ago

I made this error to go away by setting format as follow:

// for my banner ads
format="horizontal,auto"

// for my sidebar ads
format="rectangle,auto"

Setting just auto or just a specific setting gives me the error you mention.

robinvdv12 commented 5 years ago

This makes te error goes away, just like the ads... When I switch pages, I get the same error. Please help!

idofle commented 5 years ago

For me, it happens on a refresh with a non-home page, and only when an ad-blocker is active.

wilfredonoyola commented 5 years ago

Same problem here. For me, it happens when tried to put an ads 300px X 50px (Mobile Version in the bottom) and with other ads this works!

morhung commented 3 years ago

Insert the script before </body>, it will work <script> (adsbygoogle = window.adsbygoogle || []).push({ }); </script>

ordinathorreur commented 3 years ago

I've found this error usually happens with my responsive ads if the ad is hidden by css when mounted. (e.g. by using display: none; as suggested by Google when hiding/showing multiple responsive ad units.) I guess the same might happen if an ad blocker hides (or removes) the ad unit.

In my case I needed to add/remove the css classes that show/hide child ad units before mounting the ad units. I did this work in the parent component's constructor and getSnapshotBeforeUpdate functions (or constructor and componentWillReceiveProps if you're using the older lifecycle methods)

Also note I'm not actually using this lib, but my setup seems very similar to this lib and I came across this ticket when debugging my own problem. Hope it helps.

foloinfo commented 2 years ago

I was in the same situation that Adsense.Google is trying to window.adsbygoogle.push({}) after the component was unmouted. This happens when you quickly go back and forth between screens (I use react navigation on web), causing adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0 error.

I ended up just catch the error and suppress it, since this error is not so important, but causing our App to crash.

  useEffect(()=> {
    try{
      if(window) (window.adsbygoogle = window.adsbygoogle || []).push({})
    }catch(e){
      // component might be unmounted
      console.log(e)
    }
  }, [])

(I no longer use this library and just rewites https://github.com/hustcc/react-adsense/blob/master/src/google.jsx into functional component.)