How-to
    How To Add Google AdSense To Your Website
    How To Download Canvas as an image
    How To Embed Youtube Videos
    How To Host NodeJS Apps
    How To Host Static Websites On Amazon AWS EC2
    How To Host Static Websites On Amazon AWS S3
    How To Host Static Websites On GCP Cloud Storage
    How To Install Node.js
    How to Speed Up IntelliJ IDEA / Clion
    How to safely store API Keys

How To Add Google AdSense To Your Website

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>