How do I use reactjs with Google DFP/AdSense

Question

I'm wanting to build a project with Facebook's reactjs framework (JSX), but given how it renders, how would I use this with Doubleclick for publishers?

If I trigger adsense/urchin, how do I tell React not to change/update those items?

Is there an alternative adwords script/interface I can use?

Answer 1

(will clean up this answer with a jsx example when I have one, for now...)

Thanks to rcs in 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)

Answer 2

Here's a simple component that handles displaying ads, taking into account viewability best practices. (Thanks to Tracker1 for the comments here, which helped me tremendously in putting this together.)

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;

I've used react-waypoint to ensure proper viewability (not loading ads until users will see them). When the waypoint hits the bottom of the viewport as a user scrolls down to it, displayAd() shows the ad. The offset could be enhanced, but hopefully this will be a good starting point to give you the general idea.

If you have several ad slots on one page, you can use unique IDs in place of #ad-container.