Nov 13, 2022
How To Add Google Adsense in Our React Website?
#react#programming#tutorial#beginners
In This Post I share a Small Code regarding Google Adsense implementation in Our React Website?
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.
App.js
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 ♥
Add a comment
Questions and corrections are both welcome. Your email is not asked for and not stored.