I want to include two types of ads into my React.js Web app

<script async="async" data-cfasync="false" src="//somewebstite/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/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/invoke.js"

    this.div.appendChild(script); 

and this in the render:

<div id="container-4foobarbaz" ref={el => (this.div = el)} >

  </div> 

I want to include two types of ads into my React.js Web app

<script async="async" data-cfasync="false" src="//somewebstite./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./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./invoke.js"

    this.div.appendChild(script); 

and this in the render:

<div id="container-4foobarbaz" ref={el => (this.div = el)} >

  </div> 

• javascript
• html
• reactjs
• ads
• external-script

Share Improve this question Follow edited Apr 5, 2020 at 0:56 Lou asked Apr 5, 2020 at 0:02 LouLou 5711 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I saw you're trying to use adsTerra, so here is a working example (in Typecript)

import { useEffect, useRef } from 'react'
export default function Banner(): JSX.Element {
    const banner = useRef<HTMLDivElement>()

    const atOptions = {
        key: 'YOUR_KEY',
        format: 'iframe',
        height: 50,
        width: 320,
        params: {},
    }
    useEffect(() => {
    if (!banner.current.firstChild) {
        const conf = document.createElement('script')
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `//www.highperformancedformats./${atOptions.key}/invoke.js`
        conf.innerHTML = `atOptions = ${JSON.stringify(atOptions)}`

        if (banner.current) {
            banner.current.append(conf)
            banner.current.append(script)
        }
    }
}, [])

    return <div ref={banner}></div>
}

You can use this example code. The idea behind this is to import ads script when the ponent is mounted and initialize the ads. Every time the ponent 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

  ponentDidMount() {
    // 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./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>
    );
  }

Thanks a lots @Bruno Lobo. I try to implement adsterra Native Banner,multi-bammer and it work for me. Some code like below...

import { useEffect, useRef } from 'react'

page...
    
    const Banner()=>{
        const banner = useRef(HTMLDivElement)
    
        
        useEffect(() => {
        if (!banner.current.firstChild) {
            const script = document.createElement('script')
            script.type = 'text/javascript'
            script.src =`//paltryheadline./{provideByadsterra}/invoke.js`
    
            if (banner.current) {
                banner.current.append(script)
            }
        }
    }, [])
    
        return (<>
         <div ref={banner}></div>
         <div id=`container-{provideByadsterra}`></div>
        </>)
    }
...

return(
...
<Banner/>
...
)

i find the console error

VM3508 invoke.js:1 Uncaught TypeError: Cannot read properties of null (reading 'document') at VM3508 invoke.js:1:24549

but the website still works well