Загрузить внешний скрипт из рекламного партнера в приложении React. js - PullRequest
Новая
       47

Загрузить внешний скрипт из рекламного партнера в приложении React. js

1 голос
/ 05 апреля 2020

Я хочу включить два типа объявлений в свой React. js Веб-приложение 

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

, а также это объявление: 

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

Как я могу включить это в свое приложение React? Я пробовал несколько вещей, но ни одна из них не работала, включая: 

    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>

1 Ответ

1 голос
/ 05 апреля 2020

Вы можете использовать этот пример кода. Идея заключается в том, чтобы импортировать рекламный скрипт при монтировании компонента и инициализировать рекламу. Каждый раз, когда компонент перемонтируется в DOM, он не импортирует уже импортированный рекламный скрипт. Я также создаю пример для вас на Codesandbox здесь: 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>
    );
  }
...