How to add Google AdSense to your React application?

When you have a blog or website which can earn money from Google AdSense (Google has approved) and it was build with ReactJS. How to add Google AdSense to your React application? For this question, today we'll share you about the way to do that.

Step 1:
Get your Google AdSense script code and add it into your HTML file, place the code inside the head tag like this:

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


Step 2:
Create Google Adsense Component to re-use in wherever you want:




In the Component above, we use 3 props to handle your Google Adsense:

- classNames: String => To add custom class name to style your Google Ads
- slot: String => To insert data-ad-slot that you get from Google AdSense
- timeout: Number (default is 200 milliseconds) => To time delay for your Ads after the page rendered (optional)

Step 3:
Add the GoogleAd component into your site where you'd like to display:




Note: This component work well on the React Server Side Rendering (SSR) also.

Happy Learning !!

Read more: How to add Google AdSense to a Vuejs app?

© 2019 4codev

Created with love by Sil.