Google Ad-sense with React Hooks
Display Ads and earn money with connecting react hooks with google ad-sense.
Hello world, I hope you have created your google ad-sense account if not search google ad-sense and register with your domain.
If you have received your code — it will be like this
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script><ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-12121212"
data-ad-slot="12121212"
data-ad-format="auto"/><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Let’s move to code :
add below code in your <head> in index.html file
<!-- Link to font awesome --><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
Create googleads.js file in your ‘components’ or ‘screen’ or the folder you have other script files:
Paste below code in that ‘googleads.js’
Don’t Forget to replace your keys [data-ad-layout-key, data-ad-client]
import React, { useEffect } from 'react';function GoogleAds(props){const { currentPath } = propsuseEffect(() => {
window.adsbygoogle = window.adsbygoogle || []
window.adsbygoogle.push({})
}, [])return (<ins class="adsbygoogle"
style={{display:"block"}}
data-ad-format="fluid"
data-ad-layout-key="-Yo-ur-la-yo-ut-ke-y"
data-ad-client="Yo-ur-ad-client-id"
data-ad-slot={props.slot}
data-full-width-responsive="true">
</ins>);
}export default GoogleAds;
Now the open the script / file you want to display your ads to end users and paste
<div id="item3">
//display something to your users
</div><div id="ad1">
<GoogleAds slot="your slot id"/>
</div><div id="item4">
//display something to your users
</div>
In my case I displayed Ad in a map statement, Which displays on every 4th count. If you have confession, Instagram displays Ad’s in every 3rd posts
I have created this platform for sharing your contents easily. Checkout
import ..
import GoogleAds from "./googleAds"function userName(){const ...
let displayAd = 1
function increseDisplayAdd(){displayAdd +=1;}useEffect(...)
return(map( _ =>
//It will call a function to in
{increseDisplayAd()}{ displayAd % 4 == 0 ?//every 4th count of displayAd [4,8,12,16...] it will display ad
<div>
<GoogleAds slot=”MY-ID-I-WON'T-SHARE" count={displayAd/4}/>
</div>: “”}
)
);}
Below screenshots are the output [Before, After] adding Google Ad-sens
The extra space is left for Google to fill up the AD’s. But I don’t know why it’s not displaying AD’s in testing mode.
All of my contents and medias → sharely.in/ssk
