Comment intégrer Google adsense dans React js

Question

Bonjour à tous,

Je suis débutant dans reactjs et je veux intégrer annonces inline Google dans les boucles. il ne montre que la première fois. mais en inspectant les balises d'éléments en boucle.

Google Code 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: -

élément de sortie Inspectez: -

Merci,

Vikram

Answer 1

Cela semble une question dupliquée. Vous pouvez le trouver dans here. Mais je pense que ce n'est pas 100% clair. Donc, je suis tombé sur une fois avec this blog, ce qui est plus clair.

de Google que 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, sur votre application réagir:

Inclure l'extrait suivant dans votre index.html

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

Créez-vous r réagissent comme composant:

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 ins html avec un iterator comme map. Cependant, je n'ai pas compris votre besoin ici.

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

Si vous voulez 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 dans this répondre SO

Notes:

1. De vous google détecte ajouter, renommer class attribut à className
2. Mise à jour style attribut à emballer comme ceci: style={{ display: 'block' }}

Answer 2

Réponse @jpgbarbosa est super.Je vais ajouter une meilleure pratique pour les applications Server Side Render React 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' /> 
    ); 
    } 
}