I want to include two types of ads into my React.js Web app
<script async="async" data-cfasync="false" src="//somewebstite.com/invoke.js"></script>
<div id="container-4foobarbaz"></div>
and this ad as well:
<script type="text/javascript">
atOptions = {
'key' : 'somekey',
'format' : 'iframe',
'height' : 250,
'width' : 300,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.cdnwebsite.com/invoke.js"></scr' + 'ipt>');
How Can I include this in my React App? I have tried a few things but none have them have worked including:
const script = document.createElement("script");
script.async = true;
script["data-cfasync"] = true;
script.src = "//somewebstite.com/invoke.js"
this.div.appendChild(script);
and this in the render:
<div id="container-4foobarbaz" ref={el => (this.div = el)} >
</div>
You can use this example code. The idea behind this is to import ads script when the component is mounted and initialize the ads. Every time the component remount to the DOM, it won't import the already imported ads script. I also create an example for you on Codesandbox here: https://codesandbox.io/s/example-react-google-ads-0b700
componentDidMount() {
// inject some code to head element
const head = document.querySelector("head");
// import google ads script if not yet imported
if (!head.querySelector("#my-google-ads-1")) {
const script = document.createElement("script");
script.id = "my-google-ads-1";
script.async = true;
script.src = "https://www.google.com/adsense/search/ads.js";
head.appendChild(script);
}
// add another script to head element
if (!head.querySelector("#my-google-ads-2")) {
const script = document.createElement("script");
script.id = "my-google-ads-2";
script.type = "text/javascript";
script.charset = "utf-8";
script.innerHTML = `
(function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
`;
head.appendChild(script);
}
// init ads
var pageOptions = {
"pubId": "pub-9616389000213823", // Make sure this the correct client ID!
"query": "hotels",
"adPage": 1
};
var adblock1 = {
"container": "afscontainer1",
"width": "700",
"number": 2
};
window._googCsa('ads', pageOptions, adblock1);
}
render() {
return (
<div className="App">
<h1>Hello React.js</h1>
<h2>These are sample ads</h2>
<div id='afscontainer1'></div>
</div>
);
}