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

Question

大家好,

我是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

这似乎是一个重复的问题.你可以在这里找到它.但我认为这不是100%明确的.所以,我在这篇博文中看到过一次更清楚的内容.

来自谷歌你有这个:

<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使用迭代器来包装html标记即可map.但是,我不完全明白你的需要.

如果你想一次展示它们,那么就像这样做你的地图.

如果您想要随机化广告,请在组件中添加状态和勾选状态,以便每隔X秒重新渲染一次.在这个 SO答案中检查它

笔记:

1. 从你谷歌意义添加,重命名class属性className
2. style要包装的更新属性如下:style={{ display: 'block' }}

Answer 2

如果您在一个组件中加载 Adsense 脚本，而在另一个组件中加载广告位，则在安装第二个组件时该脚本可能尚未加载。因此，window.adsbygoogle将被评估为 [] 并且广告将不会加载。如果您同时使用自动广告和广告单元，这甚至会影响自动广告。

这是我已经实施的解决方案：

import React, { useEffect } from "react"

const SideAd = () => {
  useEffect(() => {
    const pushAd = () => {
      try {
        const adsbygoogle = window.adsbygoogle
        console.log({ adsbygoogle })
        adsbygoogle.push({})
      } catch (e) {
        console.error(e)
      }
    }

    let interval = setInterval(() => {
      // Check if Adsense script is loaded every 300ms
      if (window.adsbygoogle) {
        pushAd()
        // clear the interval once the ad is pushed so that function isn't called indefinitely
        clearInterval(interval)
      }
    }, 300)

    return () => {
      clearInterval(interval)
    }
  }, [])
  return (
    <ins
      className="adsbygoogle"
      style={{ display: "inline-block", width: "300px", height: "250px" }}
      data-ad-client="ca-pub-xxxxxx"
      data-ad-slot="xxxxx"
    ></ins>
  )
}

export default SideAd

Answer 3

@jpgbarbosa 的回答很棒。我将为具有多个页面的服务器端渲染 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' />
    );
  }
}