如何在 react js 中嵌入 google adsense [英] How to embed google adsense in react js

问题描述

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

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 博客文章中遇到了一次更清楚.

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.

从谷歌你有这个:

<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 中包含以下代码段

Include the following snippet in your 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' />
    );
  }
}

现在，要多次渲染它，您可以简单地将 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 秒重新渲染一次.在 this SO answer

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. 从你的谷歌感觉添加，将 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！