如何在 Google DFP/AdSense 中使用 reactjs

Question

我想使用 Facebook 的 reactjs 框架 (JSX) 构建一个项目，但考虑到它的呈现方式，我将如何将它与 Doubleclick for publishers 一起使用？

如果我触发了 adsense/urchin，我如何告诉 React 不要更改/更新这些项目？

我可以使用其他 AdWords 脚本/界面吗？

Answer 1

（当我有一个 jsx 示例时，将用一个 jsx 示例来清理这个答案，现在......）

感谢freenode中的rcs #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.

（修正 apos）

Answer 2

这是一个处理展示广告的简单组件，考虑到viewability best practices。 （感谢Tracker1 提供这里的 cmets，这极大地帮助了我整理这些内容。）

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。