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:


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" />;