Question

Hello All，

我是reactjs的初学者，我想在循环中嵌入谷歌内联广告。它只在第一时间显示。但是在inspect元素标签中显示循环。

Google adsense代码： -

 var ScheduleRow = React.createClass({
 var rows = _.map(scheduleData.schedules, function(scheduleList, i) {
  var divStyle = { display: "block"};  
  return (  
    <ins className="adsbygoogle"
        style={divStyle}
        data-ad-client="ca-pub-3199660652950290"
        data-ad-slot="6259591966"
        data-ad-format="auto" key={i}>
    </ins>
  ); 
 });

return (
    <span>
        {rows}
    </span>
);
});

输出： -

检查元素输出： -

谢谢，

维克拉姆

Answer 1

这似乎是一个重复的问题。您可以在here中找到它。但我认为这不是100％明确的。所以，我在this博客文章中遇到过一次更明确的内容。

来自Google，你有这个：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-12121212"
      data-ad-slot="12121212"
      data-ad-format="auto"/>

<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

现在，在您的反应应用中：

在index.html中包含以下代码段

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

创建您的反应组件，如：

import React from 'react';

export default class AdComponent extends React.Component {
  componentDidMount () {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

render () {
    return (
        <ins className='adsbygoogle'
          style={{ display: 'block' }}
          data-ad-client='ca-pub-12121212'
          data-ad-slot='12121212'
          data-ad-format='auto' />
    );
  }
}

现在，要多次渲染它，您可以使用像ins这样的迭代器简单地包装map html标记。但是，我不完全理解你的需要。

如果您想一次显示所有内容，请执行this之类的地图。

如果您想要随机化广告，请在组件中添加状态和刻度状态，以便每隔X秒重新渲染一次。请在this SO回答

中查看

注意：

从谷歌意义上添加，将class属性重命名为className
更新style属性，如下所示：style={{ display: 'block' }}

Answer 2

@jpgbarbosa回答很棒。我将为具有多个页面的Server Side Rendered React应用程序添加更好的实践，为了可伸缩性，我建议您使用此方法来保持代码库的可维护性。

export default class HomePage extends React.Component {
  componentDidMount() {
    const installGoogleAds = () => {
      const elem = document.createElement("script");
      elem.src =
        "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
      elem.async = true;
      elem.defer = true;
      document.body.insertBefore(elem, document.body.firstChild);
    };
    installGoogleAds();
    (adsbygoogle = window.adsbygoogle || []).push({});
  }

  render() {
    return (
      <ins className='adsbygoogle'
           style={{ display: 'block' }}
           data-ad-client='ca-pub-12121212'
           data-ad-slot='12121212'
           data-ad-format='auto' />
    );
  }
}

Answer 3

npm install --save react-adsense

import React from 'react';
import AdSense from 'react-adsense';

export default class AdsenseWidget extends React.Component {
 componentDidMount() {
        const installGoogleAds = () => {
          const elem = document.createElement("script");
          elem.src =
            "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
          elem.async = true;
          elem.defer = true;
          document.body.insertBefore(elem, document.body.firstChild);
        };
        installGoogleAds();
    }


render () {
    return ( 
        <AdSense.Google
          client='ca-pub-3236992787867833'
          slot='1686195266'
          style={{ display: 'block' }}
          format='auto'
          responsive='true'
        />
    );
  }
}

如何在反应中嵌入谷歌的adsense

3 个答案: