如何在 React js 中嵌入 google adsense

Question

我是 reactjs 的初学者，我想在循环中嵌入谷歌内嵌广告。广告仅在第一次展示。当我检查元素标签时显示在循环中。请问我可以知道如何解决这个问题吗？

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>

---

现在，在您的 react 应用中：

在 index.html 中包含以下 sn-p

<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 之类的迭代器一起包装。但是，我不完全了解您的需求。

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

如果您想随机化您的广告，请为您的组件添加一个状态和一个刻度状态，以便它可以每 X 秒重新呈现一次。检查它在this SO answer

注意事项：

1. 从你的 google 感觉添加，将 class 属性重命名为 className
2. 将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

如果您在一个组件中加载 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