How To Add Google AdSense To Your Website

Last Updated: 2022-02-21

AdSense is a good way to monetize your content. Assume you already get the approval.

Add Google AdSense to Next.js / Gatsby.js sites

If you are using a React based framework, the easiest way is to use react-adsense:

$ npm install react-adsense

Add to your layout:

<script
  data-ad-client="ca-pub-xxxxxxxx"
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
></script>

Add to the page:

import AdSense from 'react-adsense';

<AdSense.Google client="ca-pub-xxxxxxxx" slot="xxxxxx" />;

Trouble Shooting

No slot size for availableWidth=0

If you see errors like this:

adsbygoogle.push() error: No slot size for availableWidth=0

Try to give it a width:

<div style={{ width: '100%' }}>
  <AdSense.Google client="ca-pub-xxxxxxxx" slot="xxxxxx" />;
</div>