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
Top comments (9)
not working !
Note: the google ad will not work on localhost
Yes,it not work on Local,Because Googel Adsense Provide Ads on your given wesite url ,but when you use local ,Googel Adsense not get your provide website url
are there any other ways to test before we move to production?
use google test Adsense Id
can You Share Your Code
how can I get dataAdSlot?
it will provide by google adsense
Some comments may only be visible to logged-in visitors. Sign in to view all comments.