如何嵌入谷歌的AdSense在反应JS

Question

您好所有，

我在reactjs初学者，我想在循环中嵌入谷歌内置广告。它只在第一时间显示。但在检查元素标签显示在循环中。

谷歌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的博客文章比较清楚。

从谷歌你有这样的：

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

创建你[R反应成分，如：

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

现在，多次渲染它，你可以简单地像map一个迭代包裹ins html标记。但是我并没有完全理解你的需求。

如果您想要一次显示所有图像，请执行您的地图，如this。

如果您想随机分配您的广告，请向您的组件添加一个状态并添加一个打勾状态，以便每隔X秒再呈现一次。检查它在this SO回答

注：

1. 从你谷歌感知增加，重命名class属性className
2. 更新style属性被包裹这样的：style={{ display: 'block' }}通过

Answer 2

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