Как использовать реакцию с Google DFP/AdSense

Ответ 1

Вот простой компонент, который обрабатывает показ объявлений, принимая во внимание лучшие возможности просмотра. (Спасибо Tracker1 за комментарии здесь, что очень помогло мне в этом вместе.)

import React from 'react';
import Waypoint from 'react-waypoint';

let instance = 0;

class Ads extends React.Component {
  static propTypes = {
    id: React.PropTypes.string,
    width: React.PropTypes.number.isRequired,
    height: React.PropTypes.number.isRequired,
    adslot: React.PropTypes.string.isRequired
  }

  constructor() {
    this.__id = 'ads-instance-' + ++instance;
    this.displayAd = this.displayAd.bind(this);
  }

  get id() {
    return this.props.id || this.__id;
  }

  componentDidMount() {
    googletag.cmd.push(function() {
      // Define the ad slot
      googletag
        .defineSlot(
          this.props.adslot, 
          [this.props.width, this.props.height], 
          this.id
        )
        .addService(googletag.pubads());

      // Start ad fetching
      googletag.enableServices();
    });
  }
  render() {
    return (
      <div style={{width:this.props.width, height:this.props.height}}>
        <Waypoint onEnter={this.displayAd} />
        <div id={this.id}></div>
      </div>
    );
  }
  displayAd() {
    const id = this.id;
    googletag.cmd.push(function() {
      googletag.display(id);
    });
  }
}

export default Ads;

Я использовал контрольную точку для обеспечения правильной видимости (не загружая объявления, пока пользователи не увидят их). Когда путевая точка попадает в нижнюю часть области просмотра, когда пользователь прокручивается до нее, displayAd() показывает объявление. Смещение может быть усилено, но, надеюсь, это будет хорошей отправной точкой, чтобы дать вам общую идею.

Если на одной странице есть несколько рекламных мест, вы можете использовать уникальные идентификаторы вместо #ad-container.

Ответ 2

(очистит этот ответ с помощью примера jsx, если у меня его есть, на данный момент...)

Благодаря rcs в freenode #reactjs:

rcs> tracker1: componentDidMount and make sure 
you're not throwing it away when you don't mean to

tracker1> rcs: so use componentDidMount for adsense/dfp 
binding, and simply don't change the render output?

rcs> tracker1: Yeah. Your render should write out the 
<ins class="adbygoogle" data-analytics-uacct ..... > 
piece, and you should fire off the adsbygoogle.push in 
componentDidMount

tracker1> cool... didn't think it would be that easy for 
some reason...

rcs> tracker1: Or for dfp, handle the defineAdSlot in CDM, 
and googletag.pubads().refresh() on something that fires 
after they're all written out.

rcs> The thing that will trip you up is if you're firing 
things that make React thing that written node needs to get 
removed and replaced, instead of moved, etc.

rcs> But that shouldn't be a primary worry -- just something 
to keep in the back of your head if you're seeing more 
impressions/ad loads than you should be.

tracker1> they'll only change on a navigation/route change

rcs> Keep in mind that adsense TOS is vague on ajax page loads.
rcs> Or 'client side' page loads.

(fix apos)