How To Add Google Adsense in Our React Website?

#webdev #react #javascript #beginners

First We Add given Below AdSense code in our "index.html" File in between the tags like This.
You Get This Code From Your Google AdSense account.

<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
 </head>

*Now, Second We Create AdSense Component,Which We use in the place where we want to show Ads. AdsComponent.js *

import React, { useEffect  } from 'react';

const AdsComponent = (props) => {
    const { dataAdSlot } = props;  



    useEffect(() => {

        try {
            (window.adsbygoogle = window.adsbygoogle || []).push({});
        }

        catch (e) {

        }

    },[]);



    return (
        <>
            <ins className="adsbygoogle"
                style={{ display: "block" }}
                data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
                data-ad-slot={dataAdSlot}
                data-ad-format="auto"
                data-full-width-responsive="true">
            </ins>
        </>
    );
};

export default AdsComponent;

And Now Finally time to show our ads in our React Pages Like this.

import './App.css';
import AdsComponent from './AdsComponent';

function App() {

//Note provide dataAdSlot value of your data-ad-slot which is your ad unit no.
    return (
        <>
            <h1>Place To show Google AdSense</h1>
           <AdsComponent dataAdSlot='X7XXXXXX5X' />
        </>

    );
}

export default App;

Well done! Finally Create AdSense Component For our React Website !

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository