ReactJS and Adsense Responsive Ads

Viewed 651

I'm battling for few hours with Adsense Ads in ReactJS:

Here is my code:

export default class AdJobDetail extends React.Component {
    componentDidMount() {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
    }

    render() {
        return (
            <div className={style.container}>
                <ins className='adsbygoogle'
                    style={{ display: 'display:block' }}
                    data-ad-client="ca-pub-6591684000448474"
                    data-ad-slot="6458345829"
                    data-ad-format="auto" />
            </div>
        );
    }
}

(Ad client and ad slot have been changed).

Here is the style I use:

.container {
margin-top: 20px;
border: 1px solid $light-grey;
width: 200px;
height: 200px;
}

.ins {
width: 100%;
height: 100%;
}

And I constantly get:

adsbygoogle.push() error: no slot size for available width=0

My questions are:

  • To me, the width is more than 0 so why do I get this error?
  • Can it be that the script is not mounted properly? But I have non responsive ads which are working perfectly...
1 Answers

You may need to use absolute units for your width (such as px) instead of relative width units like percentages.

Related