问题 如何在Google DFP / AdSense中使用reactjs

这是一个处理显示广告的简单组件，并考虑到了这一点 可见性最佳实践。 （谢谢 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;

我已经使用react-waypoint来确保正确的可见性（在用户看到它们之前不加载广告）。当航点在用户向下滚动到视口的底部时，displayAd（）会显示广告。偏移量可以增强，但希望这将是一个很好的起点，为您提供一般的想法。

如果您在一个页面上有多个广告位，则可以使用唯一ID代替 #ad-container。