web-dev-qa-db-fra.com

Comment intégrer Google Adsense dans React Js

Je suis débutant dans reactjs et je veux intégrer des annonces google inline dans des boucles. L'annonce n'est diffusée que la première fois. Lorsque j'inspecte la balise d'élément s'affiche en boucle. Puis-je s'il vous plaît savoir comment résoudre ce problème?

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

Sortie: -

Output Image

Inspecter la sortie de l'élément: -

Inspect Element output

javascriptreactjsreact-reduxadsadsense
11
Sharma Vikram

Cela semble une question en double. Vous pouvez le trouver dans ici . Mais je pense que ce n'est pas clair à 100%. Donc, je suis tombé une fois sur this blog post qui est plus clair.

De Google, vous avez ceci: 

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

Maintenant, dans votre application React:

Incluez l'extrait suivant dans votre index.html

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

Créez votre composant React comme:

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

Maintenant, pour le rendre plusieurs fois, vous pouvez simplement envelopper la balise html ins avec un itérateur comme map. Cependant, je ne comprends pas parfaitement votre besoin ici.

Si vous voulez les montrer tous en même temps, faites votre carte comme this .

Si vous souhaitez randomiser votre annonce, ajoutez un état à votre composant et un état de tick afin qu'il puisse être rendu toutes les X secondes. Vérifiez-le ceci SO réponse

Remarques:

  1. Depuis votre ajout google sense, renommez l'attribut class en className
  2. Mettre à jour l'attribut style à encapsuler comme suit: style={{ display: 'block' }}
19
jpgbarbosa

La réponse de @jpgbarbosa est super. J'ajouterai une meilleure pratique pour les applications côté serveur rendues React applications qui ont plusieurs pages, pour l'évolutivité, je vous suggère d'utiliser cette méthode pour maintenir la base de code maintenable.

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