javascript 如何在 react js 中嵌入 google adsense

How to embed google adsense in react js

提问by Sharma Vikram

I am beginner in reactjs and I want to embed google inline ads in loops. The ad is showing only at first time. When I inspect the element tag shows in loop. Can I please know how to solve this issue?

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

Google adsense code:-

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

Output:-

输出：-

Inspect Element Output:-

检查元素输出：-

回答by jpgbarbosa

This seems a duplicated question. You can find it in here. But I think it isn't 100% clear. So, I came across once with thisblog post which is more clear.

这似乎是一个重复的问题。你可以在这里找到它。但我认为这不是 100% 清楚。所以，我在这篇博客文章中遇到过一次，它更清楚。

From Google you have this:

从谷歌你有这个：

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

---

---

Now, in your react app:

现在，在您的 React 应用程序中：

Include the following snippet in your index.html

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

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

Create your react component like:

创建你的反应组件，如：

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

Now, to render it multiple times you can simply wrap the inshtml tag with an iterator like map. However, I don't fully understand your need here.

现在，要多次渲染它，您可以简单地ins用像map. 但是，我不完全理解您在这里的需求。

If you want to show them all at once, then do your map like this.

如果你想一次显示它们，那么像这样做你的地图。

If you want to randomise your ad, add a state to your component and a tick state so that it can re-render every X seconds. Check it in thisSO answer

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

Notes:

笔记：

1. From you google sense add, rename classattribute to className
2. Update styleattribute to be wrapped like this: style={{ display: 'block' }}

1. 从您的 google 意义上添加，将class属性重命名为className
2. 更新style属性以这样包装：style={{ display: 'block' }}

回答by Seunghun Sunmoon Lee

Answer by @jpgbarbosa is great. I'll add better practice for Server Side Rendered React applications which have multiple pages, for scalability, I suggest you use this method to keep code base maintainable.

@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' />
    );
  }
}