it-swarm.com.de

Wie man Google Adsense in js reagieren einbindet

Hallo alle,

Ich bin Anfänger in Reactjs und möchte Google Inline-Anzeigen in Loops einbetten. es wird nur beim ersten mal gezeigt. aber in inspect Element Tag zeigt in Schleife.

Google AdSense-Code: -

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

Ausgabe: -

 Output Image

Elementausgabe prüfen: -

 Inspect Element output

Vielen Dank,

Vikram

4
Sharma Vikram

Dies scheint eine doppelte Frage zu sein. Sie finden es in hier . Aber ich denke es ist nicht 100% klar. Also bin ich einmal auf this Blogpost gestoßen, was klarer ist.

Von Google haben Sie Folgendes:

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

Jetzt in deiner Reaktions-App:

Fügen Sie das folgende Snippet in Ihre index.html ein

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

Erstellen Sie Ihre Reaktionskomponente wie folgt:

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

Um es jetzt mehrmals zu rendern, können Sie das HTML-Tag ins einfach mit einem Iterator wie map umschließen. Allerdings verstehe ich Ihr Bedürfnis hier nicht ganz.

Wenn Sie alle auf einmal anzeigen möchten, erstellen Sie Ihre Map wie this .

Wenn Sie Ihre Anzeige nach dem Zufallsprinzip sortieren möchten, fügen Sie Ihrer Komponente einen Status und ein Häkchen hinzu, damit sie alle X Sekunden neu gerendert werden kann. Überprüfen Sie es in this SO answer

Anmerkungen:

  1. Benennen Sie in Google Sense Add das Attribut class in className um.
  2. Aktualisieren Sie das Attribut style, das wie folgt verpackt werden soll: style={{ display: 'block' }}
12
jpgbarbosa

Answer by @jpgbarbosa ist super. Ich füge eine bessere Vorgehensweise für Server Side Rendered React-Anwendungen hinzu, die mehrere Seiten haben. Aus Gründen der Skalierbarkeit empfehle ich, diese Methode zu verwenden, um die Codebasis wartbar zu halten.

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