Javascript 从React.js应用程序中的广告合作伙伴加载外部脚本

我想在我的React.js Web应用程序中包含两种类型的广告

<script async="async" data-cfasync="false" src="//somewebstite.com/invoke.js"></script>
<div id="container-4foobarbaz"></div>

在渲染中：

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

  </div> 

（this.div=el）}>

您可以使用此示例代码。这背后的想法是在安装组件时导入ads脚本并初始化ads。每次组件重新安装到DOM时，它都不会导入已经导入的ads脚本。我还在Codesandbox上为您创建了一个示例：

componentDidMount（）{
//向head元素注入一些代码
const head=文件查询选择器（“head”）；
//导入谷歌广告脚本（如果尚未导入）
if（！head.querySelector（#my-google-ads-1”））{
常量脚本=document.createElement（“脚本”）；
script.id=“my-google-ads-1”；
script.async=true；
script.src=”https://www.google.com/adsense/search/ads.js";
head.appendChild（脚本）；
}
//向head元素添加另一个脚本
if（！head.querySelector（#my-google-ads-2”））{
常量脚本=document.createElement（“脚本”）；
script.id=“my-google-ads-2”；
script.type=“text/javascript”；
script.charset=“utf-8”；
script.innerHTML=`
（函数（g，o）{g[o]=g[o]||function（）{（g[o]['q']=g[o]['q']||[]）。推送(
参数）}，g[o]['t']=1*新日期}（窗口，'u googCsa'）；
`;
head.appendChild（脚本）；
}
//初始广告
var pageOptions={
“pubId”：“pub-96163890000213823”，//确保这是正确的客户端ID！
“查询”：“酒店”，
“adPage”：1
};
变量adblock1={
“容器”：“afscontainer1”，
“宽度”：“700”，
“数字”：2
};
窗口。_googCsa（'ads'，页面选项，adblock1）；
}
render（）{
返回(
你好，React.js
这些是样本广告
);
}

如果我使用的是谷歌以外的提供商怎么办？我的提供者是Adsterra。以下调用

窗口的等价物是什么您可以查看提供商网站上的文档，并将我的示例代码改编为您的。通常，所有提供商都要求我们导入LIB并初始化ads。
    const script = document.createElement("script");
    script.async = true;
    script["data-cfasync"] = true;
    script.src = "//somewebstite.com/invoke.js"

    this.div.appendChild(script); 

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

  </div> 

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