javascripthtmlreactjsadsexternal-script

Load External Script From Advertising Partner in React.js app


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> 

Solution

  • 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>
        );
      }