web-dev-qa-db-ja.com

Google AdSenseを反応jsに埋め込む方法

私はreactjsの初心者で、Googleインライン広告をループに埋め込みたいです。広告は初めて表示されています。要素タグを検査すると、ループが表示されます。この問題の解決方法を教えてください。

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 Image

要素の出力を検査：-

Inspect Element output

javascriptreactjsreact-reduxadsadsense
11
Sharma Vikram

これは重複した質問のようです。 here にあります。しかし、100％明確ではないと思います。したがって、私は this のブログ投稿を1度目にしました。

グーグルからこれを持っています：

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

次のように反応コンポーネントを作成します。

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

ノート：

  1. あなたのグーグルセンスから、class属性の名前をclassNameに変更してください
  2. style属性を次のようにラップするように更新します：style={{ display: 'block' }}
19
jpgbarbosa

@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' />
    );
  }
}
2
Seunghun Sunmoon Lee