如何在React JS中嵌入Google Adsense

问题描述

我是reactjs的初学者，我想将Google嵌入式广告嵌入循环中。广告仅在第一次展示。当我检查元素标签显示在循环中。请问如何解决这个问题？

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?

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

输出：-

检查元素输出：-

推荐答案

这似乎是一个重复的问题。您可以在找到它。但是我认为还不是100％清楚。因此，我偶然遇到了博客文章，更加清楚。

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 this blog post which is more clear.

从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中添加以下代码段。

Include the following snippet in your index.html

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

创建您的react组件，例如：

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

现在，要将其渲染多次，您只需包装即可 ins html标签以及类似 map 这样的迭代器。但是，我在这里并不完全了解您的需求。

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

如果您想一次显示所有地图，请像。

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

如果您想随机化您的广告，在组件中添加状态，然后在订单号中添加状态，以便每隔X秒重新呈现一次。在 SO答案

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 this SO answer

注意：

1. 从您的Google感觉添加，将 class 属性重命名为 className


2. 更新 style 属性，使其像这样包装： style = {{display ：'block'}}

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

这篇关于如何在React JS中嵌入Google Adsense的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！